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.

To learn more about the Action Bar Spinner Android Design Pattern:
To learn more about the Fixed Tabs Android Design Pattern:


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>”

Alex’s needs broken up by Role, Goal/Desire, and Desired 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

Example of the Browse Task Flow, showing the high-level snapshot view and the detailed Shuffle flow. Full Browse Task Flow here:
Search Task Flow

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.

Unprioritized Sketches

Prioritized Sketches

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.


To learn more about the Action Bar Spinner Android Design Pattern:


To learn more about the Fixed Tabs Android Design Pattern:

Next Steps

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 ☺

Adventures in Consumer Technology

No IT Dept: You're On Your Own

Thanks to Aaron Manley

    Norman Tran

    Written by

    I design how we design @Tradecraft. Ex @MissionU, @StanfordGSB, @IDEOTeachersGuild. Impish improviser. Junior jazz pianist. Passable poet. Alliteration addict.

    Adventures in Consumer Technology

    No IT Dept: You're On Your Own

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade