Counselly

UX Design Project

 

Role


UX Designer

UX Researcher

UI Designer

Overview

Counselly is a mobile application that helps connect people with mental health needs to professionals, experts and therapists.

Responsibility

Research, Information architecture, User flows, Wireframes, User, Experience Design, Usability testing

This is a project from my UX Immersion course at Career Foundry. 

Hero-2-2-phones-square
connecting people to professionals and therapists

Design Process


Discover and Empathize - What's the problem? Define the challenge and explore human context.

Define - What is it important?  Research, observe and understand.

Develop and Ideate - Brainstorm ideas good and bad.  Explore possible solutions.

Prototype, test and deliver - How can we create it?  Start creating and experimenting.  Refine, test and launch.

 

Problem Statement

A person who is overwhelmed by the task of finding and evaluating a mental health professional needs simple guidance from a trusted source to unlock a life of healthy balance.

 

magnus-olsson-KAzgxInZXMo-unsplash

Solution

A solution is to create a mobile app where you research and evaluate expert professionals in the mental health field.  Simply browse the topic and connect with verified professional therapists via messaging or schedule a video call.

Solution

A solution is to create a mobile app where you research and evaluate expert professionals in the mental health field.  Simply browse the topic and connect with verified professional therapists via messaging or schedule a video call.

Discovery

In this phase, I performed both user surveys and in-person interviews.  Surveys were created through forms and blasted out to various groups of people.  I met with people in person and also through video conference calls.

Discovery

In this phase, I performed both user surveys and in-person interviews.  Surveys were created through forms and blasted out to various groups of people.  I met with people in person and also through video conference calls.

Do you or someone you know have a mental health condition?  92.9% of people surveyed answered yes.
Reg-Hero-1920×1080-Copy-1
Reg-Hero-1920×1080-Copy-2-1
Would you use an app on your mobile device to learn more about mental health? 85.7% of people said they would.

Usability Testing and Affinity Mapping

Through the discovery phase of interviews and testing, I collected various data including problematic errors, negative and positive quotes, erros and general observations. 

 

Usability Testing and Affinity Mapping

Through the discovery phase of interviews and testing, I collected various data including problematic errors, negative and positive quotes, erros and general observations. 

 

IMG_4730
IMG_4732
IMG_4734
IMG_4735

Personas

Persona 3 Leonard
Persona 2 Penny

Low Fidelity Prototypes

 I started with a sharpie and paper sketching out what a possible flow would be for searching and scheduling a profeesional.  I worked on the onboarding and highlighted the key features.

Lo FiMobile Search 1
Lo Fi Sketches2

High Fidelity Prototypes

Moving on from wireframes and low fidelity mocks, I chose my color palette, fonts and icons.  

Splash
Login
Home
Search with keys
Search Results
Professional Profile Page
Send Message to Professional
Send Message – Filled out
Rate Video Call Submit – Olivia
Book a call

User Testing and Design Collaboration

After some feedback and testing, I got some good pointers.  I failed on the colors because they did not meet the WCAG compliance.  I adjusted colors, fine tuned the navigation and buttons and cleaned up the text.

Iterations Colors
Iterations Login
Iterations Appointments
Iterations Home
Iterations Review
Iterations Text On Profile Page

Mockup Journey

I started on paper with no idea where I would end up.  As you can see, I had some drastic changes along the way.

Mock Journey Home Screen
Mock Journey Search Results
Mock Journey Schedule

Design Language System

Here are some colors, elements, icons and typography used in the app.  I also included some imagery for inspiration during the creation process.
Color Pallate
UI
Imagery

Final Design Solutions

Main Hero

Retrospective and Lessons Learned

Though I was able to get a hand full of users to test, it wouldn't hurt to have more.  It was good to get feedback from users that span across different industries, demographics and walks of life.

Not speaking too much during an in-person usability test is ok.  I need to work on letting people figure things out and struggle a little bit.

I changed the UI and colors a few times due to accessibility.  I was pretty set on that green but it did not meet WCAG compliance.  I could have check colors earlier in the process.

Selected Works

MOPOUX / UI Design

Chow TimeVoice User Interface Design

AbidePhotography

Tiny PrintsCommercial Photography

Fong Brothers PrintingBranding Design