UX/UI Case study : Sango App

Sango is an app that gives you recipe ideas and help you create and organise shopping lists tailored to your diet.

Role: Brand identity – Web & App design – UI/UX

Tool used: Figma, Illustrator

My role

I was the UI/UX designer for Sango, working alongside the developper.
The task would be divided into 4 steps, that I would realised using the design thinking approach. 

1. Verify if there is a real need for this app (and if not, find new features)
2. Find ideas to transform the need into a product
3. Create prototype to test my ideas
4. Use everything to create the final project

This project required a deep UX understanding due to its portability. I’ve focused a lot of effort on the effectiveness and efficiency of the design to ensure its accessibility and impact.

The challenge

The goal was to create an app that has a why and was the solution to a problem.
The importance of the UX design is that it is an user centred method. You can create a pretty visual. But does it takes you where you want to be? Is it adapted to your target, easy to use? Will it produce the result you want, business wise? That is why UX is so important, because it takes everything into account. And the first step to get there is to do your research and empathise with the user. You can form hypothesis and work with them at first, but you really need to focus on understanding the user all the way.

So our hypothesis was : People have trouble to find ideas for their meal and organise their week. They need an easy tool to help them pick recipes and make their shopping trip easier. People wants to get healthier and would love to be aware of their nutritional intake. They also want to have the choice to Taylor their diet. Indeed, more and more people try to stay away from meat, have allergy, wants to try keto, and so on.

The big question is to figure out if the user is going to be interested in this app, and more importantly, how can I make it so it really helped them in their day to day live. How can I make Sango a great app.  It should be a win win situation. Win for the company as they get to finish the product, but mostly win for the user, that found a solution to a problem he had. In this case on the nutrition and meal planning side.

The brand

Sango has two purposes : make your life easier and help you eat healthy.

The big goal of the app is to help people get healthier in an easy way. In a world of constant hustle, people often don’t have time to take care of themselve. They go to the gym but tend to not spend as much effort with food. When they finally get to the confort of their home after a long day, the last thing they want to do is take care of the food shopping.

Sango allows you to tailor your diet and select your meals from a wide list of quality recipes handpicked by us. Sango also create a shopping list based on the recipes you have chosen and the number of people in your party and everything is done with a couple clicks.

UX Research

Design process

Research

The first step to understanding the user was to realise an extensive research. I started by making research online to understand the market better.

For the first phase of the research, Sango is an app about nutrition so there is a lot of ressources out there about this specifics subject.
I made a lot of research and analysis which help me to make assumption about the user, that I will be able to test on the next phases.

Here is some facts I learned about this subject :

Competitive audit

everything like the usability of the app, how they implemented universal design, etc.
The point was also to see what they thought of that we could have missed, as well as picked out what we consider a mistake.

I quickly realised there is a lot of concurrency for a recipe app :
– Meal preps / chefs apps (Wecook, bigOven, …)
– Fitness apps (weight watchers, myfitnesspall,…)
– Shopping apps (amazon fresh, grocery store)
– Meal kit apps (hellofresh, gousto)
– Delivery apps (deliveroo, ubereats)

That gave me some thought. The market is there, and there is a real need for an app like sango. However there is a lot of concurrency and we should find a way to make tango stand out.

Interviews

To brainstorm problems and solutions as well as identifing potential features I conducted an interview with 5 people from our target audience.I found a facebook group with nutrition enthusiast from Bruxelles and I messaged the group to ask if some people would be interested in participating in an interview about nutrition.
I then meet my 5 interviewee which were kind enough to accompagned me during all the process, as I kept contact with them trough email during the rest of the project.
I made sure to do this interview in a neutral environment as to not influenced in anyway the user. The interview took place at the university of Brussels where I used one of their meeting room. It was perfect as the interviewee didn’t feel obliged to be nice towards the project because it took place in a neutral environment.
We met and discuss the issue. The goal of this interview was to determine the wants and need that the target group have within their food habbits.
Talking with the target audience is great because it help you really really understand and pinpoint the different issue of potential user. They can told you about issue they have that would never have crossed your mind without this back and forth of idea flying from different minds.I made sure to only ask open questions so they would be able to elaborate their answers.​​​​​​​

Defining the needs of users

Everything done before helped defining key features for the app:
– Recipes suggestions according to your past choice
– Be able to transform the recipe into a shopping list
– Making it possible to share that shopping list with others
– Taylor the diet
– Suppress ingredient you are allergic to or don’t want to eat
– Chose recipe according to diet restriction
– Easy to navigate between the recipe and the shopping list
– A calendar to organise the recipe day by day
– Recipe page with a lot of information (time, nutritional informations)
– Review system for the user to be reassured by other past user
– An easy way to adapt the number of people for your recipe

User personas

The researches and interviews provided results that made it possible to create user personas with sufficient informations. The results show me that there would be different type of user and their particular need. I created 3 personas  made up thanks to the data I gather trhough the past phases.
Personas are a great way to simplify datas and make the big load of information from the research easy to digest. 
It help make a little summary of things such as customer pain points, habits and so on.
I made sure to present this persona to the rest of the team as well as the data used to create them. It is always a great idea to confront the user personas to the rest of your team as you can brainstorm together and add or delete certain details about them. In the ux process I think a good feedback loop process is great because it really helps you to always confront the decision you made. Never stand your ground, always keep questioning the project. That is what iteration is all about.

User journey

Userflows for each personas helped us identify key actions within the app to focus on first. It is also a great way to visualise the user using the product in real life situation and stay on track of the UX, and consequently working on making it the more efficient and convenient possible.​​​​​​​

Exemple with Maria Mum
Context : She is in her kitchen wondering what is she gonna cook these upcoming days for the all family.
Perturbation during process : At the end of the process, a kid come and change nb of person present for tonight’s dinner and want something else for tomorrow’s lunch.

App map

In order to see the whole quantity of screens needed and think ahead, I created an app map using everything done before.

App design

Low fi prototypes

With the help of the app map, I had a list of screens to cover all the pages we need. I then sketched all the different designs, and confronted them to our interview group and stakeholders to get feedback.

Example of ideation following feedbacks

“I would love to be able to chose filter recipes by cooking time, as it is a big factor for me. I hate picking a recipe and realising it takes more than 1 hour to make”

Style guide

To reflect the positive, upbeat and accessibility of the brand I used natural and optimistic colors, paired with playful shapes and simple illustrations.

Final prototypes

Webdesign

Thank you for reading

More projects