Aaron Cecchini-Butler
Aaron Cecchini-Butler, UX Research / UI Design
sign-up-on-marble2.gif

toDONTlist - Mobile App Designed for Wellness

toDONTlist

 
 

The What and the Why?

I’ll be the first to admit that I don’t partake in self-care/wellness as often as I should. Our society is built around the idea that “not being productive = lazy.” In the past I’ve tried to include certain things in my daily routine, but as soon as I look at my to-do list and see “meditation” next to “work on project x,” it’s hard for me to choose meditation. So I started making two separate to-do lists. That way I wouldn’t be distracted by “project x” when I was supposed to be taking care of my health. And the best part - I’ve never been more productive since I’ve started checking those self-care boxes!

toDONTlist is a mobile app designed to keep self-care separate from the stressors of everyday life. Its design is minimal and energetic with a focus on female-identifying users between 20-40.

 

Many people face similar issues when it comes to self-care such as:

  • Increased stress due to lists and calendars

  • Difficulty finding time for self-care

  • Prioritization of everyone else over the “self”

 

I wanted to create something that would help users with these issues and:

  • Provide a space for users to work on (and treat) themselves

  • Designate a digital space, separate from stressors, where self-care and wellness can be logged

  • Provide a few other related features such as a light-therapy alarm and sleep sounds

In a world where so many of us are on she go, a digital place to escape that promotes our health, both mental and physical, has the potential to be extremely valuable.

I enjoy conducting potential user interviews and constructing a user persona as early as possible because it informs so many design decisions.

 
 
 

Primary Insights:

  • Finding time for wellness and self-care is a big factor for people

  • A lot of previous users of similarly branded apps found themselves discouraged by the expectations the app was setting:

    • Notifications were stressful to the user - and were too frequent

    • Apps would suggest activities that were either complicated or time-consuming, discouraging the user, and making them feel bad about themselves (ironic!)

  • Users who had used similar apps enjoyed the imagery and sleep sounds

    • Three interviewees went on to download separate apps for the sleep sounds and deleted the larger wellness app

 
 
Jen helped inform many aspects of the design and ultimately  led to the decision to give difficulty tags to suggested wellness/self-care activities.

Jen helped inform many aspects of the design and ultimately led to the decision to give difficulty tags to suggested wellness/self-care activities.

 
 

I wanted to see what it might look like for Jennifer Kim to go from her realization of need all the way to being a power-user of toDONTlist, so I constructed a customer journey map.

 
 
 

Creating Jennifer Kim’s customer journey map helped clarify potential drop-off points, and inspired the idea of morning + night = daily user.

 
 
 

Jennifer Kim inspired many design decisions including:

  • The requirement of minimal personal info

  • The creation of a simple UI that encourages input

  • A notification system to reengage the user that isn’t overly aggressive

  • “Morning + Night = Daily User” is the concept that by including an alarm and sleep sounds, the user will be likely to see the app both in the morning and at night, which has the potential of increasing daily usability

 
 

Jennifer Kim’s Customer Journey Map helped me understand the needs of a potential user more fully. I then created Information Architecture.

 
 
 

The IA for toDONTlist is structured around the idea that the user shouldn’t be pressured by the Inspiration page. The users exposure to Inspiration can be filtered based on difficulty, time-needed and a number of other categories. Additionally, the user will only see Inspirations when they actively navigate to that page, as opposed to being on a landing screen immediately after opening the app.

Additionally, the four menu items in the nav bar are:

  • List - view list, add items

  • Inspiration - search for inspiration, add ideas to list

  • Alarm - Set alarm time (more settings to be added later)

  • Sleep Sounds - Choose sound, and control volume

 
 

The IA is fairly shallow, and will depend on pop-up windows to accomplish certain tasks such as adding to list.

 
 

Knowing that design was my next step, I began searching for inspiration. I wanted to create more than a functional app, I wanted to create an emotive space that users could escape to. So with this in my mind, I put together a mood board on Pinterest.

 
 
 

Key terms I looked for based on my interviews were:

  • Minimalism

  • Simple

  • Clean

  • Energizing

  • Fun

  • Playful

I opted for a blue and pink color based on the returns from these searches. When looking up “energizing,” I was inspired by the neon lights, and wanted to incorporate that specific energy into the designs. I played with large blurry, centered shadows to mimic that light.

The user icon was inspired by a pink lotus and the list view was inspired by white spaces with strategic shadows.

 
 

With the inspiration of the mood board in my mind, I began designing some of the screens. I started off by sketching out some ideas.

 
 
 

Sometimes I use a color-coded system to write my future-self notes. In this case:

  • Blue: design ideas

  • Pink: specs

  • Green: animations

  • Brown: reasonings

The process of seeing how these ideas can work in a digital format is an aspect of design I especially enjoy.

 
 

Transitioning from sketches to wireframes is the moment where I can really start to see the viability of certain concepts.

 
 
 
final for site.jpg
 
 
 

This was also the stage at which I decided on the square clock - which contributes greatly to the final design’s cohesiveness.

 
 

The process of moving from wireframes to final designs was very fluid for this project. I received feedback on my style guide/UI Kit and wireframes simultaneously and was able to make adjustments while working on these final designs.

 
 

The sign-up flow (as can be seen in the animation below) is bright and energetic. Many users abandon apps when they realize they have to sign up, but by giving multiple social media options, we hope to reduce that number.

This is the super simple interface for inputting a task. No alarms, no reminders, just a text box. A small dose of positive reinforcement can be really important in encouraging continued use of a wellness app (or any app!). I placed the text box below “You’re Awesome” intentionally to keep that visible.

The actual list is simple - as it is meant to be! The user can click the plus sign to add an item, click on the item to edit or swipe left to mark it as complete. Some potential users mentioned frustration related to overly complex to-do lists that make adding an item difficult.

Multiple interviewees mentioned alarms that woke them up gently as opposed to the harsh beeps or bells we are accustomed to. I designed the clock as a large square with the intent of having it light up slowly, in conjunction with music (based on the notification sound below) to wake up the user in a more gentle way. This also results in them seeing the app first thing in the morning!

The inspiration page is a space for the user to go to get ideas about how to be good to themselves. There is a clock marker indicating how much time a task takes and the pyramid indicates the difficulty, with three bars being the most difficult. The plus adds the item to your list.

Another popular wellness tool many people mentioned in interviews were sleep sound apps. Many users reported using a sleep sound app every night. By including this in toDONTlist, we get the user on the app one last time before bed. Besides encouraging good habits for the user, it also encourages daily use.

toDONTlist as an Apple Watch Screen allows the user to see the time, check their alarm and use the built-in breathe functionality from the Apple Watch.

The Apple Watch Screen intentionally doesn’t show list items because the intent is to avoid the stress or negative energy associated with being constantly reminded.

 
 

Coming to these final designs was very exciting. I really enjoyed letting myself get a little carried away with the UI aspect of these designs while still being true to the UX research.

 
 

More than inu or TeacherTracker, I knew that the notification sound for toDONTlist had to be extremely effective.

 
 
 

If the notification sound design was done well, it could transport the user into the state of mind intended by the app. Also, knowing that this would accompany the daily inspirational quote helped guide my musical decisions. Many iterations were made, and after sharing these with four “potential users,” 3/4 said that this sound would be most likely to make them open the app, and the remaining 1/4 had this has her second choice.

 
 
 

toDONTlist isn’t just designed to perform a function. It’s also designed to transport the user to a positive mental space. For this reason, animations are crucial to the continued use of the app.

 
 
 
Quick pagination allows easy access to sleep sounds.

Quick pagination allows easy access to sleep sounds.

A sign-up flow with energy!

 

Beautiful animations take this app to the next level. All of these animations were prototyped in Principle.

 
 

Summary

The most exciting part about working on toDONTlist was how it inspired me to take self-care more seriously in my own life. Going through the UX process exposed me to a number of viewpoints on wellness - and some of the prototype testers even expressed a desire to take their wellness more seriously after interacting with the app. I also took advantage of the creation of this concept app as an excuse to let loose with minimal design that truly excites me. Finding creativity in structure is one of the greatest aspects of UX Design!