Re:Mind - Reminder App for Healthy Habits
A detailed UX/UI case study
Contents
- The Client
- The Process
- The Discovery
- The Re:Design
- The Deliverable
Busy day? No stress. Here’s the final prototype (press esc and find the instructions in the comments).
THE CLIENT
Healthy habits are hard to come by in this age of cheap dopamine snacks. Enter Re:Mind, a startup dedicated to adding more mindful habits to people’s lives via a vibrating bracelet and accompanying reminder app.
In this 2.5 week design sprint, our 3 person team was tasked with:
1) Testing/iterating the UX/UI of the current app
2) Designing a way for the app to sync to the wearable device
THE PROCESS
THE DISCOVERY
Adopting a Competitive Mindset
We began by analysing a mix of the most popular direct and indirect competitors in the reminders/habits space.
We learned from a feature analysis that a way of suggesting habits would be a potential value add. 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.
Paying Attention to Design Patterns
The best habit/reminder apps shared these recurring design patterns:
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.
An Inquisitive Mind
With clarity on the client’s vision and inspiration from competitors, we took to the field to ask questions. We devised a screener survey to gauge demand and look into user behaviours before moving onto more in-depth user interviews. Here’s a round-up of insights that would inform our design decisions:
Stress Testing the Current App
We ended each interview with a usability test on the existing Re:Mind app. Here are the main issues users encountered:
Keeping the User Top of Mind
Now with an understanding of our users and their paint points, we mocked up a persona to empathise further with our target audience.
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.
THE RE:DESIGN
Designing with an Open Mind
We began ideating with an open design studio featuring the founder of Re:Mind. We each sketched out multiple ideas for how to solve our users’ problems in new, innovative ways. We uploaded our favourite idea from each round to an online whiteboard and dot-voted for the most viable solutions.
Features to Bear in Mind
After a fruitful design studio, we prioritised core features with the MoSCoW method.
1) Suggested Habits - a way to suggest new habits to users in a way that is helpful but not forced.
2) Edit Habits - a single edit habit page that is easy to follow and covers all possible use cases (no. of times, specific timings etc.) of setting a habit.
3) Resources - a rejig of the current ‘Ideas Box’ page to make content more fun and discoverable for users.
4) My Device - a way for users to easily set reminders to their wearable.
Flow State
With our core features settled, we devised a simple user flow to envision the smoothest navigation for the user and kickstart the wireframing process.
Wireframe of Mind
Left to right shows low to high fidelity wireframes. Iterate, iterate, iterate! After all, great design is the iteration of good design.
Each iteration of wireframes was based directly off feedback from usability testing. We made many minor tweaks to the design but the major pieces of feedback were:
Feedback #1: How can I edit individual instances of a repeated reminder? (e.g. I want an hourly reminder to stretch, but not during lunch.)
Design Implication: Include a ‘list view’ for repeated reminders where users can edit/delete individual instances.
Feedback #2: Settings icon needs to be more visible/accessible.
Design Implication: Include ‘Settings’ in the nav bar to give it more importance.
Feedback #3: Hard to tell what is a button and what is an input field.
Design Implication: Make inner and outer shadows more pronounced to differentiate between buttons and input fields.
Feedback #4: The ‘swipe down to sync’ device feature is fun but unnecessary.
Design Implication: Design this feature so that it involves minimal steps for the user — add ‘sync to device’ directly to the ‘edit habit’ overlay.
Feedback #5: The use of pink and flowers feels too feminine (feedback from the founder herself).
Design Implication: Change to a more neutral colour scheme to be accessible for all target audiences.
Mind-Bending Visuals
The branding and visual interface were inspired by a mix of interview insights, competitor research and the client’s personal preferences.
THE DELIVERABLE
Here is a demo of the final prototype (press esc and find the instructions in the comments) and here are some snapshots of the final screens:
Meditations
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.
The team dynamic was incredibly smooth, despite collaborating in a remote environment. Morning stand-ups were always met with a smile and the day after our client presentation was a bittersweet end to a very fun and fruitful design sprint.
Thank you to Blessing & Izel for all the hard work!
A Bit About Me
My name is Max Mondelli and I am an aspiring digital product designer. I am Swiss, Italian and Japanese. I graduated from Harvard University in 2018 before working in tech consulting in Silicon Valley for a year.
During lockdown, I decided on a career shift to UX/UI design and cannot wait to kickstart my design journey.
I would love to connect on Linkedin.
Thank you for making it this far, I hope you enjoyed reading about my process!
