Designing and implementing a reminder app catering towards mental health.
During winter of 2020, our professor approached our team with the open ended challenge of designing and implementing a human-centric product that catered towards mental health.
Our team of four computer scientists created Mental Reminder, a cross platform application to gently remind users of the recurring things that need to get done. I was solely responsible for the complete design of the application and also contributed to the front end development.
UX Lead
Prototyping, Visual Design, Branding
Front End Development
Many people with mental health issues can get overwhelmed by the amount of things they have to do, and their anxiety only gets exacerbated by the crowded and sterile UI of popular reminder apps on the market.
Our goal for this project was to research, design, and ultimately implement a cross platform application with a minimal UI and feature-set to gently remind users of the things they need to do in a way that’s unobtrusive and easy to use.
Carving out our product's niche
We have a lot of competition as far as reminder apps go - however, we had a clear goal to cater to mental-health reminders in both the look and feel or our app. We had to do focused research on how we can cater to our target audience through our UX choices.
Designing for rapid development cycles
At the end of the day, this project was for a computer science course, and after the design phase, we only had 4 weeks to implement. From a project management perspective, we had to make sure that what we wanted to implement was actually within the scope of the course.
Systematic literature review across 10 research papers helped us confirm our assumptions and learn more.
From this, we learned about that:
1. Users value the user interface and friendliness particularly high in mental-health focused apps
2. When designing specifically for mental health, it's important to keep it simple and not overwhelm the user's cognitive load
We then conducted competitor benchmarking to identify our market and our niche.
Between the twelve applications examined, the common complaints were feature bloat and pricing. Most reminder apps were too robust for our target audience's use cases, resulting in clunky UI and and overall poor experience. Additionally, most of the apps that were mental-health focused featured subscriptions or had most of their features locked behind paywalls.
We eventually settled on the core featureset of:
This screen map identified early on what our core flow would be for the user and helped guide us through our wireframing phase, where we would try to flesh out potential layouts and understand what UI elements would need to be designed.
We ended up doing a quick round of sketching followed by some very rough and ambiguous wireframes. These were more to identify the flow and highlight big picture navigation/interaction concepts that would be key to the final product.
A significant constraint and challenge for this project was the timeline. This was, at its core, a CS course, meaning that we would not only have to design the product but also leave time for development. Knowing this, we had to not only make sure that our design was feasible to implement within a 2-3 week time frame, but also we had to manage our time well during prototyping.
Luckily, the instructor was extremely ‘hands-off’ during the design portion, which allowed me to suggest practicing lean ux to prototype and validate our designs. We would test each major iteration along the way with family, friends, and classmates, and adjust accordingly. This allowed us to expediently catch mistakes along the way that we would’ve missed otherwise.
Our initial prototype’s shape, layout, and interaction paradigms were received really well upon unofficial testing with family and friends - but there were also a lot of things to fix.
Problems found from R1 testing:
We took the feedback from our first prototype and changed both the colors as well as the reminder element. By using Google’s Material.io icons, we saved development time while preserving the sense of customization.
Problems found in round 2 of testing:
By this point, we had the main flow of setting reminders fairly ironed out. We focused our testing efforts on other parts of the flow, primarily those having to do with customization since our research indicates that users value that in mental-health productivity applications.
During this round, we:
Since we made sure to validate often during our prototyping phase, we knew that the flow and the major interactions along the way were easy enough for folks to navigate through.
After our final round of user testing, we had a discussion with the class instructor on the feasability of implementation. Even though our app was already fairly minimal, we were advised to cut down on a fair bit for our initial MVP.
This was what remained at the end of that discussion - the ‘heart’ of mental reminder, and the bare minimum viable product to fulfill our original product goals.
What you see below is the core flow of setting reminders, and a few of the other minor screens. Unfortunately, we had to nix some customization features and menus due to lack of development time.
Here, users can view all of their reminders. We tried to keep it as simple as possible - just the reminder name, due date, and an icon to make the type of reminder noticeable at a glance.
It was important to us that the core loop be easy to use - users can swipe to complete or snooze reminders. This core interaction is becoming more commonplace these days, and would be introduced through an onboarding screen.
It was important to us that setting a reminder would be as easy as possible - we believe that if we provide an easy first step, users would be more inclined to follow through with the task to completion.
That’s why we added preset reminders, so reminders can be set for common things with just one tap. For new reminders, users can swipe through the numerical inputs and tap options. We wanted to limit keyboard input as much as possible, since those require both hands and impede the flow ever so slightly.
Although users noted that scheduling reminders in advance (triggering a reminder on a specific day) seemed to be out of scope, we wanted to allow for period reminders to exercise, meditate, or even just to drink water.
With this, we knew we had to create a separate flow and distinction between recurring reminders and regular reminders. We decided to use color as the main differentiator, and reinforce this by giving recurring reminders their own page so users can toggle and edit these.
A lot of people that we had talked to in our user interviews noted that they don’t just forget to do things - sometimes they forget whether they’d done them at all. This is particularly important for use cases such as medication. If someone uses our app to take their medicine and forget, there’s a chance they might take it twice.
So we created the reminder log page, where all completed and cancelled reminders can be viewed. This way, even the most forgetful user won’t have to worry about whether or not they’d done something.
During our systematic literature review, we learned that positive reinforcement and reflection can be a great feature for apps targeting mental health and productivity.
We decided to add a profile page even though the app is designed to be offline and isolated. By reminding the user of how far they’d come and providing interesting statistics, we hoped that this would encourage them to continue their positive and productive streak into the future.
This is one of my favorite projects, even though development didn’t go as well as we had hoped, simply because it taught me a valuable lesson about workflows, timelines, and project management.
At this point, I had a few larger UX projects under my belt and felt confident in designing a product to fit a brief. However, this was my first time doing both the design and implementation, and I learned that you can’t plan for every outcome.
Just about everything that could go wrong with development did - our back end engineers ran into integration issues, some of the interactions we had planned were a lot harder to implement with our chosen front-end framework, etc. In the end, what we had developed was only a fraction of what we had originally planned.
This taught me a valuable lesson about expectations in product design and learning to adapt to whatever comes up.