A Guide to becoming a Product Designer - Part II

Designing a product

by Gavin Johns

This post will give you a foundational process to begin understanding product design while building a body of work to reference in a portfolio. You’ll want to go through this process many times to practice and learn as much as possible. Use it like a checklist. We’ll be covering:

  1. Project types
  2. Process & Tools
  3. Understand the problem
  4. Test feature
  5. Synthesize findings
  6. Ideation
  7. Lo Fi wireframes
  8. Validate through testing
  9. Hi Fi wireframes
  10. Repeat
  11. Prompts

1. Project types

  1. Choose an existing app you like to use.

  2. Choose a specific feature you want to test and redesign.

  3. If you’re stuck, use the “checkout flow for Instacart”.

Decide on a type

The goal is to start designing and creating things as soon as possible. You’ll learn the most through doing and naturally drift toward what you find interesting. With that in mind, I suggest you start with three types of projects:

  • Redesign an existing feature in an existing product. (Easier)
  • Design a new feature to an existing product. (Intermediate)
  • Design a new product you would want to use. (Harder)

Be strategic in your decision by choosing an industry you want to work in. It goes without saying, but by building a body of work that reflect what you’ll be doing professionally is always a good idea! ;)

What’s a feature?

Think of a feature as completing a specific task (which we’ll map out in our task flow below). In Yelp — it could be making a reservation. This assumes several tasks within it too: 1. Choose a time / date 2. Select party size 3. Find restaurant that takes reservations Each task is part of the overall feature of “making a reservation”.

2. Process & tools

  1. Download Free Trial of Sketch.

  2. Sign up for trial Marvel or inVision account.

  3. Read Steve Krug’s Rocket Surgery Made Easy

Here’s the process to use while redesigning an existing feature in an existing product:

  1. Understand the problem
  2. Test feature
  3. Synthesize findings
  4. Ideation
  5. Lo Fi wireframes
  6. Validate through testing
  7. Hi Fi wireframes
  8. Repeat

2.1 — Understand the problem

What feature did you choose? Let’s take a step back and think about it in context of the product and what it’s trying to achieve. What problem is it trying to solve? First let’s take a look and figure out who it’s for.

Who is this for?

We make a lot of assumptions about how people think, and creating a persona is an attempt to understand users more holistically. Although it’s come under fire recently for being too “simplistic” I would at least give it a shot for your project. Learn more about them in UX Pin’s 5-Minute Guide to Lean Personas.

What does it do?

Jobs to be done are a more popular way to ideate through product development. Here we focus on a specific job / feature that any number of personas could want to achieve.

By the end of this you should have one sentence that embodies the feature you’re redesigning based on a situation, motivation, and outcome. For example: “When I’m planning a dinner out with people, I want to make reservations, so I can focus on my guests.” This statement has built-in assumptions and a very clear situation, the user’s motivation, and their expected outcome.

Define success

The outcome should mirror your success objective. Setting a success metric or goal can be simple for now (like: user should be able to reserve a table for a specific time and party size at a specific restaurant), but will evolve into achieving KPIs (key performance indicators) once you start working on a product team that can track data.

Make a task flow

Map out the feature you want to redesign with a task flow. A task flow can be as detailed or rough as you want. For example, the task flow for my evening routine is:

  1. Get home
  2. [Routine]
  3. Go to bed

I could increase complexity by going into more detail and showing decision breaks:

  1. Get home
  2. Open door
  3. Walk inside
  4. Close door
  5. Has my dog peed?
  6. if No, let him out
  7. if Yes, continue routine
  8. Feed my dog
  9. [Make and eat dinner] — embedded task flow
  10. Watch critically acclaimed TV show The Walking Dead.
  11. Cry
  12. Go to bed

Task flows are typically drawn as tasks within shapes and are connected with arrows. Circles represent the start and finish of the flow, rectangles represent a step in the flow, diamonds represent a Y/N choice, and rectangles with bars at the top and bottom are nested flows (like Inception (is that reference too old? (can I nest parentheses too?))). Learn more about creating a task flow here.

2.2 — Test existing feature

You’re designing for people — and sometimes we’re unpredictable. It’s absolutely imperative to test designs because it will illuminate unforeseen issues. There are many types of testing and data we can collect, but for this process we’re focusing on gathering qualitative data through usability testing. The first round, we’ll be testing the existing feature in an existing app. Before you start be sure to have read Rocket Surgery Made Easy and use the resource downloads to make your job easier!

Plan the test

Planning a test is an art form. You don’t want to just ask them to do exactly what you’re wanting to test — as you’ve learned by reading Rocket Surgery Made Easy (I hope I’m really selling it). You need to create a scenario that takes them through each task naturally like this:

Imagine you’re taking your new boyfriend and his parents out to dinner tonight and want to impress them with reservations at a cool restaurant. How would you use Yelp to do that?

Within this prompt there are several tasks:

  1. Find a restaurant
  2. that you think is cool
  3. that takes reservations
  4. for tonight
  5. for 4 people

Know what to say — and what not to say. Review and adapt the Usability test script to your specific test.

Recruit users

Test the product with users that most represent the type of people you want to learn from. If I’m testing the reservation feature at Yelp, I want to learn from people who eat out at restaurants. When you recruit, it’s important to try and test the product with 7–12 people. It’s thought that any less won’t provide enough data and more has diminishing returns for your precious time.

To recruit, you can use craigslist and try to incentivize people with a little money. Or if you’re bootstrapped, you can always hit the pavement and go outside! I’ve personally grown to love this approach after many self-conscious tries. Just go to a cafe, mall, or somewhere that you’ll find people who don’t mind being approached. I typically start with a big smile and say:

Hi! I’m testing an app called ‘\___’ for the design team and would love your input! Do you have 15 minutes to help us improve?_

In my experience, people are generally interested in helping out — especially when they feel like their opinion matters.

Conduct test

If you’re in a controlled situation like an interview room, record the screen and voice. Have folks “hug the laptop” to record with your built-in camera. If you can’t record this way don’t worry — just sit strategically near them to see the screen and watch what they’re doing. Often times, what people say and do contradict so it’s important to catch it while taking notes. It’s always easier to have more than one person, but if you’re going it alone you can do it too. I’ve conducted many many usability tests alone and have gotten used to the cadence of talking and writing.

And if you haven’t yet, read Rocket Surgery Made Easy for pointers on how to conduct an interview. The most important things to do are listen, watch, and take lots of notes.

2.3 — Synthesize findings

Now that you’ve conducted 7–12 usability tests, you should have a ton of notes and a good idea of things that came up. Maybe everyone had an issue with this one thing. Maybe one person had a brilliant idea! You’ll want to record all of this as you synthesize your findings to get organized.

Dump & sort

Transfer all of your notes to post-its. This allows you to move each note around while you start to group and prioritize.


You’ll start to find themes of pain points throughout all of your notes. Think about how everything is related and start grouping pain points together in themes and tracking how many people had the issue.


Once you have groups and themes, you can start to prioritize things you want to work on. There are many ways to consider these. One way is to prioritize pain points based on an x-y axis where x is importance to the user, and y is difficulty to improve. There are also other ways to prioritize for example: importance to business, strategic importance, etc. I would suggest starting with choosing 3 “low hanging fruit” that are highly important to the user and relatively easy to improve (so we think). This also brings me to a very important point:

It’s okay to make assumptions as long as you state them with your reasoning.

This allows you to move forward without figuring out every single little detail and is an important liberty to take when ideas are new and fragile.

2.4 — Ideation

Here’s where things get a little less rigid in my process. I like to write, sketch, look at precedents, talk it out with people, clear my mind, refine, rethink, and repeat. Sometimes ideas are obvious to you, but not to others. I typically time-box this phase to a day because I learn more from testing an idea than spending more time thinking and talking to other technophiles. Your greatest asset is your user. And your user will give you insight and inspiration you never knew you needed. Choose one idea to pursue per pain point.

New task flow

At the end, your ideas should map to a new task flow. You’ll use this task flow to create screens and low fidelity wireframes next.

2.5 — Lo Fi wireframes

Quickly learn about low fidelity wireframes here. They’re basically rough schematic sketches of the user interface. Where is the search bar? Is there descriptive text? Do we have an image? How do we know we can swipe here? A Lo Fi wireframe can answer all these questions.

UI patterns

Common UI patterns exist because people are very efficient with our energy and don’t like to overthink (aka — we lazy). It’s explained by the concept of cognitive miser, where we have evolved to streamline repetitive tasks by making assumptions and finding patterns in our everyday lives. By using typical UI patterns we make things more usable. That being said, it’s okay to push the discipline and create new UI patterns, but I would try this after using typical patterns first.

Device & platform

I would first suggest testing a mobile app for iOS or Android, but eventually you might be interested in designing on a different device like on Desktop, Tablet, or Watch. Or a different platform like for Web, OS X, or Windows. These all have different patterns and guidelines. Familiarize yourselves with them and get to know how they differ.

Generate lots of ideas

You now have 3 “low hanging fruit” ideas to pursue and will draw 6 Lo Fi wireframes each (that’s a total of 18 Lo Fi wireframes). This is an important step because there are likely many ways to visualize each idea and by designing 6 rough wires you’ll have to be creative and challenge your immediate assumptions.

Choose one

Was your 5th wire surprisingly clever? Use it! Choose a direction for each pain point and start to refine it.

Refine in Sketch

If I’m going to be testing the design with users I prefer to go digital as soon as possible with the design. At this point, translate your design into a digital format with Sketch. Download and learn the basics here. It’s very similar to Adobe Illustrator and easy to use.

The wires map directly to the new task flow created during ideation.

2.6 — (in)Validate

Intro to validating / invalidating quickly and why. Depending on what kind of solution you’re creating, you might find you don’t even need to create a prototype to validate or invalidate an approach. For example, if you’re creating a new app that let’s people buy clothes they see in-person by taking photos of people wearing them; ask people to take photos of random strangers that have clothes they would want to buy. If enough people don’t want to do it, congratulations, you just invalidated an assumption. You could do that before you even start Lo Fi wireframes.

You should always look for opportunities to validate or invalidate any assumptions before doing unnecessary design work.


Use Marvel or inVision to create a clickable / tappable prototype. Making your wireframes interactive is a great way to see how people understand your design. Import all the wireframes into the prototype and highlight hot spots that allow people to move from screen to screen.

Plan, recruit, test, repeat?

Refer to original test prompt and refine if needed. What do you want to learn from your new design?

2.7 — Hi Fi wireframes

High fidelity wireframes (aka mocks, comps) are pixel perfect representations of a screen. Once you have a good idea of what the wireframe should be — you can start to polish it. Things to consider when you’re making pixel perfect mocks:

Visual Design

To sum up Visual Design in a paragraph would be silly so I’ll just give a brief synopsis of what you should research and pay attention to while you’re refining your project. Pay attention to use of color, typography, and visual hierarchy. When designing for an existing app you can pay attention to the brand and see if a style guide exists for your reference.

Dig into current trends and see what’s happening using references I mentioned in my previous post. Do a little background research and learn about skewmorphism and flat design.

2.8 — Repeat

For your first few times redesigning a feature I would just end here and record your process in a portfolio piece. But as you continue to grow as a designer I would repeat and refine again and again to increase the sophistication of your design.

3. Prompts

Many products have public style guides to help people design within their brand. It’s important to first learn how to walk the line between adhering to standards and being original. While you’re redesigning an existing feature or designing a new one use these style guides and products as resources:

  • Facebook
  • Twitter
  • LinkedIn
  • Yelp
  • Pinterest
  • Spotify
  • Slack
  • Kickstarter
  • AirBnB
  • Instagram

That’s it! This is your new life. At first you should follow this very rigid process, but you’ll eventually begin to see how you can make it better. Once that happens: refine your process, do things differently, experiment with everything.