QUTEE - Desktop Experience

UX, UI, Branding, and Copywriting.

imac_Qutee_homepage-min v2.png

OVERVIEW

Qutee is an opinion-gathering platform that makes it easy for users to analyze comments for specific topics. Users create "Qutee pages" which serve as case studies to examine a particular subject matter. Each Qutee page offers polling features, comment filters, a sentimental rating system, and detailed insight reports.

 

 

My Roles: UX Designer, UI Architect, and Graphic Designer

Tools: Adobe XD, Illustrator, Photoshop, and Invision

THE CHALLENGE

A standard issue with comment systems such as Facebook and Reddit is the difficulty in extracting quality comments from conversations. Users are stuck without a way to filter comments that suit their interests. To resolve this issue, I collaborated with the founder of Qutee to create the first intelligent discussion website of its kind.

 

My role involved redesigning the initial product which required a detailed approach to defining the UX strategy, IXD, branding, graphic design and copywriting.

MARKET ANALYSIS

To gain actionable insights, we had to understand Qutee's position amongst its competitors. After researching the existing market, we found that Qutee offered the most extensive feature list. Although more features don't necessarily mean a better product, a seamless UX does.

 

Our competitors were focused on starting debates about single topics without a means to filter the conversation. However, Qutee sought to weave together multiple discussions, intent polling and comment filters to provide extensive details about each topic. 

 

Extensive web research captured a range of qualitative and quantitative data, driving our understanding of the marketplace and the opportunity to create an innovative polling experience.  

competition_matrix.png

PERSONAS

As part of the research phase, I conducted Guerilla UX to capture a glimpse of the target audience. These personas provided user goals and pain points, resulting in a better understanding of the problems we needed to address. 

personas-min-min.png

USER STORIES

Based on the persona insights, I began to map out user needs and goals by turning them into user stories. By mapping out the features and functional requirements, the product's scope becomes more defined. 

user stories-min.png

USER TASK FLOW

task flow_larger_font.png

The next step was to map task flows within the product. My goal was to reduce the number of steps needed for each user to complete their tasks.  

 

Task Flow: A new user creates an account to post a comment.

WIREFRAME SKETCHES

Once the project's scope was understood, I began sketching UI components. Since a project's requirements are continuously evolving, drawing allows me to quickly iterate new ideas. 

desktop sketch-min.png

 

Wireframe Sketch: A new user visits the homepage (logged out state, above the fold).

WIREFRAMES

After sketching the initial UI, I started creating mid-fidelity wireframes. By using a 12 column grid, I was able to map out the page's architecture. During this phase, it is essential to identify the typographic scale and the proper dimension of each element. 

Qutee_homepage_wireframes-min (1).png

 

Wireframe: A new user visits the homepage (logged out state).

WIREFLOWS

Accompanying the wireframes, I documented each user story with a UX-flow deliverable. These wireflows are particularly useful when presenting the complex interactions between core pages. To test the validity of the flows, I created clickable prototypes using Invision to ensure the flows were seamless.

wireflows_annotations-min.png

 

Wireflow: A user signs in to register a new account. 

QUALITY ASSURANCE

Prototypes are typically tested during their second and third iterations. Since we wanted to nail the details and iterate quickly, we used Invision to create interactive prototypes. This Quality Assurance cycle allows for testing assumptions and validating them before implementing the final design. 

iteration_process-min.png

BRANDING

Once the style guide was in order, I created several variations of the logo. The first design was a wordmark to familiarise the audience with the brand. Since the business was still new, we wanted to ensure that the audience could identify the name before being presented with a brandmark logo.

 

The second logo, the brandmark, is how we intended to present the brand when faced with space restrictions. Each variation emphasized the "Q" which symbolized the company's theme — "Query tags for accessible data." 

branding.png

HIGH FIDELITY MOCKUPS

My aim was to create a visual representation of the live screen. This provides a great opportunity to reinforce a brand's colors, typography, and overall style.

 

Hi Fidelity Mockup: Qutee's Homepage (logged out state).

homepage screencap-min.png

FINAL THOUGHTS

Over the past year and a half, I worked on implementing over 70 design initiatives that were well received by Qutee's community. We accomplished something extraordinary. For the first time ever, social media influencers now have a platform to gain meaningful insights about their audience. These insights will allow them to cater future content, hold valuable discussions, and increase overall audience engagement.