Qnary is an executive reputation management company working to help professionals build their digital footprint and personal brand. However, despite having a user-centric model, the product has seen limited investment in enhancing user experience.
work summary.
I began my internship targeting low-effort high-impact changes on different parts of the product to gain an understanding of the product's functions as a whole. My focus in my redesigns was ensuring the UI adhered to design principles, as I didn't have access to direct user communication. Changes were spread across the product and over different features, which I then helped implement into production.
the smaller changes.
preventing user errors
To function, Qnary needs API tokens from the associated social media platform, which are called channels. However, API tokens are only assigned the permissions of the account at the time the token was created. If someone had a LinkedIn Basic account when they created their token, they would have to update the token if they upgraded to a LinkedIn Premium account for Qnary to take advantage of those features.
Half of all users would delete & re-add their token instead of replacing it, causing a de-activated state that could disrupt posting. The current UI does not present users with the correct action and lacks transparency on whether the user performed the correct function.
I replaced the delete button with a menu, which has the option to delete or update the channel's token. Functionally, it would be identical with the only added limitation being needing to be the same channel type, which saves developer time, and would significantly cut down user errors.
I made a few visual changes to improve readability: making the cards vertical and moving icons to the far left to improve scannability, along with adding the account type where necessary to improve system transparency, plus a button to prompt an update when required.
redesigning information architecture
Qnary's web app is designed for 3 different groups: the writers, the account managers, and the actual users. For writers and account managers, an important part of writing for their clients understanding their needs. Each client has a profile brief visible only on the admin-side, however, the information is poorly grouped and formatted in a way that wastes space and hinders readability.
I grouped everything into three categories: personal details, admin information, and scheduling information, and structured them into 3 columns, abbreviating certain words, and adding a copy button to the email in case it got truncated as a result of the restructuring.
the larger changes.
redesigning the inbox
Users receive the posts written for them in an inbox, where they can approve or reject the posts. Once the posts are approved, they are published to the user's account.
The inbox, being central to the user flow, accounts for 90% of users' time. Despite this, the inbox's design needed to be updated to follow basic principles of spacing, sizing, and information hierarchy.
The main issues with the inbox had to do with the individual cards. Most of them had uneven spacing that made the sections less cohesive. Some assets lacked consistent sizing rules (expanding when they shouldn't), while others were sized disproportionally.
There are seven types of interactions, which I broke down to pick a starting point:
Text-only: Only contains text, such as a tweet or regular LinkedIn post.
Article: Contains both text and an article linked in the post.
Comment: Only contains text, but is connected to an existing post
LinkedIn Share: Only contains text, but is connected to an existing post.
Image: Contains both text and a single image
Video: contains both text and a video
Gallery: Contains both text and multiple images
Article: Contains both text and an article linked in the post.
Comment: Only contains text, but is connected to an existing post
LinkedIn Share: Only contains text, but is connected to an existing post.
Image: Contains both text and a single image
Video: contains both text and a video
Gallery: Contains both text and multiple images
card structure
I moved the social media icon to the top left of the card, which would improve scannability as the inbox can be a long list: knowing the platform provides context for the language used within the post. I also standardized spacing between each part of the post and the sizing of the attachment, which would build visual cohesion between each card, regardless of platform or interaction type.
card redesigns
ARTICLE, SHARE, & COMMENT
Share posts had a tendency to take over the entire screen as text wasn't truncated and would include full-size images. To keep sizing standard, I truncated the posts after 2 lines, which I determined to be the right number to provide enough context while saving space, and removed any images. I adapted the structure of the article post, replacing the article post with the content of a post while maintaining the same sizing and padding.
Share and Comment are both post types that refer to an existing social media post, so I used the same components for each, moving the position of the post to denote the relationship of the written content to the post being referred to.
Share interaction
Comment interaction
IMAGE, VIDEO, GALLERY, & INSTAGRAM
The Image, Gallery, and Video posts couldn't be modified as much since changing any of the structure caused each individual post to be too large. Instead, I focused my changes on the proportions to more effectively communicate the relationships of the text to the image.
The Image, Gallery, and Video posts couldn't be modified as much since changing any of the structure caused each individual post to be too large. Instead, I focused my changes on the proportions to more effectively communicate the relationships of the text to the image.
Additionally, Qnary was also working on integrating Instagram into their supported platforms, giving me the added objective of designing for a new feature, since Instagram is a media-focused platform as opposed to a text-focused platform. While I didn't need to change anything for the single-Image post, I had to change the Gallery post to put the emphasis back onto the image while preserving the structure that I had designed.
To achieve this, I treated gallery posts as a distinct interaction type, emphasizing images at the top to mirror Instagram's image-first approach.
TEXT-ONLY & THREAD
Text-only posts were straightforward, but the conversion into Threads was more challenging. Threads are usually text only, but also need to be able to support other forms of media.
The existing Threads have a broken reading pattern which hampers readability, especially since Threads rely on a continuous message. I fixed this by choosing to indent every segment of the thread.
Redesigned text post
Old Thread interaction
Redesigned Thread interaction
inbox restructuring
In addition to removing clutter from the inbox, I shifted the sidebar to be a top bar, which created room to plan new features, such as filtering or a calendar widget.
implementation.
design system
As my work expanded and moved from conceptual closer to implementation, I needed to build a design system to both ensure consistency across designs and implement dark mode into each design I made.
implementation
In addition to creating designs and preparing them for developer handoff, i wrote some of my designs into code myself using ReactJS.
learnings.
being a solo designer
My first experience working in UX was as a solo designer. I learned a significant amount about the company, the functions of my role within it, and how the work I do has an impact on the next steps and the final product. As a solo designer, I learned all of this on my own without the guidance of a mentor.
becoming a design engineer
Before joining Qnary, I was a novice programmer, my coding experience limited to HTML/CSS. During my time at Qnary, I managed to expand this by working within a JS/React repository.
