Mobile App UX Design at Dotdash Meredith. 2021 — 2022.
MyLife — formerly known as Stop, Breathe, Think — is a meditation app with a loyal following. After years of updates, new features, and different designers, the app had grown without harmony, leading to numerous design inconsistencies, obfuscated functionality, and wide-ranging accessibility issues.
I took ownership as the sole UX designer in Q3 2021, and led a project to audit the app's accessibility and usability, and to create a new design system to avoid these issues in the future develop a harmonious digital experience befitting an app in the personal wellness space.
Q3 2021 — Q1 2022
Sr. Lead UX Designer
A collection of screens from the app before our work, showing a range of design inconsistencies and accessibility failures.
As the first accessibility expert to work on MyLife, I wanted to start by evaluating the app’s accessibility failures. After a comprehensive review of 40+ screens, design issues were quickly noticed on nearly every page, often revolving around contrast failures, insufficient touch-target sizes, and miniscule typography. A recommendation for each issue was prepared, including the establishment of an accessible color palette to kickstart our upcoming design system.
Secondly, I audited the competitive landscape for usability and communication issues. Competing apps exhibited a far stronger harmony across the entire meditation experience, with a matching family of icons, illustrations, and consistently designed components.
It was exciting to see many potential futures for MyLife, but any next steps required an established baseline. We needed a design guide built for consistency, and a redesign of the app following these new styles. Once that was in place, we knew we could look further toward the future of the app and its many potential new features.
Changing our primary brand color required a revisit of the entire palette. We leaned heavily into airy blues with attention-grabbing purples. Clickable elements were given more depth, better fitting iconography, and contrast was fixed throughout.
The airy blue carried through our daily check-in screen, and we leaned into more of our brand with visual adornments and an updated visual hierarchy.
Legibility and clear communication were key UX principles for the project, as we aimed to better explain what our features were, how they could be used, and the benefit they provide, as made evident by our redesigned meditation series.
Part of the audit period included documentation of all the various components across the app, as well as any which could be updated to fold into other components, as a means of simplifying the development process. This, plus the audit of colors and type styles, gave us a baseline from which to build out the design guide.
In conjunction with our brand design and marketing teams, we worked to determine a set of color styles that matched our rich, illustrative branding materials, while also reaching accessibility requirements to ensure we maintained a minimum of AA contrast, per the WCAG 2.1. The previous primary UI color worked wonders with our branding, but failed as a utility color, and so we worked our way towards a new primary hue of blue, with a selection of secondary and tertiary accent colors that would work for less mission-critical elements and add more life across the app.
Additional accessibility considerations included: a type style that relied more heavily on larger fonts, placing an emphasis on readability for our users; buttons and inputs with larger touch-targets, to better serve our wide range of users; and a communication system that ditched the reliance on colors to convey important information.
Our new daily check-in flow, giving users a chance to breathe and reflect, before doing a generated meditation activity based on their answers.
Once the baseline for our design guide was fleshed out, it was time to address some of the more dated screens in the app — ones that exemplified the lacking visual harmony. Notably, the daily meditation experience that we encouraged every user to utilize was the biggest offender of all. Illustrations from a bygone era, plus colors and fonts from ancient design files, all amounted to a confusing detour from the rest of the experience. This was an integral part of the app, so we focused on this first.
Subsequent screens such as the sign in/sign up, categories, meditation, and settings pages were designed next, and soon the app felt like a cohesive entity. A roadmap was built for the development of our new screens and the implementation of our new design guide, setting us up for a future of feature updates and enhancements.
The Series flow, taking a user through a collection of similar meditation and thoughtfulness exercises, encouraging them to take one step each day.
Sadly, in 2022, MyLife was shut down. The company I had worked for at the time was acquired, and they tabled the app to focus efforts on other verticals. It’s unfortunate, but it's the reality of this work at times. I still think there is a lot of potential to design new features for the meditation space, and I hope to work on another project like this someday.
On a more personal level, this project led me to greater comfortability with mobile app design systems, and how to take advantage of mobile devices' functionalities. This proved crucially helpful with my subsequent work designing the newest version of the Allrecipes Dinner Spinner.