Revamping Neolth Assessment Experience

Overview

Over summer 2020, I interned at Neolth.com, a stress management tool for students. As part of the Design team, I worked on developing the Ideas and designs, creating design system and developer hand off for two projects;
1. Improve the "Assessment".
2. Improve students'experience with platform (Unfortunately due to NDA, I can't share much details about this project).

Project Brief

Stress has increased with the uncertainty of the COVID-19 campus closures. With Neolth, students get matched to the right behavioral care and can get instant help managing their stress. My tasks was to improve the usability of “Assessment” to help users have better access to Neolth’s support. The "Assessment" is a source asset to gather and address the student’s immediate needs.

Role

Product designer
Brand identity designer

Tools

Figma
Miro
Gitlab

Team

Sheena Patel (Product Management Intern)
Joe Henrichs (Design Intern)
Botao lu (Design Researcher)
Mansi Modi (Developer)

Timeline

4 Weeks

How might we increase the "Assessment" completion rate?

Discovery

In order to discover the improvement areas, I did the heuristic evaluation, then with the other designer, we ran some usability testing sessions with current users. In the end, we identified the major areas that need to be improved on the assessment experience:

Neolth "Assessment" old version

Since this project is NDA, I cannot share statistics publicly.

1. The number of questions (20 questions) is too long.

2. Medical language used for questions could more user-friendly.

3. Repetitive method to answer the questions.

Final outcomes

The completion rate increased by 20%.

Sneak peek to the design

RESEARCH

Competitor Audit

First, I gathered different examples of how other services are doing when it comes to the assessment process but I couldn't find too many examples with similar services (mental health) whose assessment process has aligned with user needs, so I found and analyzed other services with better strategies.

Noodle

Helps students to find the right college or graduate program.

  • A side progress bar that helps users navigate through the sections.
  • Visual content helps users to understand tasks easier.
  • Card component to helps users distinguish answers quicker.

TheoremReach

A platform connecting real audiences with the market research community through rewarded surveys.

  • Different interactive answering formats for each type of question.
  • Short description of each question to help the users answer correctly.
  • Progress indicator with the number of remaining questions.

TurboTax

Tax preparation software to file taxes online.

  • An explanations to let the user understand the reason back the question.
  • Prevent the error with the back button.
  • Consider a full-page for vital questions to not distract users.

EXPLORATION

Wireframing

In order to visualize all ideas into rough designs, I and the other designer of the team built wireframes for the main and challenging sections of the assessment. For wireframes A I identified the advantages and disadvantages of proposed ideas and tried to improve them on wireframes B, before using them for usability testing. Below I explained changes that are considered for each component of pages.

Miro Brainstorming Board

Iterations

After a few rounds of back and forth with the team we landed on version 3 as our final flow to be put through user testing.

Iteration Board

Usability Testing

In this phase, I conducted usability testing find out errors based on the users’ feedback.

Process for moderated testing;

  • Prep for the test: Create a doc and script for the moderated usability testing.
  • Recruit participants: Interviewed 5 participants.
  • Usability Testing Session (20 minutes): Walkthrough prototype and observe user behaviors and in-depth feedback.

Usability Testing

Usability Testing

Usability Testing Insights

1. Smoother experience for progress bar;

  • The overall experience of progress list is complicated.
  • The number of the questions looks unlimited to user without an indicator.
  • It is hard to figure out the navigation system of the progress bar.

2. More user-friendly language;

  • Users believe some questions need more in-detailed and easy to understand descriptions.
  • The iconography are not enough to transferring the meanings of options.

3. Wider range of response options;

  • Users wish to add their options when the answering options are limited or incorrect for them.
  • Users want more flexibility to identify themselves in gender identity, and ethnicity questions.

Design System and New Brand Logo

Before moving to the execution phase, I created a Design system to share consistent visual styles for both desktop and mobile screens to increase efficiency in the team workflow.

During this process, I also worked on Neolth’s brand identity and gave a fresh to their logo. The goal was to design a simple, calming, and gender neutral look that is consistent with the Neolth values.

Brand guideline

Neolth logo featured on Time Sq

EXECUSION

After the usability tests, I gathered the insights and applied those into my designs, then I made sure all the designs were ready to hand-off to the engineers (Functional Requirements Document prepared by the Product Manager and me).

  • Optimized Progress bar;

    In the final design, each progress bar option has its own miniature progress bar. As each progress bar option has multiple questions, the main purpose of the color indicator is to show "where the user is".

Progress Bar Process

  • Tailored Guidelines and instructions;

    • Comprehensive description considered to explain the reason back each question.
    • “How to answer” guide added to help users in answering process.
    • The simpler iconography which is more consistant with the design system.

Q/A Format

  • Efficient User Control;

    • With “Tag box” feature create a new options which are not available.
    • For the gender identity and ethnicity questions users can select “Prefer to self describe”.

Tag box

Self describe

Mobile Experince

When I worked on the design system I considered each component a responsive scale with a consistent design for mobile screens. However, some components need changes to be more accessible on mobile.

  • The progress bar has changed to a horizontal format with the consistent strategy of the indicator. The sections' names removed because of lack of space.
  • The CTA buttons have changed to a larger scale to be more accessible for mobile users.
  • The group of slider questions considered separately on pages to prevent confusion. The back and the forward buttons have added to let users navigate through them.

Conclusion

The new “Assessment” experience had a positive outcome with simpler user flow and fewer steps and friction. Through this project I explored a lot of different approaches, flows, and visual variations to accommodate our product strategy and the product goals into my design solutions. It helped me to have better communication with my teammates and convince my design solutions to the cross-functional partners.

More Projects

Exersify

Performance Tracking App

RadioFm

Live Radio App Redesign

Jurab Store

Ecommerce Website Development

Designed and Developed with 💗 by Medi Hosseini 2021