Mental Reminder

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.

My Role

UX Lead

Prototyping, Visual Design, Branding

Front End Development

Deliverables

Clickable Prototype ↗

Project Website ↗

The Problem

Life can be stressful. How can we put the user's mental health first in an app that's inherently productivity focused?

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.

Core Design Challenges

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.

Step 1 - Research

We started off with research to better understand our market and our users.

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.

Research Takeaway

We found that there were no 100% free apps with a friendly, intuitive user experience to simply remind users of the things they need to do.

We used our research to create user personas to solidify our understanding of who we're designing for.

Using InVision's collaborative space, we used the 2x2 matrix method to determine our final feature set.

We eventually settled on the core featureset of:

  • Add, edit, snooze, and delete reminders
  • Set reminders quickly through a preset system
  • Set recurring reminders
  • Profile and general statistics to measure user growth and progress
  • Log of completed reminders for peace of mind
  • Mental Health resources

With this feature set, we created a screen map and some early wireframes

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.

Step 2 - Prototyping

With all the foundational work done, we got to work on prototyping.

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.

Iteration 1 - First Draft

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:

  1. Blue is sad instead of calming like intended
  2. Recurring reminder icon looks like a refresh prompt
  3. Pictures aren't necessary

Iteration 2

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:

  1. Needed to clarify affordances better, especially for the custom preset input
  2. Upon more detailed testing, we realized that certain features went untouched. For example, users said they were unlikely to schedule things in advance, as they’d defualt to Outlook for those tasks.

Iteration 3

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:

  1. Cleaned up the location of the settings and added an option to change the icons
  2. Revisited and refined the process of changing the preset reminders.
Step 3 - Final Result

After multiple rounds of rapid testing and validation, we arrived at this final design.

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.

Main Screen

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.

Setting a Reminder

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.

Recurring Reminders

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.

Reminder Logs

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.

Celebrating Achievements

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.

Reflection

Learning to look past the design - acknowledging the challenges of end-to-end product ownership.

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.

- Other Projects -

Airbnb Eco WTA App Concept WWU Move-In