Rachael Jennings
UX designer
Made with

M-PATH

The need for therapy has never been greater yet due to a lack of time or money people struggle to find the help they need. M-path was created to provide a flexible, cost-effective way to connect therapists and patients through online messaging & video chat.

Context 

Created as the final project in Career Foundry's Certified UX Designer Program. Duration 6 months.

Approach

The brief was to design a responsive web app using a mobile first approach. I used the User Centered Design Process and the principles of Design Thinking to guide me throughout the design process. 

Understand

Competitive Analysis

To check out the competition I took a close look at two similar apps; BetterHelp and Wysa. 

What BetterHelp lacked was choice - you were unable to explore the app or any of the therapists on it before signing up.

Wysa focused mostly on their AI chatbot which users felt was repetitive & cyclical.

Full competitive analysis report available here.

Observe
M-PATH

Interviews & surveys

Because of the personal and sensitive nature of therapy I decided a series of in depth interviews would be the best way to understand the needs of the target market. Before the interviews I also created an online survey to refine the interview script and gain insights in an efficient way. 

I was curious to find out what obstacles were standing in the way of people getting therapy and to see what their experiences were with similar services. 

Key Insights:

  • Users need to be able to control the length of sessions so they can adapt to their schedule.
  • They need a quick and flexible way to book sessions online
  • They want to be able to get a "feel" for the therapist, their profile should include a photo, intro and video introduction.

  • They want to be able to connect with someone instantly if necessary.

See here for a full summary with Affinity mapping.

Tools: Call recorder app on Samsung phone, Affinity Mapping, Google Forms

Point of View

User Personas

After the interviews I did several rounds of affinity mapping. This helped me to see  goals, needs and pain points of the participants. Using this info I created 3 User Personas; Laura, Camille & Babak. This helped me understand the point of view of the user.

User Journeys

I then took 2 of my personas and created User Journeys. This is a narrative device used to describe the goals, habits and behaviours of my personas as they interact with the app. It also describes their emotional state so we can see how it changes over the course of time. 

I wanted to look at how a user would sign up as a new user and book a session. I also wanted to see a user that was already signed up would book a session spontaneously. I felt these two flows were critical to the design of the app.

This really helped me to think specifically about how the users would feel performing certain actions and to design in a sensitive way that improved their overall experience.

User Journey, Laura

User Journey, Laura

User Journey, Babak

User Journey, Babak

Ideate
Sitemap following card sort 

Sitemap following card sort 

Information Architecture

The site maps and task flows helped me to decide what features and content I needed to include. The next step was organising it all in a way that felt natural and intuitive for the user.  I created a site map to organise the content. I then created an online Card Sort to figure out if these categories made sense.

 Edits:

  • Added "My" to categories that were about the user to differentiate from Therapist info
  • Made "Saved Therapists" also accessible from the "Find a Therapist" category 
  • Changed "Contact" to "Get in touch" 

Aside from some of these minor changes the testers sorted the content easily which reassured me the categories made sense and the content was easy to find.

Tools: InDesign, Optimal Sort

Prototype

Wireframes

To begin developing the design of the app I sketched low fidelity versions of the screens for mobile & desktop. This was a quick way to test multiple ideas and see what I needed to develop further.

Once I had made some decisions using dot voting I moved onto Adobe XD to create Mid Fidelity wireframes. I then created a prototype that I was able to use to test with users. 

After the first round of testing I used the feedback to refine the design and create High Fidelity Wireframes. 

Tools: Pen & grid paper, Adobe XD, Balsamiq


Low, Mid & High Fidelity Prototypes, Find & Save a Therapist:

M-PATH
M-PATH
M-PATH
Test
Affinity Mapping

Affinity Mapping

The next step was to take my Mid Fi Prototype and test it with real users

After the tests I analysed the Video and Audio recordings using Affinity Mapping. I then made any necessary changes to the Prototype. 

I also did a round of preference testing with the homescreen and invited 4 peers to review the final prototype. 

Methods:

Tools: Adobe XD, Samsung Galaxy, Macbook Pro, Post-its, pen & paper, Usability Hub

Mid Fidelity Wireframe - Homescreen

Mid Fidelity Wireframe - Homescreen

Homescreen - before testing

Issue: not enough info on Homescreen

The homescreen is the first time a user interacts with the app so it's critical that it conveys the right information in an engaging and impactful way.

During user testing 4 out of 6 participants didn’t know specifically what the service was for after reading the homepage. One participant was concerned about privacy and whether this was secure enough. I wanted to address these issues in the next iteration of the prototype.

High Fidelity Wireframe - Homescreen

High Fidelity Wireframe - Homescreen

Homescreen - after testing

I needed to present a lot of information on the homescreen without using large blocks of text. The revised design uses more descriptive copy broken up with icons, photos and illustrations to create visual interest and context.

Mid Fidelity Wireframe, Onboarding

Mid Fidelity Wireframe, Onboarding

Onboarding screens - before testing

Issue: Onboarding images too abstract

The onboarding screens help introduce the user to the app after they've decided to sign up. I had initially chosen an image of a tent in the wilderness to convey the idea that you can communicate with your therapist anywhere, even a remote location. 

Some of my testers found this too abstract so I wanted to revise this in the next version.

High Fidelity Wireframe, Onboarding

High Fidelity Wireframe, Onboarding

Revised Wireframe - Onboarding

Issue: Onboarding images too abstract

For the Hi Fi prototype I replaced these photos with illustrations that convey the message in a much more explicit way.

Final Design

Style Guide & Design Language System

After testing the prototype it was time to refine the design of the app and develop the User Interface.  Based on my user research I knew that people responded positively to design that was clean and modern and avoided cliché imagery. I wanted the design to be relatable and engaging without being too heavy and serious.

I chose a blue palette because of its associations with calmness and tranquility. Dark navy also creates a sense of trust and security. I used a dark orange as for CTA buttons as it really pops against the blues. I referenced Google's Material Guidelines to choose standard sizes for icons and buttons and also to ensure there was adequate contrast for the visually impaired.

To prepare for developer hand off I prepared a Style Guide to define the UI elements and ensure consistency across platforms. I also supplemented this with a Design Language System which delves a bit deeper into the visual rules.

M-PATH

Final Screens with UI Design

Empath, clickable prototype

Final Prototype 

After refining the UI Design I created a new clickable prototype Using Adobe XD. I was able to share this with my Tutor, Mentor & Peers to get additional feedback.


What I learned.

While developing Empath I was consistently surprised by the feedback from users, sometimes things I thought were obvious were really confusing for the users. The iterative design process brought real richness to the design as with each round of revisions I was able to see the design with new eyes. 

Giving and receiving peer reviews was also extremely helpful, my peers picked up things I missed and also had helpful suggestions. Giving feedback was also a great way to step outside my own design and sharpen my design senses. 

One thing I found challenging was organizing user interviews and user tests. it was difficult to coordinate when on a tight schedule. For future projects I'll pick a specific time and place and if a participant can't make that then try and find a back up. It's good to be accommodating but being too flexible can cost a lot of time.

Thank you.