A detailed guide to the product design process

A detailed guide to the product design process

A few years ago, product design meant designing a physical thing — like a washing machine or a running shoe. Now, it’s expanded to mean digital products — primarily websites and apps.

Product design has a huge effect on your business. If your product doesn’t do what it’s supposed to do, you have no business because people won’t use it. Whether you’re designing a washing machine or a website, the same principle applies.

If your app or website doesn’t work, isn’t fun to use — or even if it’s OK but not better than other options, users will head elsewhere. That means fewer clicks, fewer users, and ultimately, a useless product.

The product design process is all about making your site as fine-tuned to the user’s needs as possible. It’s an approach that puts the user at the center of everything. When it’s done well, it gives you an edge over the competition. Let’s take a closer look at the process in-depth, starting with a definition.

What is product design?

According to Interaction Design Foundation, product design is a “process designers use to blend user needs with business goals to help brands make consistently successful products.”

It begins with designers identifying a market opportunity. Next, they define the problem, then the solution — all while keeping the user’s needs in mind.

Finally, once the product has been developed, it’s tested by real users and improved according to their feedback. This is all based around something called design thinking. Design thinking is a five-step process designed to fine-tune the product so the user has the best experience possible.

What is design thinking?

Design thinking is a human-centric creative process that involves the team putting themselves in their users’ shoes, then asking the question ‘how can I solve this problem?’ There are five key stages to this process.

Image Source

  1. Empathize
    This is where it all begins. First, you put yourself in your user’s shoes by learning as much about them as you can.
  2. Define
    Next, take those user insights and use them to define a need from their perspective.
  3. Ideate
    Come up with as many solutions as possible. The freer and more creative you can be during this stage, the better.
  4. Prototype
    Test out your solution with a prototype. This pared-back version is quicker and cheaper to create and will give you early insight into how well it answers your users’ needs. This stage also often sparks new ideas.
  5. Test
    Ask your users for feedback. Then based on what they say, repeat stages 3-5 until your product is perfected.

Next step: the design process

Once you’ve got your head around design thinking, it’s time to start with the design process.

It usually consists of 7 steps. Keep in mind that every project is different, and these steps don’t have to be the law, but having this structure in mind will help guide you to the finish line on time, with the minimum of fuss.

1. Define your product vision

Before you even think about picking up a pen, you need to define your vision. By this, we mean you need to know its reason for existing, and this needs to be clear as water. It also needs to be defined simply, in a way that everyone understands.

There’s a famous Japanese proverb: “Vision without action is a daydream. Action without vision is a nightmare.” We’ve all worked on a project where no one really knows quite what’s going on, and the culprit is usually a lack of vision.

The vision needs to be a distilled explanation of why the product needs to be made. It should tell you exactly what your product is, but also what it won’t be.

Here are three questions to help you work this out.

  1. What is the problem we need to solve?
  2. Who has this problem?
  3. What do we want to achieve?

Once you’ve worked out your product’s reason for existing, the team needs to define a strategy. That’s the route toward the produt’s final destination — or in other words, the moment it’s in your user’s hands. Here’s a summary to help you remember the difference:

Vision: Why are we doing this?

Strategy: How are we doing this?

2. Put some time into product research

Next stop: research. When it comes to this stage, the more you put in, the more you get out — so don’t trim corners when it comes to putting time in the schedule.

Doing thorough research not only helps you create a product that is better suited to your user’s needs, but it also helps you get buy-in from stakeholders and investors. If you can demonstrate that there’s a gap in the market and your product can answer that call, then you’ll find it much easier to get support.

1. User research

To design a really useful product, you need to really understand what it is your user wants. And to do this, you need to talk to them — either via interviews (online, face-to-face, or over the phone) or via online surveys. Ideally, you’ll do both, but where time and budget are tight, online surveys reach a wider audience and cost less.

Top tip: to get the best answers, you need to ask the right questions. Short, open-ended questions are best.

2. Market research

If you want to stand out from the crowd, you need to know what the crowd is doing — and that starts with thorough research.

There are two types of competitors you need to keep in mind: direct competitors and indirect competitors.

  • Direct competitors
    These are the ones that directly compete against you — so they offer pretty much the same product and value proposition. Think McDonald’s vs. Burger King.
  • Indirect competitors
    These are competitors who don’t have the exact same value proposition as you, but some of their offerings would appeal to your customers. For example, ASOS (which sells clothes and skincare products) vss Sephora (which sells exclusively skincare).

When doing your market research, it helps display your data visually. A competitor map (pictured below) can help you see at a glance where your product fits and who your nearest competitors are.

Image Source

3. User analysis

Next, it’s time to make sense of that data. The aim is to turn all those numbers and facts into something that feels like a real person. This stage helps the UX designers create something the user wants or needs.

User personas

First, the UX designers will create user personas. These are fictional characters that represent the archetypal person of a specific group. Doing this helps keep the user’s goals and needs in mind during specific scenarios.

Let’s say, for example, the user persona is called Josh — designers can ask themselves—is this something Josh would do? Or would Josh enjoy that? It makes the process feel a bit more realistic and personal.

A typical example of a user persona includes their job, preferred brands, personality traits, and goals (Image Source )

Top tip: avoid using real names — including celebrity names or fictional characters. This can color your view and distract you from the real data.

Empathy map

An empathy map will show you what the user thinks, hears, says, and feels. It’s useful for giving you greater insight into why a user needs or wants a certain thing. Its purpose is to help the designers see the world through their users’ eyes and create according to that, rather than simply creating the thing they want to make.

An example of an empathy map (Source)

4. Ideation time

This is when the fun really starts. All the designers working on the project gather together and concept as many creative solutions to the users’ needs as they can. You can conduct this brainstorming either in-person or online if your team is remote. There are lots of different techniques for generating ideas — from sketching wireframes to storyboarding interactions.

Make a user journey map

User journey maps (or customer journey maps) visualize the user’s processes to reach their goal.

They can be straightforward and linear, or complex with multiple options branching out from each decision. When looking at each stage, you should keep their wants, emotions, and needs in mind. Here are some questions to ask yourself:

  • Objectives: Wwhat does the user want right now?
  • Questions: What do they need to know?
  • Behaviors: How are they interacting with the site/app at this point?
  • Emotions: How are they feeling?
  • Weaknesses and strengths: How has the product helped the user or let them down?
  • Influences: What will shape their decision at this stage?

Sketch some storyboards

Make your user personas the star of their own story with a storyboard. With panels and scenarios involving the user interacting with the product, your end results will look a bit like a comic book page. It helps the team see the world through their user’s eyes.

Create your user stories

User stories focus on needs, and are written in a way that’s relatable for the user. It’s written from a first-person perspective (I need, I want…).

It should be written in simple language and kept short. It’s a good idea to use index cards here: If there’s not much space to write, you’re forced to give a snappy overview in two or three sentences.

Generate structure ideas

The ideation stage includes coming up with rough structure ideas. These are initial sketches of what the finished thing might look like.

Wireframes

A wireframe is pared-back, visual representation of a website or app’s page layout. They’re helpful for designers and just as useful for helping non-designer folk (managers, stakeholders, and copywriters) to picture the interface.

Wireframes can be created with diagramming software , they can be sketched by hand, or a combination of the two.

Sketching by hand is ideal for getting those ideas onto paper quickly, but when it comes to sharing with the wider team, a digital, cloud-based diagram is best (especially if you have messy handwriting).

5. Time to design

The design team knows what they need to build — and now it’s time to get to work.

Rapid prototyping / creating a Minimum Viable Product (MVP)

A prototype, or MVP (essentially the same thing), is a bare-bones version of the product. It has just enough features for the user to interact with it so designers can get really early feedback before too much time and money has been sunk into the project.

It also allows the team to learn more about the user’s needs in quick iterations — while the designers and developers can focus on just a few features at a time.

Design handoff

After prototyping, the design is ready to be released to the developers for its final iteration. The designer will explain in minute detail exactly what needs to be done.

6. Testing and validation

The testing stage helps the team make sure the site or app works as it should. If it’s done correctly, it should shine a light on areas you’ve missed or reveal interesting results. So don’t kick yourself if you find problems — these will help you make your product better.

Eating your own dog food

‘Dogfooding’ as it’s also known, is a stage where the designs try out their own product. This helps them put themselves in the user’s shoes.

Usability testing

Usability testing is one way to make sure the website or app you create works as it should. If you only have the time or budget to do one type of test, make it this one. Why? It’s quick, relatively cheap, and straightforward.

You find someone to sit down with an interactive version of your product, ask them to complete a task, and take notes. The aim here is to learn about what works and what doesn’t. You can do this informally, using people from within the organization or asking unsuspecting members of the public to play around with the app or site. Or you can conduct the reasearch more formally, with researchers hiring testers and putting them in a lab.

7. Post-launch

The fun doesn’t stop once the product’s been released into the wild. Monitoring, data collection, and improvement are ongoing processes that help ensure your site or app is functioning flawlessly.

Monitor the way people are using their product. Analytics tools can help give you data that can then show you where there’s room for improvement. For example, you can see that there’s a problem if lots of users leave the site at a certain juncture.

You can also ask for user feedback or run some A/B tests to help you work out how users are interacting with your app/site and gather feedback to see what’s working and where there’s room for improvement.

The design process isn’t linear, nor is there a single right way to do it. The most important thing is to remember to design for the user. Every feature should be useful to them — if you can do that, then you’re well on the way to solving their problem and making their life that little bit easier.

Georgina Guthrie Georgina is a displaced Brit currently working in France as a freelance copywriter. Before moving to sunnier climates, she worked as a B2B agency writer in Bristol, England, which is also where she was born. In her spare time, she enjoys old films and cooking (badly).