Since I did my first course on User Experience Design (this one on FutureLearn), I wanted to do a complete UX project from top to bottom, including a real User Test and everything. 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 , 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 . It reminds you to drink enough and you can add amounts and see when you’ve had enough for the day.

This is the process I had set up for this project:

  1. Idea and Objective
  2. Research
  3. Features and Mockup
  4. Testing
  5. Test evaluation and Redesign
  6. Final design

1. Idea and Objective

For this step, I simply wanted to break down the app idea and condense it into one sentence that quickly describes what it does and how it helps people. Usually, there are much more factors you would need to include in formulating your objectives (such as business objectives, existing users if you are working on an existing product, etc.) but since I am not planning to build a business upon this app, this step was quite easy in this case.

Goal: Provide an app that helps busy or forgetful people to achieve their daily water intake.

2. Research

I did some quick competitor research and found some apps that have similar functionality, such as Waterlogged for iOS and Hydro Coach for Android. But again, since I have no business goals with my app, I didn’t pay too much attention to the competition. It did give me some nice inspiration for possible features though.

For my User Persona, I focussed on the kind of person who often has busy days due to their job or studies and therefore forgets to drink water or maybe doesn’t even know how much they should drink.

User Persona

3. Features and Mockup

3.1 Features

This step started with me writing down a list of features I imagined in the app:

  • Main screen/information: How much did the user drink today, how much does he/she have left?
  • Water intake calculator: Enter information, App calculates how much water the user should drink per day
  • Statistics: Water amount over certain time periods (have I been successful during the last month/year?); percentage of drink types (how much percent was pure water, how much other drinks)
  • Alerts: intelligent alert, x minutes/hours after the last drink / continuous alert, every x hour
  • Add drinks: Different drinks, the app should then add the respective amount of water (e.g. if it’s a lemonade, it’s probably only about ⅔ water)

3.2 Sketches and Wireframes

After I had a rough plan about the app’s functionality and its features, I started sketching out some rough wireframes.

Sketched-out Wireframes

You can see that I made some corrections in these before going about creating more detailed Wireframes in Adobe XD.

Learnings during this part of the process: It actually helped a lot to create these Wireframes, before going into designing the actual screens. The Wireframes give you a good feeling of what makes sense and what doesn’t. You focus on what’s actually important to show on these screens instead of trying to combining the “what needs to be there” with the “what looks good”. Instead, you solely design the “what needs to be there” part and afterward can start to add the “looking good” part.

Final Wireframes

3.3 High Fidelity Design and Prototype

After creating Wireframes and aligning them with my feature list, I went on to create the Prototype, which should be completely designed so that I could also get some feedback about the actual UI when doing my User tests.

I started by creating a 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. And I wanted it to make use of the Material Design principle of elevation to make sure users understand the visual hierarchy of the different screens.

Style tile that captures the visual look and feel. The logo was designed by Julian Ortlieb

I then made some iterations on this. For example, at first I used a slightly different looking gradient (and also used this gradient in all colored surfaces) but it reminded me of another brand and also it didn’t make sense to actually use that many gradients when they were not needed.

The next step was creating the actual app screens. With the help of my wireframes, I had a solid foundation and could completely focus on the details of my designs. But again, I noticed some flaws in my process.

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. So when designing the screens, I noticed I actually wanted that button to be clickable and show a modal (which I didn’t create as a Wireframe), and this one as well. So I needed to design some additional screens completely from scratch, which is not as efficient as having a wireframe and simply turning this into a High Fidelity design.

Complete Mockup

After a lot of fine tuning and connecting everything up, I had my prototype ready for testing.

4. Testing

There were two kinds of tests I wanted to do with this app.

The first one being an online test with three participants. The second one being 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:

  • I was not entirely sure about how to measure the amount of water when the user adds a drink. Should it be a concrete number, such as „0.5 liters“? Or would users prefer to have something like „small glass“ or „large glass“?
  • I was not sure how obvious the main screen needs to be. Is it clear that you are seeing today’s/current information about your water intake?
  • Also, I wasn’t sure about where to put the different 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?)
  • Is it clear how to set alerts and what options users have when setting alerts? Or is this too technical (having a „Time frame“ and „Alert types“)?
  • Are the Statistics easy to understand? Is it even beneficial or are users overwhelmed or even bored by graphs and too much dry information?
  • 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.

5. Test evaluation

5.1 Results
Here’s a breakdown of my results.

As you can see, the results of my user tests were good and most of the tasks were solved quite easily. I did get some really helpful feedback.

I did filter out some changes that could be made to the UI, whereas 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. One of them 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.

5.2 Redesign
Based on this, I slightly redesigned the menu of the app. The home screen is now called “Today”, and the “Calculator” screen was renamed to “Settings”.

Redesign of the App’s menu

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.

Example of another change I made in one the Statistics screens.

6. Final 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!

Source link


Please enter your comment!
Please enter your name here