Contents: Problems → Solutions → Process
Previously in a usability test on Quora, I identified two main issues, neither of which had easy quick-fixes:
1. Browse falls short in helping users discover interesting content
2. Search Results quality is questionable and navigation is difficult
Solutions (High-Fidelity Mockups)
Below are annotated before & after comparisons of the current Quora interfaces vs. the high-fidelity mockups of the redesigned version.
Borrowing Adaptive Path’s double-diamond process, I use Personas, User Stories, Sketches, Wireframing and Prototyping to understand the users’ needs and explore solutions for them. The goal is to maximize understanding of the problem space while deferring detail as long as possible to ensure a lean product development process.
Persona: Meet Alex
Alex is an aspiring entrepreneur with big dreams but a busy schedule.
“I sometimes get lost reading and browsing stuff from people I respect. But quality is important — finding credible content shouldn’t get in the way of my learning.
Personas are a great tool for developing empathy for the user and in ensuring that a product is designed to solve actual user needs. Although Quora has many kinds of personas (i.e. sage contributors, inquisitive scholars, etc), I focus on Alex, the time-starved entrepreneur, because my usability test participants all shared similar demographics, behaviors, and needs. Furthermore, Alex’s persona has a higher probability of resonating with the majority of users, according to the oft-quoted 1-9-90 rule (1% will answer, 9% will edit, and 90% lurk) in content-based networks.
Alex’s three core needs are:
1. Content Reliability: He wants to learn from the best, so Alex wants to easily see the best content on Quora.
2. Quick Access to Content: Alex is already heads-down working on his startup so when he needs to find something on Quora, he needs it pronto.
3. Content Discovery: With such a hectic schedule, the serendipitous advice and occasionally fun insight on Quora is an escape for Alex.
User Stories: Alex’s Needs
After understanding Alex’s 3 core needs, User Stories help me break them down from abstract high-level Epics into smaller designable pieces, which essentially make up the Use Cases. The Needs in the picture above are taken from comments users made during usability testing and organized under their respective Epics.
Next, I use a framework to break the needs down by the user’s roles, goals / desires, and desired benefits.
Framework: “AS A <Role>, I WANT<Goal/Desire> SO THAT <Benefit>”
Laid out in this framework, the user stories are now more concrete and designable. Note: I choose not to split stories until every last detail is covered because the stories shown above are very reasonable and realistic, and doing so would yield diminishing returns.
Note: Alex can be a Quality-Sensitive Learner, Time-Starved Entrepreneur and an Empowered Technology User because these are characteristics of his persona.
Task Flows: How Alex Interacts With Quora
Now that I have the User Stories laid out, I use Task Flows for two reasons:
1. Visualizing how all the User Stories interact together
2. Considering all problem / edge cases to prevent costly & wasteful product revisions later
Sketches: Making Alex’s Life Easier
After understanding how the user would navigate through each feature, I began sketching on a whiteboard the different ways to visualize them.
Note: The goal here is to diverge, or generate as many ideas as possible. I give myself the safe space to be creative without judgment.
After sketching a bunch of ideas on a whiteboard, I use a 2 x 2 matrix to prioritize the sketches based on Impact and Ease of Implementation. Many of these are subjective and based purely on assumptions, since I have no access to the inner workings of the product.
Note: Although intuitively it’s usually a good idea to simply choose the highest impact solution with greatest ease of implementation, sometimes it’s better to take a more challenging route for ensured long-term success.
The goal of wireframes is get a better sense of how the sketches would look without going into hi-fidelity mockups. Also, wireframes give richer feature feedback as opposed to nit-picky pixel-perfect critiques that hi-fidelity mockups invoke.
Having created high-fidelity mockups to bring the wireframes to life, the next step is to create a clickable prototype followed by additional usability testing to refine the design.
Note: I don’t work for or represent Quora. It’s just one of my favorite products so I’m exploring how I might help their mission of sharing and growing the world’s knowledge ☺