Digital product design process

Stanford design process

In this article I would like to share the process that I followed to create a digital product, well, a prototype of a potential product :)

How it all started?

Since I became a father I have been struggling with cooking, all I wanted was providing my kids with a healthy and balanced diet, introduce them into the good habits, make sure that they grow healthy and also that they enjoy food.

When both parents work full time, this becomes very difficult.

I decided to create a product that will help people with the cooking, didn’t know what exactly yet, but I wanted to improve the cooking experience some how.

Step 1. Need-finding

The first thing that I did was observing people while cooking, I wanted to see them in their natural environment, talk to them about their cooking habits and experiences.

Before the observations I created a list of requirements, something that would help me narrowing the type of people that I would like to interview, and a observation plan so that I could get the most of each session.

Once I found 3 different people matching my requirements I arranged 20 minute session with them while cooking.

During the sessions I took some pictures and notes that allowed me to analyse the data.

The result of these observations was amazing, I got lots of information that I documented in a structured way.

Participants pictures while cooking

At the end of the observation I created a summary of each session and a list of breakdowns.

Observing people can be intimidating at first, but the amount of valuable information that you get from it is priceless.

Step 2. Define

Any design has a purpose and it will solve a problem or need, so to start my ideation process the first thing that I did was creating a list of users needs.

List of users needs

After observing my users I obtained a lot of information, so I created a list of needs and then I refined and narrowed that list until I got 15 user needs

Develop a point of View

From the users needs list I picked up the ones that I believed could be more important and I based on those I developed my point of view.

The point of view will support your project and it should help you keeping it aligned with the users needs.

POV
My point of view is that people who cook at home will need, at some point, help finding recipes, help with the shopping or help with the cooking process. And If I manage to support them on any of those three areas I will improve their cooking experience forever.

Step 3. Ideation

Inspiration board

Internet is full of information and it can save you a lot of time by going through others work. Someone said something that states like this:

One day in the library can save one year in the field.

I researched the internet for products that could inspire my project and I created an inspiration board to get inspired by other projects.

inspiration board for my project

I went through different ideation techniques to refine my ideas. The objective was to select one idea that, based on different criteria, I believed had better options of succeed.

First I listed all ideas I could, then I choose those that I believed will have better acceptance in the market, I took out those that technically were too complicated, then I iterated on some of them until I got one that I believed, following the process, was the best:

If I can create a system that controls your food stock, I will be able to create multiple features that will help you cooking. Features such as recipe inspiration based on the products that you have at home, a shopping list based on what you currently have and what you normally have at home, statistics about what you eat, etc…

3 Prototyping

Before getting my hands on the computer I created different storyboards of a particular situation where my app would be helpful. The purpose of it was to empathise with the potential users. And here is another phrase that I really like:

walk in someone else’s shoes

Storyboarding

Quickly I sketched 4, 5 steps of one user journey highlighting the goals, pains and gains of my potential users.

Two different storyboards to visualise potential users goals, pains and gains

Paper prototype

Paper prototyping is a quick and cheap way of testing your design ideas, I decided to create two different prototypes with two different designs for the same user journey and test both versions with users.

Paper prototype 1
Paper prototype 2

Heuristic evaluation

To improve those prototypes I decided to observe different people interacting with them as if they were using a real product.

I used the 10 Heuristics by Jacob Nielsen and captured all the heuristic violations that I discovered.

User interacting with one of the paper prototypes

List of potential improvements

Once I captured all heuristics violations that I found I created a list of potential improvements. That helped me focusing on the parts of the prototype I had to redesign.

Wire framing of the paper prototype

At this point was when I started using the computer. I created a unified version of the paper prototypes into a digital format, leveraging all the gathered knowledge so far.

First draft version of my prototype

4. Testing

Project planning

Is extremely helpful to plan your project in advance. My plan wasn’t rigid, it was more like a guide that I kept modelling through the project and that helped me framing the time and the scope of my project.

Interactive prototype

In order to get the most of my testing, I created an interactive prototype that will allow users to interact with it as if it was the final product.

Testing script

Is very important to have a goal and a structured questionnaire so you can get the most of you testing. I created a testing plan and protocol to make sure I will gather the right information.

Testing with users

This is where the real fun started, observing people interacting with your product is what makes the different in product design.

User testing key moments

Compiling testing results

Before taking any decision I compiled the results of the testing and created a list of potential improvements.

Create a B version based on feedback

Having an alternative version is a very useful technique in design, it allows you to compare two different versions, validate which design performs better and improve your product based on the results.

After the previous testing I created a B version with very small variances with the intention to compare it against the previous solution.

A/B testing

I have never used an online testing tool, this was my first experience and it was really surprising, I could never imagine how easy and quick is to get valuable insights on your product.

Capture of the remote user testing tool

A/B testing compilation

Testing is, in my opinion, the easiest part. Later you will need to analyse the results and take design decisions based on it, this is a very important step in the design process that will lead you to a refined version of your prototype and probably, will go into development and become a product in the future.

Design iteration to produce a prototype based on findings

Based on the previous step I created a prototype that I hope, it will become a product one day.

You can see the latest version of my prototype: https://invis.io/39B42DR7X

Some screenshots:

App dashboard
App screen