[DESIGN FOCUS] Prototype #4
Virtual try-on for make-up: how we came up with the right design?
We approached this prototype with a Design Thinking session: that’s why we’ll take the chance to explain how we generally apply Design Thinking to build digital products at Uqido, either for internal ideas or clients’ projects.
Goals
The challenge here is huge: how to adopt the right Desing Thinking tools to build a functional prototype in only 5 days?
Let’s start from the definition of Design Thinking shared by IDEO, one of the most important design firms in the world, so we can all understand how to use this powerful and mysterious approach.
“Design thinking is a human-centred approach to innovation that draws from the designer’s toolkit to integrate the needs of people, the possibilities of technology, and the requirements for business success.”
—TIM BROWN, EXECUTIVE CHAIR OF IDEO
Why Design Thinking?
Have you ever approached a problem without being sure how to solve it?
Or maybe you’re sure you found the right solution and then you realised it was the wrong choice?
Now, let’s try to create a contest to those questions and imagine you’re working in a project where time is very limited, it’s a daily race round the clock. Every decision you’re going to make should be based on one need, one motivation, one meaning or data. Applying Design Thinking helped us to use a clearer process.
Defining a series of sequenced activities which put at the centre the problem, we have been able to discuss the assumptions, verify the hypothesis and come up with an efficient solution which we have validated with some user testing.
How to organise the design process?
Following the other prototypes, even for this week, the goal was to create a solution in a very short amount of time. We had to create an interface for the developers as they needed it to create the MVP, so the design team had even less time than the previous weeks.
So here the steps we have adopted to reach a result in the shortest time ever.
There are 5 steps, which are the classical Design Thinking moments:
Empathise – the first step, the team empathise, learn and gets closer to the users
Define – in this step the team defines users’ needs and their problems. This is a very important step as the problems need to be transformed into opportunities.
Ideate – starting to generating ideas and solutions challenging initial and personal assumptions
Prototype – the best idea responding to the problem is being identified and we can start developing a prototype to build solutions
Test – the last step where we challenge different solutions testing them with the final users
The Design Process
Translating this flow of activities, here the tasks that the design team has worked on this week:
User Research
User flow
Moodboard (ricerca visiva)
Mockup + Prototipo
User Testing
Here below how the team approached each task.
User Research
In the first step, we have started with the users’ research, doing some phone interview on a sample of 15 people of different ages. The goal was to collect information on their approach to buying make-up and their experience and open mind approach towards a Virtual Try-On app.
Then the results have been organised in specific files summing up each person, useful to define the users’ flow based on their real needs.
Specifically, it’s interesting understanding that from the user research we can group the interviewers in two types of users:
People really expert and informed, ready to make a decision to buy a specific make-up even if they can’t try it on the skin
People less interested, who wouldn’t be able to make a decision without trying the make-up on the skin several times
User flow
In this step is important defining the users’ flow in order to provide a flawless and effective experience for the Minimum viable product.
As in the past week, we have used flowmapp to create and define the user flow. From the research phase and from the tech team we agreed to use a lipstick from a specific beauty brand.
Moodboard
Passing on to the visualisation stage, we have tested multiple Virtual Try-On apps in the market to value their weaknesses and strengths. Then, we have collected all the most interesting ones on a moodboard dashboard, adding a colour palette light and neutral to not get in contrast with the lipstick colours. We have then chosen a Font (TT Norms) with a feeling simple and geometric, giving good readability. In this way, we have been able to conduct a “visual brainstorming” which has helped us to explore all the possible options and ideas.
Mockup + Prototype
With all those elements we’ve passed to the prototype. Using Sketch and InVision we have developed the mockups, the graphic representation of our user interface, focusing on the lips. For every corner of the face, we have designed some icons which they initially serve to recognise the face and they will help the user for the rest of the experience, allowing the choice of the different type of lipsticks, colors, mate trying out.
User Testing
The final step has been to validate the design with a selected amount of peoople.
The goal of the User Testing is to define the details and understand if there’s something not very clear from a user perspective to iterate the design and fix the problem before the final development of the app.
Conclusion
Here is the design process for the prototype #5.
If Design is a branch that helps to solve a problem, Design Thinking is an approach to identify the solution to the problem we’re facing, putting users and their needs at the centre of it.
Applying this methodology composed by 5 steps has helped us to focus on the needs and to create solutions easily becoming practical and verified thanks to continuous future iterations.