portfolioiwell.jpg

iWell

Overview

iWell is a mental health app which lets people find, book and connect online with a therapist at an affordable price - anytime, anywhere.

Katie is an American expat living in Germany. She has a stressful job and would like to start talking to an English speaking mental health professional. She has a busy schedule and no time to research, find a therapist and commit to regular office therapy sessions. Additionally, in order to attend the first time appointment at an affordable price, she needs to wait for around 3 months.

iWell is born as the solution. Users can browse therapists by language, experience, specialty, years of experience, and price. They have the option to get guidance from an advisor to find the best professional for their needs and save time from searching.

Role

Lead UX Designer & Front-End Developer in a team of 4 developers.

Time

April - July 2019 @CareerFoundry

August - September 2019 @Le Wagon Coding Bootcamp

Contribution

User Research, Competitor Research, Wireframing, Usability Testing, UI Design


Challenge

How might we help Katie find a mental health professional for her needs, so she doesn’t wait a long time to attend the first session and spend too much time searching?


 
Design+Process1.jpg
 

User Research

I conducted 5 live interviews and made an online survey with 14 people in order to fully understand user behaviour, needs and motivations.

Screen Shot 2019-12-16 at 02.03.38.png

To analyse the qualitative data from the online survey and user interviews, I used sticky notes to record the most relevant quotes, behaviours, goals, and frustrations. I then created an affinity map to identify themes, patterns from the interviews and create actionable steps to address pain points and needs of users.

Competitor Analysis

iWell would be differentiating itself from the competitors by creating transparency of mental health professionals to browse and choose from and giving the option of a free trial call to the user.

Screen Shot 2019-11-28 at 15.57.20.png

User Personas

User Journey Maps & User Flows

Card Sorting & Sitemap

Based on the user journeys, I created a sitemap for iWell. To better understand if the sitemap would correspond to the needs and expectations of iWell’s target users, I conducted closed card sorting with 8 participants. Based on the learnings from the test, I updated the sitemap to ensure the users can intuitively find the information they need.

Initial Sitemap Revised Sitemap

Low-Fidelity Wireframes

In order to discover as many errors and navigational issues early on, I conducted paper prototype tests with potential users to get immediate feedback.  I sketched the first wireframes of iWell using pen and paper for the 3 main tasks.

  • Problem: Katie has a busy schedule and wants to find an English speaking professional. She has no time to research and find a therapist. In order to attend the first time appointment at an affordable price, she needs to wait for around 3 months.

    Solution 1: Talk to the bot, Solution 2: Browse & search for a mental health professional

  • Problem: Katie can’t commit to regular office therapy sessions with her busy schedule.

    Solution: Book & call the Therapist

sketching!.png

Some of the learnings from the tests were that users wanted to see as much information as possible on mental health professional’s profile in order to be able to trust them. They also wanted to have several options like video and voice call to connect with them.

Mid-Fidelity Wireframes

Based on the learnings from the user tests, I created the mid-fidelity wireframes for the main tasks. Below are some wireframes for the tasks ‘Search’, ‘Book and Call the Therapist’ and ‘Talk to the Bot’.

deneylen.png
deneylen4.png

Usability Test Results

With the mid-fidelity wireframes, iWell was ready to be tested by actual users. The goal was to test the main features of the app and identify the pain points experienced by new users interacting with the app for the first time. 6 usability tests were conducted in total - 4 in person and 2 remote.

After the usability tests, I created a rainbow spread sheet and an affinity map to organise the data and identify the priorities for the next iteration. The rainbow spreadsheet helped me to organise findings, making it easier to extract valuable user information. 

lastusability.png

Preference Test

Based on the observations and feedback about the bot from the user tests, I created a preference test on usability hub where I tested 2 versions with 11 participants – one with a friendly bot face and one with a real person face.

deneyz2.png

Results

  • The B version with a real human face performed better with a substantial difference (82% vs 18%).

  • Difference is 99.0% likely to be statistically significant.

  • “Why?” – “Seeing a real person makes me feel safer”, Because it feels like I'm talking to a real person.”

  • Based on the results, I updated my design to the new (B) version.

Iterations

tested.png

Iteration 1: New Nav Tab

Six out of eight users commented that they would not intuitively use the bot for meditation sessions and would expect a self-discovery section where they could access meditation sessions.

To solve this problem, I created a new navigation tab ‘Relax’, which includes meditation sessions and a gratitude journal, where user can browse through several meditations. I renamed ‘Advisory Bot’ as ‘Advice’ as the bot was changed to a real person face after the preference test results.

Artboard Copy 21.png

Iteration 2: Closed-Ended Questions

Users were not sure about what to answer / type to open-ended questions of the bot. They were comfortable and quick with closed-ended ones.

To solve this challenge, I made every question a closed-ended one. I also changed the bot icon to another one with the learnings from the Preference Test (B version).

Artboard Copy 23.png


Iteration 3: Optional Support Page

The first page users were landing after login / sign up was the “Advisory Bot” section. Some users mentioned talking to the bot felt mandatory as opposed to optional and they were speaking to it even though they didn’t feel very comfortable, just because it was the first page they landed on.

So I created a new page after login / sign up, giving the user the option to choose if they would need support with their search.

Style Guide

export3.png

Final Designs

Find A Licensed Professional Therapist

Artboard Copy 31.png

Get Guidance In Your Search

Artboard Copy 32.png

Book An Appointment & Connect Online With Your Therapist

Artboard Copy 33.png
 
Screen Shot 2019-12-27 at 17.54.00.png
 

Coding it!

iWell became live! I pitched my idea and my designs at the coding bootcamp Le Wagon. We coded it on web with a team of 4. There were some adjustments made to the design as we made decisions with the team and also had the chance to get feedback from the participants in the bootcamp. I presented iWell on our Demo Day at Factory Berlin. The presentation starts at 1:02:29 in the video below.

I’m grateful to have had the opportunity of developing a product from scratch - ideation, conception, design and finally the implementation.

iwell icin.jpg