This text also got published on UX Collective
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. I had already created a lot of UI designs and quite a few websites but never did the complete UX process as it is taught.
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:
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.
Tasks for this step: Research competitors, and create a User Persona.
A quick competitor research revealed some apps that feature similar functionality, such as Waterlogged for iOS and Hydro Coach for Android. Since I have no business goals with my app, I didn’t pay too much attention to the competition. But, it did give me some great inspiration for possible features.
For my User Persona, I was thinking about a person who often has busy days due to their job or studies and therefore forgets to drink water.
Tasks for this step: List out features of the app, create Wireframes, and create High-fidelity Mockups.
The features I came up with are based on the two important tasks the app should perform:
Coming from these tasks, there are four main features that the app needs to have and three others that could add to a positive User Experience:
3.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.
3.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.
Tasks for this step: Create test cases, do Online user tests, and an 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:
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.
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.
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.
This is the app's final design, although I still get some feedback from time to time and further improve the design. The prototype works both on desktop and mobile:
View the clickable prototype