Building an app from the ground up — UX Design case study
Article 1/2 in which I tackle the UX part of the project.
Tea is a bit of a hobby of mine. I love to drink it and I even have my own online shop. However, learning more about it I found out that tea has health benefits I never knew existed. Will I be able to share my passion using the science of UX/UI design?
What is so special about tea?
A simple Google search on the effects of tea on health will give you a lot information. Though the scientific community does not seem to have reached a concensus there appears to be a good indication that certain teas have health benefits. Matcha (a finely ground tealeave) is a good example. One cup contains the same amount of anti-oxidants as 115 cups of regular green tea! Reported health benefits include a clearer skin, improved concentration, reduced risk of heart-attacks or strokes and weight loss. I want to find out if people are aware of the health benefits, and whether they would be interested in learning more about it to boost their well-being.
In this article I will use UX research and design methods to come up with a digital MVP from scratch within 5 days.
What is already out there?
To get an idea of what was already out there I browsed the app store with the ‘tea’-tag and downloaded a couple of apps. I tried TeaApp, NaturalRemedies, Teami and BrewTea. I compared them on features and their goals/audiences.
While all of these apps have very different aims and audiences, I found that 3/4 differentiate between categories of tea and give general background information. However, when it comes to giving recommendations on what to drink or how to brew the tea most fall short.
User Research
Going from my competitive analysis I set out to research my users; tea drinkers. Using the Lean Survey Canvas I collected 22 survey responses and conducted 3 interviews. The questions were divided into three categories. Demographics, drinking tea and wellness.
→ Demographics
Most respondents were between 21 and 30 years old (77.3%). 16 respondents were female (72.7%).
→ When and how much do we drink?
TLDR: Mostly in the morning and evening. More than half of the respondents drink several cups a day.
Tea is drunk all throughout the day, but it peaks during the morning and evening (72.7% for both compared to 54.5% during the afternoon). One respondent reported that she could not drink tea at school. Being at school or at work might relate to the drop in drinking tea during the afternoon.
16 respondents drank tea at least once a day (72.7%). Of the total group 12 drank tea multiple times a day (54.5%).
→ Why and what do we drink?
TLDR: We all love the taste of tea and it helps most of us relax. Green tea is the most popular and yellow tea the least.
All but one (95.5%) drinks tea because of the taste. Furthermore, 14 respondents replied that tea helped them relax (63.6%). Only a few respondents (22.7%) reported drinking tea for a combination of health benefits. Interesting to note is that only 4 respondents drank tea because they didn’t like coffee (18.2%).
Looking out the favorite types, green tea was by far the most popular (81.8%). Following this was black tea (63.3%). The least popular type was yellow tea (9.1%). Noteworthy were flower (27.3%) and herbal teas (45.5%) considering they are not actually part of the ‘tea leave’ family.
→ What parts of our wellness would we want to improve?
TLDR: Mental health benefits are most popular, physically we are more concerned with our skin and immune system.
I provided respondents with a list of health benefits tea could provide and asked them which ones appealed to them. Of course everyone wants to be healthier, but there were still noticable differences. Mental health benefits were by far the most popular: reducing stress (77.3%), increasing concentration (68.2%) and improving mood (72.7%). Among the physical health benefits healthier skin (54.5%) and a stronger immune system (54.5%) stood out. Other health benefits hovered between 30–40%.
→ Would we consider drinking tea to increase our wellness?
TLDR: Nearly all would drink a particular tea to improve their well-being, but would like help in choosing the right tea and keeping track of what they drink.
Yes! All but one (95.5%) would drink a particular tea to improve their well-being. However, almost all (90.5%) would like recommendations on what teas to choose. Furthermore, more than half of the respondents (57.1%) would be interested in keeping track of what and how much they drink. Finally, most (85.7%) are interested in learning more about the tea they drink.
→ Interview insights
I spoke with two people who drank tea often, and one who drank occasionally. I learned that usually drinking tea starts at a young age when children drink along with their parents. I also found out that people are not only interested in learning about the origin or history of a type of tea, but also want to know about the tea companies they buy from (is the tea produced sustainably, for example). Furthermore the flavors seem really important. People enjoy drinking different kinds of tea. Finally, while most want to drink tea to increase their wellness, they might drink only for a while instead of integrating it into their everyday lifestyle.
Defining our problem
To narrow down on the problem to solve I used the information I gathered to create a persona. Meet Marijn, a university student who is interested in drinking tea to improve her concentration.
Now that we know a little more about her, let us take a look at what Marijn goes through in her search for learning about the different kinds of tea and how they might help her.
Problem summary
As we can see in the Customer Journey Map above Marijn’s expectations are not met. Based on my previous research I can tell that many people are interested in becoming healthier and are open to trying specific teas. But information about what tea to drink, and how much, is unclear. Furthermore, people prefer not to drink the same tea every single time and would like help in keeping track of what they have drunk.
There is an opportunity to help people find new flavours and teas specific to their preferences. I can do this by recommending teas based on their preferences and helping them keep track of when and how much they drink.
Problem statement: Tea lovers who want to support their well-being need the right information on what, and how much, tea to drink because they are unfamiliar with the benefits.
Finding a solution
This part was rough. After brainstorming I came up with a lot of solutions, but I was unsure where I should put the focus. Using MoSCoW and referring back to my problem statement I was able to set up my paper prototype.
Here is what I did:
- After brainstorming I categorized my ideas using MoSCoW.
- Next I grouped the ideas together into ‘pages’ and created an app-map.
- Then I worked on the information architecture by drawing empty frames and writing the features that would go in to the side.
- Finally I started sketching and figured out my first layouts for the paper prototype.
Iterating
I was short on time, but it is never a good idea to skip testing. I am happy I could ask some fellow UX’ers to give me their opinion on the prototype.
Based on their feedback I changed the design of the ‘library’ where users can find more information on the types of tea. Instead of having rows for each category where users could scroll horizontally, I created tiles with different categories. This meant users would have to click an additional time, but it was much easier to navigate the types of tea.
I also needed their input for the ‘results’-page. I wanted to find out what people would expect to see. This gave me some great input.
Finally, I made a major change to the homepage. In the prototype it first showed the statistics and the goal underneath. I changed this to showing a simple description of the upcoming cup of tea with the statistics following that. During the testing a reminder of the users’ goal did not seem important enough for the homepage.
Mid-fi prototype with Sketch
There are some screens I want to highlight. If you prefer to get a quick impression of the whole prototype, please watch the video below.
→ Screen 1: During onboarding the user gets questions her goals and preferences. Based on the answers the app recommends one or several types of tea.
→ Screen 2: On the homescreen the user gets a quick overview of her daily schedule. It tells her what to drink and when. Below that is a short description of the tea and some brewing tips. After drinking she simply has to press ‘drink!’ to have the app register it.
→ Screen 3: On the homescreen users get a quick view of how many cups they have drunk. The statistics page goes deeper and shows an overview of daily and weekly results. It also keeps track of how long the user has been drinking (in case of a montly goal).
Video prototype
Conclusion
Even creating a simple prototype is challenging within a 5 day window. However, I succeeded in doing user research, identifying the problem and coming up with a possible solution.
Our problem statement was: Tea lovers who want to support their well-being need the right information on what, and how much, tea to drink because they are unfamiliar with the benefits.
This prototype could help me share my passion for tea. It helps tea drinkers by providing the right information (what, how much and when to drink) and it enables them to learn more about tea using the in-app library.
Future iterations
I will be revisiting this app in the future to develop the UI. But before I do, there are some parts of the UX that I would like to adress.
- I want to expand on the statistics
- I want to enable easy rotation of tea flavors users are recommended throughout the day
- And I want to account for people drinking from different sized cups
Design is not hard, but it takes time and effort. Pushing yourself within a set time really challenges you to make decisions on what to work on. In the end, however, this project has been a lot of fun!
Interested in the design? Read more about the UI part here.
If you liked this article and have questions or suggestions, please leave a message below. Thank you for reading!
