UX Case Study: Choose Again Mobile App

Image from Choose Again Facebook page

Background

This is the first team project of RED Academy UX Professional Program. This is also the first real client project where we will complete the whole design collaborating with students from the UI Program. We were very excited to work with our client, Choose Again (http://www.choose-again.com).

Our Team

In alphabetical order

Duration

3 weeks

Overview

Below is an overview of the process we went through:

Start

Given the brief, we studied it throughly and further expand our knowledge looking into Choose Again’s website.

Information gathered is stated below:

Choose Again is a Canadian registered Charity based in Vancouver. They use holistic methodologies to help people with all kinds of psychological issues, addictions and disorders. Currently, they have a daily quote feature (a quote of the day with interpretations) on the website, which is also available for email subscription.

Their services include:

  • Costa Rica Residential Centre
  • Workshops in Canada, United States and South France
  • Counselling
  • Circles

The opportunity they identify was participants were having challenges maintaining the methodologies after completing the program.

They had 7 goals for the mobile app:

Goals given in the brief from Choose Again

Unfortunately, a lot of the goals were in different directions and the main purpose of the mobile app was unclear at this stage. We needed more information to go on.

Research

We started off our research with meeting our point of contact, Eric. From the client meeting, we learned a lot of the core concepts of Choose Again and its founder, Diederik. Choose Again does not “cure” people, but helps them to reinterpret the way they think and feel. To do that, Choose Again teaches the “Six Steps to Freedom”, complemented with holistic methodologies such as meditation, yoga and breathwork.

The Six Steps to Freedom is:

The core of Choose Again

We also narrowed down the main goals of the mobile app to:

  1. Help participants to keep up with the methodologies after the programs
  2. promote Choose Again programs
  3. Increase social media engagement with the daily quotes

Then, we did a little brainstorming of potential features of the mobile app:

Brainstorming for potential features

The Must-Have features we came up with at this stage were:

  1. Calendar
  2. Community
  3. Quotes & Photography
  4. Reminder
  5. Demonstrations
  6. Story Sharing
  7. Progress Bar

With these features in mind, we did Domain Research and Competitive/Comparative Analysis. There are already a lot of health-related/meditation apps. We looked into some of them.

Competitive/Comparative Analysis

We felt the apps are fairly sophisticated and a lot of the features we brainstormed are already implemented in these apps. It was clear that our main competitive advantage would be our unique “Six Steps to Freedom”. A list of past participants were provided by Eric and his college, Claire. We went on to find out more about our users and see what they really need.

we conducted a total of 8 interviews and surveys from participants who have gone through Choose Again’s program.

Key insights were:

  • “Six Steps to Freedom” is very useful and is frequently applied
  • Struggles because the world and the people around them haven’t changed
  • Too busy to practice the methodologies
  • Keeping a gratitude journal is useful
  • Some find the daily quotes helpful
  • Will recommend Choose Again to people who can benefit from Choose Again

Planning

We started planning by creating a affinity diagram from research results:

Affinity diagram from research results

As we look at the affinity diagram, we concluded the mobile app will be for the following use cases:

  • Want to process negative emotions
  • Want to check/share workshop information
  • Want to read daily quotes on mobile

Then we created two personas to clarify who we are making the mobile app for:

Also, the scenario in which they will use the mobile app:

Then, we went back to the features and prioritize them into “Must-Have”, “Nice-to-Have” and “Not-Needed”. We started greedy and couldn’t let go of a lot of the features. For the scope of the project, as well as the focus of the app, we started to move features from “Must-Have” category to “Nice-to-Have”, and to “Not Needed”. It turned out a lot of the features are actually quite similar so we combined overlapping features. The end result looked much cleaner: 5 features to focus on.

Feature prioritization

The 5 Must-Have’s we ended up with are:

  1. Mood Tracker
  2. 365 Quotes (the daily quotes)
  3. 6 Steps Process
  4. Event Calendar
  5. Sign up (personal account)

We decided each of these features will have its own tab on the navigation bar (the bar at the bottom of the app), except that “Sign up” will be in the “Settings” tab. Now we can finally focus on the actual features and decide their exact functions.

The final navigation bar is:

  1. Quotes: shows daily quotes
  2. Services: lists all the Choose Again workshops and programs
  3. Mood: tracks mood and feelings, as well as the portal to go through the six-steps process
  4. Progress: keeps the records from the Mood feature (mood + feelings + six-steps +memo), and generates graphs (maybe analysis too?)
  5. Settings: includes account and notifications

We started to sketch and decide roughly what the screens will look like and how they flow.

Main Features

From here, we split up the work for efficiency. Each of us took 1–2 feature(s) to turn into paper prototype.

  • Laura: Mood
  • Jogpaul: Quotes + Settings
  • Me: Progress + Services

Design & Testing

Since we split up the features, we were responsible for our own assigned screens for testings and iterations too. I will mainly focus on “Progress” and “Services” from now on.

“Progress” key thoughts:

  • what information will be on the graph?
  • Should there be monthly and yearly view, or weekly view only?
  • how to organize the specific entries to avoid scrolling too much?

We decided to keep the graph simple, and shows only the curves for the moods. With the scope of the project, we also limited the graphs to weekly view. Six-steps and Memo were made into expandable bars so every item can be seen without scrolling.

The result of paper prototype for “Progress” is shown below:

Parts of “Progress” paper prototype

“Services” key thoughts:

  • how to do information architecture with Costa Rica, Workshops, Counselling, and Circles?
  • what information should be shown?
  • what should be on the filter?

Since workshops are the only ones with specific dates, they are the only one made into a list calendar with start date showing. The rest are by appointment so they are put on the top. For workshops, the starting date, location, duration, theme and capacity were shown on the list view. Three filters are available: duration, location and theme.

The result of paper prototype for “Services” is shown below:

Parts of “Services” paper prototype

Usability testings were conducted with the paper prototype. Nothing was too problematic. The way I drew was a bit misleading, e.g. a tag looks like a button. I feel those misunderstandings can be cleared up in the digital prototype so I went on digitizing in Sketch without changing much.

For consistency, we created a basic Sketch template together, specified grids, top & bottom bar spacing, and some shared symbols. Again, we digitized our own feature(s).

Another round of usability testings was done with the digitized greyscale prototype. This time, users were little confused with “+ Add New Entry” and “Edit” for “Progress” . We did have discussions about it within our group.

High-Fidelity Prototype in InVision

https://invis.io/6YAHZD2S8

Summary

Like what you read? Give Ellen Xu a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.