Building an app from the ground up — UI Design case study
Article 2/2 in which I tackle the UI 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?
Quick recap
Why tea?
In my last article I did research into the effects of tea. A simple Google search shows that tea has many beneficial effects on our health. I wanted to find out if people were aware of these health benefits, and whether they would be interested in learning more about it to boost their well-being.
Competitive analysis
To get an idea of what was already out there I browsed the app store with the ‘tea’-tag and downloaded TeaApp, NaturalRemedies, Teami and Brewtea. I found that each had very different aims and audiences but most differentiate between different categories of tea and give some general background information. However, when it comes to getting tips on what to drink or how to brew each type of tea they fall short.
User research
During my user research I found out that more than half of tea-drinkers enjoy at least one cup a day (usually more). Nearly all do so because they like the flavor. Black and green tea were the favorites. When it comes to health benefits we would like to know more about ‘mental wellness’ is number one. All but one would drink a specific kind of tea to gain these benefits! However, they would like to learn more about the tea and receive tips on what to drink. More than half would also be interested in keeping track of what they have been drinking. Taking this survey information and combining it with invididual interviews I created persona’s and a customer journey map. I used these to create my 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.
Prototyping
After brainstorming solutions I used MoSCoW to narrow down on the required features. I used an app-map to work on the information structure for the paper prototype. After user testing I iterated and completed my low-fi prototype. To see it, watch the video below.
UI research
Before getting started on my UI I wanted to get a better feel of what (in)direct competitors were doing. Below is an example of my visual identity competitive analysis. I kept it clean, looking at their logo, fonts, colors, UI and the overal style. I did the same for TeaBrew and Natural Remedies.
All three used different shades of green and Natural Remedies went a little crazy with a splash of orange mixed in. The fonts were all easy to read and each featured clear images of the tealeaves. Keeping all I had learned in the back of my mind I went to gather some inspiration for my moodboard.
I thought about breaking away from the competition by ‘not’ using green, but there was little sense to it. Consumers are used to the color, it has a soothing effect and just really matches the product. So there was no avoiding it. I did like adding a little extra color, so I decided to mix in some yellow. Below I added my mood-board, showing the colors and feelings I wanted to convey in my design.
Going from my mood-board I looked for a combination of colors and fonts I was going to use for my hi-fi prototype. I made a design system in Sketch, applying layer styles to each of the different colors and shades.
For the display and heading font I chose Taviraj. I noticed during my visual identity competitive analysis that more ‘classical’ fonts were popular. Tea has a long history and this type of font fits the feeling well. I complemented it with San Francisco for easy readability. Like I did for my colors I made layer styles in Sketch for all of my font styles.
Starting work on the hi-fi prototype
I made my lo-fi prototype in Sketch, but I had used a smaller artboard. So simply using it as reference I created a new file with iPhone 11 size artboards (414x896), with a 30 px margin on both sides. To make things easier I created some initial symbols. The image below shows some of my older symbols, as well as the finished ones.
While working on my hi-fi design I took time to iterate based on the feedback I had collected between finishing my UX and starting my UI. Below I added an example of the main page.
The goal of this page was to provide people with a guide on what to drink, when and give them an indicator of their progress.
While the original concept had a bar that would move along as the day progressed, many testers did not understand what this bar was for. Instead of showing all the teas for the day on one page I split it up in three sections. By creating a card for each specific tea I also had a chance to more clearly group information.
To make the navigation between teas in the new design easier I added a slider in the bottom left. This is a good example of where I have tried using both color and shape in different places to make the application accessible for those with a visual impairment.
I also made some other important changes/additions to the page. Firstly, testers indicated they might want to switch teas. Below the card I added an option to switch out the tea with another that has the same benefits. Secondly, to make it easier to track the accurate amount of tea users had they can now select their cup size, or add a custom amount. Finally, I used the extra space of the larger artboard and grouping of elements to make a larger indicator giving a better indication of the progress the user has made. I will show this in more detail later on.
Another screen that underwent a lot of change was the statistics page. Testing gave me a better indication of what users would be interested in knowing.
The new screen shows the total amount of tea drunk each day. It also shows the progress made (if the user set a set amount of time) and finally a ranking of what tea the user had most. The goal of this page is to help users gain insights into their habits and discover potential weaknesses in their schedule.
Overal process
The first version of the UI I started with was rather busy. I used many colors and elements. However, during the process I kept removing more and more to go back to the essentials. In this sense the design got more modern and minimalistic. However, I was happy with the change. One good example is the onboarding section of the page. I started with a green header, then made it black/white, then white and in the end I removed it altogether. It did not add anything to the experience and aesthetically it was distracting from the elements the user was supposed to be focusing on.
Final design
The best way to show the final design is simply… showing it. So watch the video below to see the onboarding and functionality of the prototype.
Something extra — Invision Studio
Micro-interactions play an important part in the user experience. To give an idea of what these can do I applied them to the main page. The aim is giving users better feedback on their progress and make the act of keeping track of what they drunk more fun. The animation was made through Invision Studio.
Conclusion
Creating an entire app within 10 days is a challenge. I personally feel more comfortable with UX then UI, but during the course of this project I feel I have learned so much. To be honest, it turned out a lot better than I hoped it would!
By looking at competitors, setting a course through a mood-board, and creating a design library the actual designing become a lot easier. Of course, still things change but no one gets it right the first time.
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 final hi-fi 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. The design is aimed at making it easy to see what is next and to keep track of their progress so far.
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 research? Read more about the UX part here.
If you liked this article and have questions or suggestions, please leave a message below. Thank you for reading!
