How to reinvent the experience of cooking Chinas main food?
CLIENT Supor
ROLE UX/UI
SOFTWARE Sketch, Miro
DURATION October 2019 – January 2020
Project designed at Blank Group.
Context / Brief
Supor is a part of Groupe Seb whose the current world leader in small domestic appliances and cookware industry. Supor itself is the leader in the cookware and electric kitchen appliances industries in China.
Blank worked several times alongside Supor, for projects going from a pressure cooker to an innovative lunchbox.
Last year Blank created a concept of rice cooker for them. The whole idea of the product was that it worked like a Nespresso coffee machine, with capsules. The user would load the cooker with up to 6 rice capsules and launch one or multiple portions of rice from the machine or an app.
My work began on said app. We needed a product that could control the machine and launch rice from afar but with something more.
As my boss said: “we need something innovative BUT not useless“.
Research
At Blank, the principle is “Start design with why” to clearly understand our potential users would need this app. We should know what the users goals are like and how they achieve them. The wrong way would be to ask directly what they need, the right way is to observe and ask what goals they are trying to achieve.
So I started to interview my Chinese coworkers and friends to ask them a little about their habits in term of cooking at home.
It turns out that students and overall young Chinese people work long hours and sometime eat at their working place. And on the times they’re actually at home for diner time they’re often too tired to think too hard about what to cook and then cook it.
I remember one of my coworker saying to me that he bought a huge bag of rice a while ago and that he was having a hard time finishing it because he was hardly cooking.
Some of them had a rice cooker linked to an app but it was almost useless since what you could do on the app you could do on the actual machine. The only plus side was being able to launch rice without moving from your couch.
Overall the results were that:
1 – People were often too tired to cook, so diner was often take out or delivery.
2 – They were either people who didn’t know what to cook, and those who were planning their weekly meals
3 – 3 main ways to make up their mind on what co cook: well known recipes, internet, or improvising with whatever is in the fridge.
It was clear that an app with a few more fun and useful features was needed. Something that would help and encourage users to spend a little time cooking.
From the data I gathered I established the main kind of users we decided to focus on.
I teamed up with 2 of my coworkers, an industrial designer and a service designer. In order to work in an efficient and collaborative way, we used the software Miro. It allowed us to work together at the same time and see what everyone was coming up with.
We started to research the overall competition in China and what kind of rice cookers they were. All of them were quite standard and had for only difference the quality/price range. No notable innovation factor, so there was definitely room for improvement.
We then took interest in Chinese people attitude and habits towards rice consumption. As expected, it’s the main food, being nearly 60% of people daily food.
Something that I absolutely didn’t know also was that white rice as we eat it is not that healthy. It contains a lot of sugar. So health was also something that we could focus on.
Through HMW questions, myself and my service design coworker tried to ask ourselves the right questions to determine the features of the app.
With the answers of the HMW questions we started to think about the Unique Value Proposition. We wanted to differentiate ourselves from the competition by offering a new way to appreciate rice.
First of all a healthier way by proposing a clean and safe rice from a good origin. But mostly offering a whole service through the app that goes beyond the simple rice cooking. Indeed through the interviews we learned that cookers app weren’t that famous because they weren’t offering enough. We needed a reason for the user to be on the app and to actually come back on it, make it a part of his routine.
In the end we settled on these features as listed below.
The diet plan and the recipes goes together. It’s part of the “community” side of the app which is split in 3. The home page, the first that the user will see is the screen where he will be able to adjust the settings and cook his rice. The community side with recipes and the user diet plan, and an in app store.
The community is the service side of the app. The user will be able to create for himself a unique and personalized experience according to himself and his tastes.
UX & Prototyping
We decided to go with the process for the prototyping part, userflow then low-fi prototype, then wireframes and finally hi-fi prototype. It was important in my opinion because as a european UX designer I was used to design product for a certain crowd that was used to a certain type of UX. This app was the first one that I designed for the Chinese people, different country different habits in terms of app navigation. Every prototyping phase was checked and approved by my Chinese coworkers to make sure that everything was crystal clear.
This project being a case study, I didn’t have to prototype the app entirely. So I focused on scenarios showcasing the features being:
1 – Cooking rice
2 – Scanning the rice pack to discover its origin
3 – Recipes
4 – Diet plan
5 – Shop
The navigation of the user has to be simple. For the main use of the app being cooking rice, if the user wants it for now he has to be 2 click away from fresh rice.
The app is separated in two sides, the first being the practical one where you cook your rice and the second being the community side, where you’ll find recipes and your diet.
I had the idea to have 3 different ways to follow a recipe, kind of like 3 levels of difficulty. The first being a simple text recipe, the second a video, and the third an interactive one. By interactive I mean something controlled by voice command that would tell you when to do what to achieve the recipe successfully.
Every iteration in the prototype phase saw improvement. After submitting my work to my coworkers during brainstorming sessions, we talked about what was working well and what wasn’t working.
After user testing on my coworkers I moved on to low-fi prototypes.
I created a low-fi prototype to test my design ideas with my coworkers. It’s a great tool to test the app navigation and workflow, create a rough layout and quickly test your ideas.
By seeing the actual flow of cooking rice later with an appointment I realized that having a whole new page was too time wasting. Same with the way you follow recipes that was too confusing.
At this time, there was a lot of question about the in-app store. A lot of big brands in China don’t actually have an official online store. Instead they have all their products on Taobao or Tmall (Taobao is the biggest marketplace in China, Tmall is the same but fancier). So do we really need one? If we do does it have its own icon in the tab bar? Or in the community side?
Many things we brainstormed about and improved in the next iteration being wireframes.
The cooking rice later was again improved on this phase, a given user would just have to click on appointment, set a time and validate. The machine would then launch itself.
Something important that we wanted to add was the rice origin feature. As a token of quality and health we thought that our user could verify the origin of the rice he just bought and learn a bit about the region.
To do so the user just have to scan the QR code on the rice packaging (Everything work through QR codes in China) and that would land him on a page with some informations about the provenance of what he just bought.
Furthermore he will have the option to directly launch the machine with suitable settings for this specific kind of rice, just like it should be enjoyed. If he prefers to have it his way he can just go back to the home page and set it himself.
It was decided that the shop would have its own icon in the tab bar to sequence everything properly. The community space is dedicated to the recipes and the diet plan of the user.
The first idea concerning recipes was having 3 different ways to follow them. It was far more too complicated, so we decided to actually merge all 3 together. Once you click on a recipe you’ll have a quick recap video of the meal, by scrolling down you’ll begin the tutorial. After a detail of the ingredients you can either swipe through the steps of say “Next” or “Back”. Each step will be presented with a text and a quick video of what you have to do.
Alongside the recipes the user will be able to create himself a diet plan. Directly linked to his favorite recipes he will be able to plan all his meals for the week.
A few things got improved on the next and last phase being the Hi-fi prototype.
High fidelity prototype
In term of identity we chose to respect Supor overall color scheme. White, light greys, orange and a bright orange gradient for important CTAs.
The main difference between the wireframe phase and this one is in the home page. Where on the top of the screen there was an indicator for pods in the cooker, we changed it to a view of your daily diet. It is way more practical to have say a modal indicating that there is no pods in the machine, and keep space on screen for something more important. Like in this case the diet which link the home page with the community side of the app.
As explained earlier that recipe mode allowed the user to follow an interactive recipe. The app will tell him what to do and when, and most importantly it works in harmony with the rice cooker and tells you when to launch rice on it.
The user will have the choice to post his freshly made meal on the main Chinese social medias.
Since I’m not (yet) a Chinese speaker, I obviously had to design the whole thing in English. But once it was all done I worked with my coworkers to translate everything to finally have a glance at the end product. Even though the english version would be available the Chinese one would be the most used one.
And I had a bit of time left so I made a dark mode. Mostly because I love dark modes.
Final result
In the end, it was the first Chinese project that I’ve worked on, and it was very fun.
I learned a lot in terms of well, everything.
First of all I was pretty independent on the whole thing. Not independent like working alone from start to finish. More like it was up to me to reach out to my coworkers for brainstorming sessions or overall meetings, to make the project go forward. Being the first internship of my master degree and as a Junior UX Designer it was a really empowering and rewarding experience.
Then it was so interesting to design an app for a different population than the one you’re used to. What seems to be obvious and the best option to you can be just plain stupid for them. Different country, different people, different habits. It’s a really humbling experience to take a step back and pay attention to how they do things, just noticing all the differences with what you know. At first it leads to a massive culture shock, but quite quickly you grow accustomed to everything and it becomes pretty amazing.