top of page
QUTEE - Desktop Experience
UX, UI, Branding, and Copywriting.
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.
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.
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 TASK FLOW
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.
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.
.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.
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.
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."
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).
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.
bottom of page