eMindful

The situation

eMindful provides online mindfulness classes, with a difference: in addition to prerecorded sessions, they offer scheduled, realtime classes with live instructors. Emindful had an existing website that did not function well on mobile; their next step was to design a native app for iOS.

Our task

For the new app, the client wanted a simple, icon-based navigation menu and an improved onboarding flow. They also wanted to implement additional features such as in-class live chat (both text and audio), a way to filter class offerings, and offline access to content.

Most of eMindful's business came from corporate accounts, but one of their goals was to attract more individual subscribers. We would need to design the payment elements for that user group.

My role

As the UX designer at ATTCK, my role was firstly to create the flows for their primary user task: taking a class. How would users choose a class, register, and take the class? Next, I would work on the full set of flows, including signup, onboarding, notifications, offline interactions, and payment. I would also create a sitemap, wireframes, and a prototype.

Site audit

After discussing user needs and business goals with our clients, I started my work by doing a critique of the existing eMindul site. I found some immediate pain points that would need to be resolved:

• During registration, the user is asked for a company email address, which is confusing for individual subscribers
• The site is unclear about privacy and doesn't reassure the user about how their name/username will be used on the site—an important consideration for a mental health app where users may want anonymity
• Tooltips pop up too frequently, do not provide helpful information, and contain a "Next" button whose function is unclear
• The process to schedule and take a class requires too many steps

User flows

Next, I considered what the user would need to do in the new app. Using a combination of journey maps and user flows, I mapped out the user’s tasks and included notes on their thoughts and feelings. I identified opportunities to reduce their pain points.

There are three kinds of classes the user can choose from: on-demand classes, single-session live classes, and multisession live classes. Because the number of choices could be overwhelming, I thought the app should recommend classes based on topics and the amount of time the user had available.

I created a set of nine flows. Here are the ones for onboarding, choosing a class, taking a class, and offline interaction:

Topic of the Day

As I worked through the flows, we got some useful feedback from eMindful's partner, Aetna. They particularly liked a feature called "Topic of the Day," which is a single-session class that runs several times throughout the current day. Since the topic changes daily, they thought it would encourage users to return to the app. I decided to make "Topic of the Day" a prominent part of the homepage.

Wireframes

I designed an onboarding flow where the user would sign up and answer some questions that would help the system generate personalized recommendations. Their preferences would be matched with topics such as eating, resilience, and health. Then the user would be prompted to take a short beginner-level class and earn their first reward/badge, getting them involved in the experience right away.

The home screen would always show the "Topic of the Day." To create a bit of urgency, I indicated beneath the class title whether the class is in session right now or, if not, whether the next class starts in a few minutes or later in the day. The ability to take action quickly was important to me: The user could jump into a class immediately or register for an upcoming one.

Based on user and business goals, we created four main areas of navigation. "Train and explore" (this label was chosen by the client) would allow users to filter classes based on their interests and amount of time available. "My schedule" would display a calendar of courses for which the user has registered. The user could continue a course they began previously or get a recommendation based on their mood at that moment (for example, if they felt sleepless or anxious).

The class experience

After registering for a class, the user would receive a notification (mobile and/or in-app, depending on their preferences) 10 minutes before the class begins. Once the class begins, they can start the audio to experience the class, switch on their mic to participate in class discussion, or open a chat window to send text messages to all participants.

Payment

eMindful's users could register for free and get two passes to take classes. After that, they would be prompted to buy a subscription, which would give them unlimited access to "Topic of the Day" classes. eMindful also wanted the option to charge separately for certain classes (premium content or multiple-session classes), so I treated those as one-time, in-app purchases.

Outcome

I produced a full set of wireframes for eMindful's richly-featured iOS app. I also provided guidance to ATTCK's visual designer to produce the graphic elements. Since our timeline was short and the scope was large, I worked closely with ATTCK's developers to clarify behaviours and system actions. The final app included some additional elements, such as a meditation timer and a gratitude journal.