Case Study: Enhancing The Usability Of A Healthy Habit Reminder App
Everyone has that one healthy habit that they have on their list of new years resolutions year after year which never gets ticked off. What’s yours? Is it to be more connected to your loved ones? To wake up with the golden hour sun? Or even just to remember to chug an extra cup of water every day?
Whatever your answer may be, we can all relate when it comes to the struggle that comes along with attempting to implement said habit into your routine and remembering to follow through with it on the basis in which you’ve set for yourself.
Enter our client, Re:Mind.
A London based app founded by our lovely client Natalia, centred around encouraging its users to practise self care through the form of setting healthy habits. Users are able to purchase a smart bracelet to use as a means of setting non-digital reminders to engage with certain habits.
In this 2 week sprint, our 3 person team were tasked with:
- Testing/iterating the UX/UI of the current app
- Considering what features would be most useful to the users
- Designing a way for the app to sync to the wearable device
Discover
What else is out there?
There are around 30 companies within the realm of Re:Mind which allow for habit tracking via smart jewellery. My team and I acquainted ourselves with 5 of the most popular direct and indirect competitor reminder/habit apps: Fitbit, Bellabeat, Habits, Todoist and Productive. We came up with a list of 6 features that were rather customary amongst apps within the space and what the existing recipe for success looks like.
Feature analysis indicated that presenting users with sugestions for potential healthy habits in which they could implement was more an intuitive means of habit setting and would most likely result in users becoming more predisposed to setting new habits. It was also made clear that onboarding was imperative to the users understanding of the app. We kicked around the idea of goal-tracking but our client was more interested in users focusing on the present moment, not on prior or future achievements.
Pinning Down Design Patterns
The products that already exist in the market are key in serving as a source of inspiration for design. Analysing what already exists allows us to learn from existing competitors who already have a footing in the market by identifying key factors make them work and those that don’t . My team and I did this by analysing some key design patterns that were consistent amongst Re:Mind’s competitors.
1) Clear CTA buttons — especially important when the value of the app revolves around easily adding habits to your day.
2) Spacious, simple and calming UI — crucial since users are looking to de-stress. Friendly fonts, curved edges, soft shadows and scenic imagery were ubiquitous.
3) Carefully laid out UX — allows users to add/edit habits effortlessly. The ability to customise one’s experience with colour/icons is a bonus.
User Research
With a clear understanding of the client’s needs and other apps within the space, my team and I began getting to understand the driving force behind Re:Mind; Their users.
Defining our users
In order to develop a solution, we first had to define the users. My team and I recruited and filtered out our target audience through the means of screener surveys. As well as customary screener questions, we also questioned the participants current relationship with habit tracking apps which gave us a starting point for our interviews. Alas, setting up and conducting the surveys and collecting responses, in itself, was something I had to remind myself and others of!
We received 45 responses to our survey, with 82% of respondents saying they had recently tried adding positive habits to their lives. Noticeably, 31% of respondents currently use some form of reminder app, with people setting 1–5 reminders at a time.
As a group, we were able to conduct interviews with 12 willing participants, of which 5 were female and 7 male. Their ages ranged from 23–35. Once we had individually transcribed our interviews we took part in an affinity mapping exercise.
The results of the affinity mapping process allowed us to draw up some key insights:
- Habits over goals
- User interface of app is key determinant of whether or not it is downloaded
- Candidates open to idea of using a reminder app
- People rely on online resources as a source of useful information
- Lack of time is the main blocker for setting positive habits
Identifying and Prioritising Pain Points
Prior to each interview, my team and I conducted a usability test with each participant. We had them navigate through the current Re:Mind app whilst voicing their thoughts as they went along. Some of the main pain points expressed by the users can be seen below:
Define
To dot the i’s and cross the t’s, my team and I created user personas that were generated based on the prior the research we’d conducted. It aided us in developing a more concentrated insight about the users and helped us answer the number one question on our minds: “Who are we designing for?”
Our goal was to solve Eric’s problems by allowing him to easily choose habits, set reminders (to the app and wearable) and find useful resources.
In order to view Eric’s specific pain points in context, we created an experience map in which we view Eric’s journey through a specific senario. Inspiration was drawn from experiences shared in user interviews.
Defining and prioritizing the needs we aim to solve
Immersing ourselves in the shoes of our target audience resulted in a clear view of the problems that were both overtly and inadvertently formulated by users in the interviews. In order to design a solution to these problems, we had to synthesize them in a way that would make it possible to implement them into the ideation phase of the project.
Please, step into our design studio
In this stage of the project, the founder of Re:Mind joined us in a design studio, so to say we were pumped would be an understatement. The design studio allowed us to ideate on possible solutions for our How Might We Statements.
Under timed conditions, we each sketched out different ways in which our users needs could be met for each HMW statement. Once we had ideated on all 3 HMW statements, we uploaded or sketches to an online whiteboard and individually decided upon the features in which we each prefered through the means of a dot voting system.
Based on the majority vote and what was mutually agreed on in a discussion post design studio, we agreed on the following features:
- Suggested Habits — a way to suggest new habits to users in a way that is useful but not forced upon them.
- Edit Habits — a single edit habit page that is easy to follow and covers all possible use cases of setting a habit.
- Resources — a rejig of the current ‘Ideas Box’ page to make content more fun and discoverable for users.
- My Device — a way for users to easily set reminders to their wearable which would be located within the settings page
Exploring site navigation
In order to delve into how Eric would interact with the features decided upon in the design studio, we prepared 3 user flows. These displayed the fixed for his pain points at different stages of his journey through the app.
The first user flow focused on Eric setting a new reminder to ‘Breathe deeply’.
The second user flow focused on Eric syncing a reminder with his device to ‘call a friend’.
The third user flow focused on Eric searching for resources to combat lockdown induced-stress.
After a fruitful design studio, we prioritised our core features using a MoSCoW analysis and devised a simple user flow to envision the smoothest navigation for the user and kickstart the wireframing process.
Develop
In the words of M Cobanli, the founder of OMC Design Studios, ‘great design is the iteration of good design’. It’s in this phase of the process in which we try to exemplify just that by developing, testing and validating our designs iteratively.
My team and I collated ideas we’d developed upon during the design studio and implemented them into wireframes, beginning at lofi, then onto midfi and lastly to hifi, testing with users at every stage in order to create the best product for Re:Mind’s audience.
I’ll be taking you through the main changes made based upon user feedback at different stages of iteration for the 3 aforementioned flows.
Flow 1
In this flow, test subjects were asked to add a reminder. Upon searching for the button which allowed them to add this reminder, the users cursors tended to go straight to the bottom right hand side of the screen, when in actuality, it’s the button at the top right hand corner. After questioning users on this, they said that it feels more instinctive for the button to be placed where their cursors initially veered off to as it’s what they’re used to based on similar apps. We fixed this in the hi-fi prototype by listening to our user’s and placing the button at the bottom right hand side of the screen.
Another issue that we bought up on this Flow was the use of toggles to turn habits on and off. Users weren’t particularly sure what the toggle function was used for without having it explained to them, so we made it more apparent for them by replacing it with a simple swipe function which plainly tells the users that it allows for them to either delete or archive habits.
Flow 2
The means in which we used to filter articles was slightly too hidden away for the users and it was even mentioned by a few test subjects that they would’ve just completely skipped over this and most likely ended up scrolling through all of the articles to find their desired pick, which would end up being extremely time consuming and not all that catered to the users’ specific needs. We solved this problem by having a seperate sub-categories page prior to the article selection page.
Flow 3
One feature that was really important in this flow was the battery life of user’s Re:Mind device. We originally had this featured on the top right hand side of screen, but due to how close the icon was to users phone battery symbol, they were left feeling rather confused as to whether it would be an indication of the battery life of their phone or their Re:Mind device. In order to fix this problem we overlaid the the icon onto the image of the remind device and further away from where their phone’s battery life indication would be to avoid any confusion.
We also wanted the experience for users when syncing reminders to their device to not be too monotonous so we explored the idea of having a ‘swipe to sync’ feature in which users would drag down the icon of their device to sync. Upon doing user testing on this feature it became apparent that even with text indicating that users needed to pull down to sync included on the page, it wasn’t a particularly instinctive. Users seemed to prefer a simple ‘sync to device’ button, so we instead implemented this on the ‘edit device’ page.
Onboarding
We also touched upon onboarding in our usability tests. We wanted to cater the user’s experience as much as we possibly could to their needs so included a page in which they’d be able to filter out content that wasn’t applicable to them by selecting their preferences. With this being said, an over saturation of information on the onboarding tended to put users off entirely, so we ended up removing this page.
Users also didn’t quite understand the ’swipe to continue’ function when selecting whether to sync a device, so we also removed this and we changed the wording on this page slightly to allow for which ever option chosen to be the final onboarding call to action.
The Final Product
Below are the links to the high-fidelity prototypes. Each prototype follows the respective user flow previously outlined.
Eric sets a new reminder to ‘Breathe deeply’: https://bit.ly/3fBYu3z
Eric syncs a reminder with his device to ‘call a friend’: https://bit.ly/3laZGw3
Eric searches for resources to combat lockdown induced-stress: https://bit.ly/33V8wbz
Next Steps And Key Learnings
Given the opportunity, I would:
- Conduct more user testing on the high-fidelity prototype
- Develop the user interface even further
- Carry out further accessibility testing and make any changes as necessary
This was an incredibly rewarding project, one that pushed me and my teammates to our creative and productive limits within a short time frame. As my first experience designing for a client, I learnt the sacred lessons of prioritising, compromising and most of all empathising — not just with the end-user but with the client too.
Since the project has ended, I’ve been working alongside the founder of the Re:Mind to steer the UI towards being more of a jewellery brand, focusing mainly on the website. Below, you can see a few initial mock up’s I’ve made.
More to come by around mid January!
