SmartSip App
The easiest way to limit consumption of sugary beverages
Time:
4 months
4 months
Team:
UX Designer
UX Designer
Tools:
Outcome:
- Cleared the problem statement
- Found solution
- High fidelity mockup
- Prototype
- 2 rounds of usability testing
UX research
Interview
Persona
Wireframes
High fidelity mockup
Prototype
Usability testing
In this project I wanted to explore the problem of unhealthy eating and try to find a solution for improving it.
After conduct the secondary research I narrowed down the problem.
After conduct the secondary research I narrowed down the problem.
Recent studies show that people drink too much sugar sweetened beverages because of the lack of knowledge about negative effects of sugary beverages. Also according to studies SSB intake is linked to bad eating habits.
Problem
My goal was to create an app which will educate people about negative effects of sugary beverages and will help to reduce the sugary beverages consumption.
Solution
How did I come to this solution?
Interview questions
1
Why do people drink sugary beverages often?
2
What do they know about negative effects of sugary beverages?
3
How do they educate themselves about healthy eating/sugary beverages?
4
If they tried to quit drinking sugary beverages, what was the hardest part?
Findings from the interview
To synthesize research (interview) I used affinity maps, empathy maps, personas and problem statement. It helped me to better understand users and to identify their pain points.
I identified 2 personas based on insights from affinity maps.
Empathy map for persona #1
Empathy map for persona #2
How might we help people create a supporting environment around themselves when they are among other people?
Problem statement
Based on the problem statement I have identified 2 main purposes for this app:
- educating users about negative effects of sugary beverages;
- setting a goal to reduce the consumption of sugary beverages;
Main features of SmartSip app
Discover page with helpful articles
Users can set a goal
Users can track their progress
Users can reflect on the result
Users receive daily reminders and tips to stay on track
Community section
Usability test outcome
After registering on the app users arrive on this Discover page.
Problem
It was not clear where to start, and how to set a goal. CTA button was clear. However it was not clear how to write a goal.
It was not clear where to start, and how to set a goal. CTA button was clear. However it was not clear how to write a goal.
Solution
I made bigger and visible “How to get started”.
During the second round testing there was no problem with it.
I made bigger and visible “How to get started”.
During the second round testing there was no problem with it.
Before
After
Set a goal flow
Setting a goal is a powerful motivator for behavior change.
To help user to stick to their goal app will sends reminders/notifications with tips like, “sugary beverages are everywhere, pack your favorite non sugary beverages prior leaving the house, so you won’t slip of the track” or other messages helping users to stick to their goal.
Challenge
How to help users to achieve their goal?
How to help users to achieve their goal?
- During the testing it made sense for participants why do they need to turn on reminders and everyone added reminders.
Onboarding process
So I decided to give some facts, general information about negative effects of sugary beverages and about benefits of quitting sugary beverages in simple language when users open the app for the first time.
And there is a question “Do you want to achieve such results?” before “Get started”.
And there is a question “Do you want to achieve such results?” before “Get started”.
Challenge
One of the problems was to find a way how to make it so that users would want to learn about sugary beverages effect on health.
One of the problems was to find a way how to make it so that users would want to learn about sugary beverages effect on health.
Home page
As a result I changed progress bar and the “Add a new goal” button.
Before
After
Challenge
- On a home page progress bar was not clear for participants.
- CTA button was confusing, some participants thought if they need to add a new gaol.
Journal page
Users track their everyday progress in a journal after setting a goal.
Before
After
Challenge
- On Journal page the dots on a first design were confusing, many participants tried to press it to track their progress.
- It was not clear how to track the everyday progress.
I rearranged components on the page and changed the progress bar.
Journal page
Before
After
Challenge
During the testing the app it was clear that most of the participants found it annoying pop-up window with helpful articles after checking the progress everyday.
During the testing the app it was clear that most of the participants found it annoying pop-up window with helpful articles after checking the progress everyday.
To resolve this problem I changed it. Suggested articles will be shown on a journal page itself, so it will not disturb users because they will not need to close any window.
Reflection part
After achieving the goal there is a reflection part. There are 4 questions in this part, by answering those questions users can understand which part of the whole process was hard and why it was hard. So users could adjust their approach for easier achieving their goal next time.
Before
After
Challenge
Problem was that it was not clear how many question are there, also participants didn’t know if it is scrollable.
Problem was that it was not clear how many question are there, also participants didn’t know if it is scrollable.
So I decided to show per one question, and the number of total questions. User presses “next” to go to the next question and users can add a note only on the last question box.
Prototype video
Conclusion
Main challenges in the project were:
There were discovered many major issues during the first round of usability testings. After resolving those problems, there were no problem with those parts in a second round of testing.
It was my first time conducting interviews, testings and doing research. It was little scary at the beginning, but I found all the parts of the whole process very interesting, and it developed my empathy for all user. I created all the icons and illustrations for this project, I learned that every detail in the product is important.
Many people have children and want to teach their children healthy eating, so I would develop the feature - setting a goal for the whole family or kids and users would receive reminders for the whole family. Also I would work more on community section, on how can I make it more engaging and helpful.
- to motivate users to learn more about sugary beverages effect on health;
- to understand how to help users to achieve their goal;
- Each part of the whole process helped me to solve this problem, especially feedback from the participants during the testing.
There were discovered many major issues during the first round of usability testings. After resolving those problems, there were no problem with those parts in a second round of testing.
It was my first time conducting interviews, testings and doing research. It was little scary at the beginning, but I found all the parts of the whole process very interesting, and it developed my empathy for all user. I created all the icons and illustrations for this project, I learned that every detail in the product is important.
Many people have children and want to teach their children healthy eating, so I would develop the feature - setting a goal for the whole family or kids and users would receive reminders for the whole family. Also I would work more on community section, on how can I make it more engaging and helpful.
Other UX Projects