7 Cups of Tea

 

About 7 Cups

7 Cups of Tea is an on-demand emotional health and well-being app that connects people to listeners. 

Design Goal

Today, 7 Cups of Tea has a web and mobile app product. I love their mission, but noticed their mobile app has many usability issues. I wanted to analyze the information architecture of their desktop web product and re-design their mobile app to encourage more user engagement.

My Role

I was the sole designer for an unsolicited design study and completed this over 1 week.


Quick Synopsis

Re-designing a Mobile App's Navigation

Having personally dealt with people that have mental health conditions, it was not difficult to develop a persona that captured common behaviors, goals and needs.

From there, I started breaking down the information architecture of the desktop web version by documenting all primary and secondary nav content and conducting a card sort.

The resulting prioritization helped define the navigation content of the re-designed mobile app. I created many iterations and completed design critiques to tease out usability issues.

My current prototype takes into account an extracted style guide from their desktop web product. Next steps would include building an interactive prototype and performing usability tests.


Research

active listening

Mental health, unfortunately, has become a big problem in the world. According to #PrescribeDesign, it is one of the top design challenges healthcare professionals would like to see designers work on. I started with a persona to help drive future design decisions.

 

7 Cups of Tea puts a strong focus on active listening. Each Listener must take training on active listening and compassionate communication. The premise is to let the other person talk and not impose your thoughts on them. 

How did this influence my design? It told me that it wasn't important for the Listener to know what the user wanted to talk about, but I should focus on enabling them to have a seamless conversation. 

 

Approach

Card Sorting

A card sort helped me understand what categories of information were important to a user, and which could be grouped together for navigation purposes. 

The key categories included:

  • Member actions - these range from chatting with someone to browsing a forum
  • Onboarding - this referred to all links related to logging in and signing up an account
  • Find a Listener - this referred to searching for a listener
  • Topics - this large category includes all of the different topics listeners are prepared to listen to
  • About the company - these were least important for the app

The web version of 7 Cups of Tea has many great features, but not all are available on their mobile app. I ensured these gaps were closed:

  • Users can view their profile and dashboard
  • Users can view self-guides
  • Users can apply filtering and sorting 
 

Design Decisions

Some key considerations I had to think about were:

  • Visual consistency - All buttons, headers, cards, etc have a similar look and feel so that users can manage a single mental model while using the app.
  • iOS Human Interface Guidelines -  I went with a flat navigation structure so that users have more freedom to switch between key features. I also followed guidelines with regards to the Navigation Bar, such that there is a title on each screen and the ability to go back or close out of certain screens where it made sense.
  • Style guide - I generally kept to five primary colors and two fonts to ensure the app retained the same style as the site.

Design

Hand sketches

To start, I sketched the constraints first - the navigation and tab bars which were set by the card sort themes I uncovered. Next, I dug into the secondary and tertiary content of each section to ideate on different layouts. With my persona in mind, I generally followed these guidelines to keep me focused:

  • Having a primary call to action "Connect Now" prominent and accessible at the top of appropriate screens
  • Using the standard carrot arrows for motions (e.g. next section, back, drop-down)
  • Cards to indicate secondary sections and header bars where there were groupings of sub-sections
 

Before & After prototypes


Retrospective

You Can't Go Wrong with Design Guidelines

While designing in Sketch for this project, I constantly flipped back to the iOS Human Interface Guidelines and leveraged wireframe templates to start with a solid foundation. I also leveraged Sketch's "symbol" feature to ensure consistency in patterns throughout the screens. This helped me design more productively.


*This is a design exercise. I am not affiliated with 7 Cups of Tea in any way and this is not a reflection of 7 Cups of Tea's plans or views.