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.


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


  • 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


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

User Experience Research

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

competitive analysis of Talkspace appcompetitive analysis of BetterHelp app

Audience Research Objectives

  • To observe how users navigate onboarding and login pages.

  • Determine if participants understand how to search and find a guided meditation.

  • Determine if participants understand what the app is about (connecting with a health coach).

Surveys and Interviews

Six participants between the ages of 30 and 50 took part in surveys and interviews to gain insights into their interest in a comprehensive health coach application. They provided valuable feedback regarding their preferences for meditation and health coaching.

Research Insights

Research insights

User Personas

Journey Mapping

Journey Mapping of task performed in the app.


Low-Fidelity Wireframes

Low-fidelity wireframes of function forward

Rapid Prototyping

The utilization of Balsamiq for rapid prototyping played a pivotal role in the development of onboarding frames, marking the initial phase in the process of digital design.

rapid prototyping

Mid-Fidelity Wireframes

The creation of mid-fidelity wireframes using Figma established the groundwork for incorporating high-fidelity elements in subsequent stages of the design process.

mid-fidelity wireframes

High-Fidelity Prototypes and User Testing

High-Fidelity Prototype: Version 1

The inclusion of high-fidelity elements such as images, colors, text, and branded logos enhanced the previous mid-fidelity frames.

mid-fidelity wireframes

Usability Test Plan and Script

The usability testing plan encompassed the examination of the high-fidelity prototype, encompassing the objectives, extent, and logistical aspects of the testing process.

The initial round of usability testing involved six participants, comprising four men and two women, ranging in age from their early 30s to early 50s. The tests were conducted through a combination of Zoom, in-person sessions, and iOS screen sharing. The user testing was conducted between October 12th and 15th, 2020.

View Usability Test Script

Affinity Mapping

An affinity map was utilized to organize users’ observations from the prototype testing, encompassing both positive and negative experiences.

affinity map displaying quotes of users

Rainbow Sheet Results

affinity map displaying quotes of users

During the initial usability test, several issues were discovered regarding the search for health results, appointment booking, and user comprehension of the mock meditation video.

The examination of user feedback revealed difficulties in locating back buttons, with users expressing confusion and frustration. Additionally, the results page proved to be misleading and confusing for many participants, as they mistook it for their homepage. Lastly, users expected the available appointment times to be displayed within the calendar section for easy access.

Test Report

In the initial round of user testing involving six participants, various challenges were encountered by users during the process of signing up to access health results, booking appointments, and navigating the initial screen displaying a mock video.

Issues Found From Testing

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

  • Redesign the health results page

  • Revamp the user journey by offering the initial appointment at no cost, and introduce a prompt for membership sign-up when users attempt to book subsequent appointments

  • Simplify the membership/payment screen

  • Incorporate back and forward buttons for enhanced navigation

  • Redesign the calendar for booking appointments

Overall, the user testing feedback highlighted positive responses to the redesigned health results page. The inclusion of a free first appointment, simplified membership/payment screen, back and forward buttons, and a revamped calendar were well-received improvements.

Style Guide


Color theme from style guide
Typography from style guide

Design System Language

Prototype Version 2

Prototype version 2 The second prototype underwent significant redesign based on the feedback received during testing. User input prompted various improvements, including the redesign of the health results page, the sitemap, and the simplification of the payment option. Additionally, appropriate back arrows were incorporated, and the calendar page was redesigned to fit into a single screen. These enhancements adhere to the guidelines outlined in the IOS Human Interface Guidelines, resulting in a more streamlined and polished design overall.

View Prototype Version 2

Peer Feedback

Function Forward received valuable insights and feedback from industry designers during the development of the second prototype. Their input encouraged the team to streamline the videos, ensure uniformity in button alignment, and enhance overall consistency to foster user trust.

Designing for Accessibility

Our primary goal is to create a design that embraces inclusivity for all users. To achieve this, we conducted thorough testing and addressed issues related to color contrast, visibility, and gender inclusivity by implementing accessibility-focused redesigns.

Color Issue

The initial primary color did not meet the accessibility requirement of a 4.5:1 contrast ratio test.

Color Solution

After analyzing the results, we incorporated a color scheme that adheres to the accessibility standard of a 7:1 contrast ratio.

Autoplay Issue
Autoplay issue

The initial design of the first screen featured an autoplay video that aimed to explain the app. However, this design posed issues as the text within the video was not accessible, and it did not align with the first screen guidelines outlined in the IOS Human Interface Guidelines.

Autoplay Solution

The initial design of the first screen featured an autoplay video that provided an explanation of the app. However, this design presented two major issues: the text within the video lacked accessibility, and it did not adhere to the IOS Human Interface Guidelines for a first screen.

Text Issue

Text issue

The original text placement within the cards did not comply with the accessibility standards.

Text Solution

We achieved improved readability by darkening the scrim of the text background in the cards and removing the scrim from the photos.

Inclusivity Issue

Inclusivity issue

The profile icon on the bottom navigation does not align with the standards for gender-inclusive design.

Inclusivity Solution

Gender inclusivity is enhanced by replacing the profile icon with a gender-neutral representation.

Visibility Issue

Visibility issue

The light gray color of the unfilled icons poses a challenge for users in terms of visibility.

Visibility Solution

Visibility Solution

Improvements such as changing icons to iOS filled icons and using a darker gray color improved visibility.

Subtitles Issue

Subtitles issue

The video screen was overcrowded with numerous icons, including a stop button and a redundant pause button. Additionally, there were no subtitles available.

Subtitles Solution

Subtitles Solution

Video accessibility was enhanced by removing excessive icons, introducing closed captions for subtitles, and relocating video buttons below the play slider.

Polished Prototype

The final polished prototype incorporates all recommended changes.

View final prototype in Figma