Function Forward

an IOS Designed App

Overview

Function Forward is a health coach and meditation application that allows all users free access to meditations to upgrade to premium for virtual health coaching sessions, diet planning, and goal setting.

Our users are looking for solutions to their health concerns that they feel would be better solved holistically.

Problem Statement

Our users need to talk to wellness experts who can naturally solve their health issues because they haven’t found traditional medicine to fix their concerns.

We will know this to be true when users can play meditations, upgrade to premium subscriptions, and book sessions with coaches.

Role

Project: Function Forward App
Role: UX Designer and Researcher
Timeline: 10 months
Platform: IOS Mobile App
Image Credits: Pexels and Unsplash

Methods

  • Understanding the Problem
  • Competitive Analysis
  • Surveys and Interviews
  • User Research
  • User Personas
  • Journey Mapping
  • User Interviews
  • User Flows
  • Rapid Prototyping
  • Usability Testing
  • Card Sorting
  • Wireframing
  • A/B Testing
  • Mockups
  • Design Documentation
  • Design Language System
  • Designing for Accessibility

Tools

  • Balsamiq
  • Adobe Photoshop
  • Figma
  • FlowMapp
  • Usability Hub
  • Google Forms

User Centered Design Process

Discovery

Competitive Analysis

A competitive SWOT analysis helped to understand the advantages and disadvantages of Talkspace and BetterHelp.

Audience Research Objectives

  1. To observe how users navigate onboarding and login pages.
  2. Determine if participants understand how to search and find a guided meditation.
  3. Determine if participants understand what the app is about (connecting with a health coach).

Surveys and Interviews

Surveys and interviews lead to understanding interest in a holistic health coach app. Six participants aged between 30 and 50 participated and gave feedback on meditation and health coaching interests.

View script and surveys

Research Insights

Insights from surveys and interviews

User Personas

Three diversified personas were created, from ages 30 to 50.

Journey Mapping

Journey Mapping of task performed in the app.

Concepting

User Flows

Sitemap

View in detail

Low-Fidelity Wireframes

Crazy-eight sketches provided low-fidelity wireframes that allowed for free-flowing quick ideas.

Rapid Prototyping

Rapid prototyping created in Balsamiq helped form onboarding frames, leading to the first step in digital designing.

Mid-Fidelity Wireframes

Mid-fidelity wireframes, designed in Figma, set the foundation for later high-fidelity additions in the design process.

Prototyping & User Testing

High-Fidelity Prototype 1

High-fidelity added images, color, text, and logo branding to the former mid-fidelity frames.

Usability Test Plan and Script

The usability test plan led to testing for the high-fidelity prototype, including the goals, scope, and logistics of performing the testing.

Six users participated in the first round of usability testing. They included four men, two women, aged between their early 30's and early 50's—zoom, in-person conducted tests, and by screen IOS screen sharing. User testing took place between October 12th - 15th, 2020.

View test plan and script

Affinity Mapping

An affinity map charted users' observations, including positive and negative experiences during prototype testing.

Rainbow Sheet Results

The first usability test uncovered issues with finding health results, booking appointments, and users didn't understand the mock meditation video.

User observations unveiled their issues with searching for back buttons. Users thought the results page was misleading and confusing; many thought it was their homepage. Lastly, users expected available times to be under the calendar for making appointments.

Test Report

During the first user testing of six participants, users experienced issues while signing up to view health results, booking appointments, and confusion on the first screen showing a mock video.

Issue 1
All but one user got stuck on the first task — find your health results after logging in to the app. 
Level of Severity
High
Suggested Change
Redesign the user flow and layout for the health result page to look more like a prescribed health assessment with more guidance on the next steps they should take. 
Evidence
5 out of 6 participants became lost in this first step of the onboarding task. They seemed to be stuck on what to do next, and even if they reached their result page, they didn’t seem to understand what the page was; some thought it was their homepage.

Issue 2
Users felt stuck after booking their appointment, and then at a dead-end, they reached the payment screen.
Level of Severity
High
Suggested Change
Redesign the user flow to make the first appointment free, then prompt the user to sign-up for membership the next time they chose to book an appointment, but before they can schedule. Design the membership screen to be less busy and more evident on intention — take out graphic, not needed.
Evidence
Four of six participants felt trapped on the payment screen and couldn’t find a way out. They didn’t seem to want to pull the trigger and pay yet.

Issue 2
Users felt confused on navigating to previous screens.
Level of Severity
Medium
Suggested Change
Add back and forward buttons to onboarding screens.
Evidence
Half the users mentioned that a back button would help them navigate the app better. The screens to the right could use back and forward buttons to leave screens.

User Quotes:

"Was expecting to see available times under calendar."
"I'm looking for a nav bar."
"It was easy to book an appointment."
"I don't know how to get out of this screen."
"Do I have to do a username and password?"

Suggested Improvements:

  1. Redesign the health results page.
  2. Redesign the user flow to make the first appointment free; prompt the user to sign-up for membership the next time they choose to book an appointment before they can schedule.
  3. Simplify the membership/payment screen.
  4. Add back and forward buttons.
  5. Redesign the calendar for booking appointments.

A/B Testing

Ten participants tested two different screens on UsabilityHub to determine the preferred design.

Style Guide

Design System Language

Tab and Nav Bars

Following IOS Human Interface Guidelines, icons used are set to 28 in bars. Tab bar is sized to 375 x 83px. Large nav bar is 375 x 120px, medium is 375 x 83, and small is 375 x 44px. Hover states are set to primary color.

Design System Language

Function forward is an health coach and meditation app that seeks to help people start feeling and functioning better, holistically.

All users have access to our guided meditations, with an option to upgrade to premium, for access to connecting with a health coach, diet planning, and goal setting.

Our logo sends our first message to users about what makes us unique —   we help people find holistic solutions for their body and mind, so that they may fully function forward. 

Do

Make designs easy to read

Keep colors and text minimalistic

Easy to read buttons

Simple language

Don't

Don’t use too many dark backgrounds

Don’t overuse drop shadows 

No Fast and wild animations

Don’t use confusing health language

Prototype 2

Testing feedback gave way to redesigning the second prototype. User feedback led to redesigning the health results page, redesigning the sitemap, simplifying the payment option, adding appropriate back arrows, and redesigning the calendar page into one screen. These improvements align with IOS Human Interface Guidelines, creating an overall cleaner design.

Prototype 2

Peer Feedback

Industry designers gave insight and feedback for Function Forward during the second prototype.  They nudged to simplify videos, align buttons to be uniform, and improve overall consistency for user trust.

View Feedback

Designing for Accessibility

Function Forward strives for a design of inclusivity for all its users. We tested and solved issues with color contrast, visibility, and gender inclusivity by redesigning for accessibility.

Polished Prototype

The polished prototype. Take a look!

Polished Prototype
home screen on ios 11
meditation screen on iphone 11
meditation screen with captions
Interested in working together?
Say Hello