UX Case Study: Mobile App “Wadoo”
Creating the User Experience of an app that helps users track their daily water intake
Since I did my first course on UX Design (this one on FutureLearn), I wanted to apply my knowledge and design the User Experience for an app and also put my design in a real user test to validate it.
So when I had this idea for a nice and helpful mobile app, I figured this would be the chance to practice what I’ve learned in these courses:
My idea was an app that would help you to track your daily water intake. It reminds you to drink enough water and you can add amounts and see when you have had enough for the day.
This is the process I had set up for this project:
- Idea and Objective
- Features and Mockup
- Testing
- Test evaluation and Redesign
- Final design
1. Idea and Objective
Tasks for this step: Break down the app idea and condense it into one sentence that quickly describes what it does and how it helps people.
There is no business behind this app, so there was no need to include any business objectives, existing users or similar challenges. Which is why I went straight to formulating the goal of this project:
Provide an app that helps busy or forgetful people to achieve their daily water intake.
2. Features and Mockup
Tasks for this step: List out features of the app, create Wireframes, and create High-fidelity Mockups.
2.1 Features
The features I came up with are based on the two important tasks the app should perform:
- Help users to track their daily water intake.
- Remind users to drink enough water.
Coming from these tasks, there are four main features that the app needs to have:
- Main screen/information: How much did the user drink today, and how much does she/he have left?
- Water intake calculator: User enters her/his information, the app calculates how much water the user should drink per day.
- Add: Whenever the user drank water, she/he can add it to the app.
- Alerts: The app sends alerts to remind the user to drink water.
Some more features that would be nice to have and could add to a positive User Experience:
- Add different kinds of drinks: The user can enter whether she/he drank pure water, or a softdrink, coffee, juice etc. The app knows how this is equivalent to a certain amount of water.
- Statistics: User can see her/his statistics of the previous weeks/months/years. How much water did the user drink? Was the user successful with drinking enough?
- Intelligent alerts: The app calculates the time frame between alerts by keeping track of the user’s drinking behavior. For example, if the user only drinks small amounts of water, she/he will get more alerts.
2.2 Sketches and Wireframes
After I had a plan about the app’s functionality and its features, I started sketching out some rough wireframes.
You can see that I made some amends in these before going about creating more detailed Wireframes in Adobe XD.
Learnings during this part of the process: It helped a lot to create these Wireframes before going into designing the actual screens. The Wireframes gave me a good feeling of what makes sense for this app and what doesn’t. The focus was on designing “what needs to be there” and not on “what looks good”.
Questions that I asked myself during this step include: Where should I put my features? Do different features belong on the same screen? How are they linked together? How do other apps with a good UX link features and create hierarchy between them? And a lot more.
2.3 High Fidelity Design and Prototype
I thought about testing my Wireframes, but decided to rather create a completely designed Prototype so that I could also get some feedback about the actual UI.
The visual design process was started by creating a overall visual style for the app and capturing it in a “Style Tile” (I read about Style Tiles in this great article).
I wanted the UI design to transport the fresh and clean feeling of drinking water. It should invite the user to use and explore the app. Lastly, I wanted to make use of the Material Design principle of elevation to make sure users understand the visual hierarchy of the different elements on screen.
After some iterations, the next step was to create the actual app screens. Due to my Wireframes, I had a solid foundation and was able to completely focus on the details of my designs.
Problems/learnings during this part of the process: As it seemed at this point, I did not completely think through what I wanted my prototype to do.
Which, when designing the screens, led to me noticing that I actually wanted that button to be clickable and show a modal (which I didn’t create in Wireframing), and this one as well. So I needed to design some additional screens completely from scratch, which was not nearly as efficient.
3. Testing
Tasks for this step: Create test cases, do Online user tests, and one Interview test (in person).
There were two kinds of tests I wanted to do with this app:
An online test with three participants. And an interview test with one participant, where I would show the participant the app on my phone and give her the tasks.
The questions and tasks would be the same for both tests, but with the interview test having the advantage of me being able to observe the user and see her reactions to what she’s seeing on the screen.
Before actually starting the tests, I thought about some possible problems users could have with the app and some things I wanted to find out:
- Adding: Should the measure of drinks be a concrete number, such as „0.5 liters“? Or would users prefer to have something like „small glass“ or „large glass“?
- Main screen: Is it clear that you are seeing today’s/current information about your water intake?
- Settings: Is naming it „Calculator“ and also having the location setting there the best way to go? (Would users remember this screen from the Onboarding process and recognize the „Calculator“ in the menu?)
- Alerts: Is it clear how to set alerts and what options users have when setting alerts?
- Statistics: Are they easy to understand? Is it even beneficial or are users overwhelmed or even bored by graphs and too much dry information?
- Data: Are users even okay with giving so much of their personal data to an app? Do they understand what the app uses the data for?
From these questions I generated seven tasks I intended to give to the users:
Some of the tasks were meant to be rated by the users with 1–5; 1 being very difficult, 5 being very easy to complete. The other tasks would be evaluated by me based on what the users do and what they say.
Testing itself was done relatively quickly, the online tests were made all in one day and the interview test on the following day.
4. Test evaluation
4.1 Results
Here’s a breakdown of my results.
The biggest pain point seemed to be the “Calculator”. Two of the users didn’t immediately find out where they needed to go to change their information.
The Interview user even got frustrated while she was searching for the “Settings” — she didn’t see the “Calculator” as her goal for this task, which is totally understandable since it is not something we usually see in apps.
4.2 Redesign
Based on these insights, I slightly redesigned the menu of the app. The home screen is now called “Today”, and the “Calculator” screen was renamed to “Settings”.
I also made some other changes to the UI, based on feedback I got from the testers. These didn’t seem to be huge pain points, but it was feedback I found reasonable and therefore implemented it.
5. Final design
Tasks for this step: Upload the final Prototype and ask for additional feedback to further improve the design.
Here’s my final clickable prototype:
(works both on Desktop and Mobile)
As I mentioned in my introduction, this was my first complete UX project. I am still beginning to work in this field. Therefore I’d be really happy to receive some feedback.
It was a lot of fun doing this project, but I’m sure I could have done things better and I want to improve my process, so feel free to leave a comment or send me a message if you have any suggestions!
Thanks for reading!
