Qnary portal

UX Research and redesign project for Qnary LLC, a global reputation management company that utilizes executives' digital footprint to become industry leaders.

Deliverables
Research, Design and Prototyping, Front-end development

Timeframe
9 months + retainer

UX/UI Design
front-end development
b2b

Overview

Qnary helps companies manage their reputation through their executives' digital footprint by providing custom social media content to position its executives as industry leaders. They've been listed as one of the 5000 fastest-growing companies in America by Inc magazine and as one of the 360 best companies by Entrepreneur magazine.

I was brought on to work with their development team over 9 months as a sole designer to discover and solve usability issues within their portal.

While I was there, I:

  • Worked alongside a Project Manager to identify usability issues by analyzing user feedback and behavior.
  • Introduced Figma and established design system framework for an early-stage company.
  • Collaborated with developer team to implement designs into product.

Process

The portal I was working on acted as the intermediary between Clients and internal staff. Clients would provide guidelines to a Qnary Account Manager, who would work with a team of Writers to curate social media content according to meet their user-established goals for their personal brand (e.g. topic focuses, tone, brand message).

As a result, I was designing two different parts of the product while working to manage two types of user needs.

One of the constraints of this project was that I wasn't able to conduct primary research on users. To compensate, I gathered data in a few ways:

Problem Identification

  • User Feedback. One form of primary research I had was user-submitted feedback which I used to identify user pain points.
  • External user testing. While I couldn't interview or reach out to users, I tested my prototypes independently to identify design flaws and iterate on existing ones.
  • Regular meetings with Product Manager. My PM and I worked together to confirm whether the issues I was solving for were being experienced by users and contrasting my solutions with their feasibility (development time) and effectiveness.

Helping clients get sh*t done

Once a week, a client will go onto their portal, approve their posts and provide feedback, and then close the portal.

The average client spends less than 3 minutes a week on this process, their main objective being to complete their tasks on the portal in as little time as possible. My work on the client-side of the portal focused on the user's main feed (where they would view and approve posts) to make sure it met that goal. To do that, I:

  • Replaced internal jargon with natural language, to make sure we weren't bombarding the user with information they didn't need.
  • Restructured the information architecture to put the information they did need right where they expected it to be.

How I designed it

The first priority was improving the readability of cards in users' feeds (such as posts, comments, etc.), fixing poor responsiveness, hard-to-read text sizes/weights, and faint color contrasts.

I then worked with each type of interaction individually to make each card more visually distinct and resemble their real-world counterparts (Instagram vs LinkedIn image posts, comments, X reposts) while keeping number of unique components low to reduce development time.

Ideas for potential new layouts of the client-side feed.
Final design of client feed.

With every feature Qnary added to assist their writers in their work, the interface became a little more cluttered. To fix that, I improved the readability of the portal by standardizing typography and reorganizing information on pages so that it was both easier and faster for writers and account managers to perform their roles. This work mostly consisted of

  • Creating type style guidelines to condense the large number of font sizes used, many of which were too small or light to be readable.
  • Organizing and redesigning menus and toolbars. In addition to poor readability in typography, important information tended to be buried in areas that were not frequently used.

Admin-side improvements

Screen used to manage content sent to users, updated to use more common components with the client-side.
Brief containing client information, structures to keep information readable and on one screen.
Before/After of main toolset used by Writers and Account Managers.
Typography styles used in the project.

Outcome

This project was about helping Qnary organize their portal and setting design foundations to make it easier for them to introduce new features in the future. The work I created was deployed and is being used by Qnary with over 2000 active users.

NEXT PROJECT

MongoDB Hackathon