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
Tools
User Experience Research
A competitive SWOT analysis helped to understand the advantages and disadvantages of Talkspace and BetterHelp.
Audience Research Objectives
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
User Personas
Following IOS Human Interface guidelines, icons used in the app are set to 40 (spotlight), 28 (default), or 20px (small).
Journey Mapping
Journey Mapping of task performed in the app.
User Flows
Wireframes
Low-Fidelity Wireframes
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.
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.
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.
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.
Affinity Mapping
An affinity map was utilized to organize users’ observations from the prototype testing, encompassing both positive and negative experiences.
Rainbow Sheet Results
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.
Issue 1
With the exception of one user, all participants encountered difficulties when attempting to locate their health results after logging into the app. They experienced obstacles or confusion during this initial task.
Suggested Change
The health result page should be redesigned to resemble a prescribed health assessment, featuring clear step-by-step instructions and personalized recommendations, guiding users towards the appropriate next steps. Additionally, prominent call-to-action buttons should be included to facilitate actions such as scheduling follow-up appointments, viewing detailed reports, or consulting specialists.
Evidence
During the initial onboarding task, 5 out of 6 participants experienced difficulties and became lost. They struggled to determine their next course of action, and even when they reached their result page, they had trouble understanding its purpose, with some mistaking it for their homepage.
Issue 2
Upon booking their appointment, users encountered a sense of being stuck as they navigated to the payment screen, which served as a dead-end, offering no clear path or further guidance.
Suggested Change
To improve the user flow, consider redesigning the appointment booking process by offering the first appointment for free. Subsequently, prompt users to sign up for membership before they can schedule their next appointment. To enhance clarity and simplicity, streamline the membership screen by removing unnecessary graphics and ensuring its intention is clearly communicated.
Evidence
Out of the six participants, four of them expressed a sense of feeling trapped on the payment screen and struggled to find an exit option. They appeared hesitant to proceed with the payment and seemed reluctant to finalize the transaction at that point.
Issue 3
Upon booking their appointment, users encountered a sense of being stuck as they navigated to the payment screen, which served as a dead-end, offering no clear path or further guidance.
Suggested Change
To enhance the user experience during the onboarding process, consider implementing back and forward buttons on the screens. These buttons will allow users to easily navigate between previous and subsequent screens, providing a more intuitive and seamless user flow.
Evidence
Feedback from half of the users indicated that the inclusion of a back button would significantly improve their navigation experience within the app. Specifically, the screens on the right side of the interface would benefit from the addition of back and forward buttons to enable users to easily navigate between different screens.
Issues Found From Testing
Issue 1
With the exception of one user, all participants encountered difficulties when attempting to locate their health results after logging into the app. They experienced obstacles or confusion during this initial task.
Suggested Change
The health result page should be redesigned to resemble a prescribed health assessment, featuring clear step-by-step instructions and personalized recommendations, guiding users towards the appropriate next steps. Additionally, prominent call-to-action buttons should be included to facilitate actions such as scheduling follow-up appointments, viewing detailed reports, or consulting specialists.
Evidence
During the initial onboarding task, 5 out of 6 participants experienced difficulties and became lost. They struggled to determine their next course of action, and even when they reached their result page, they had trouble understanding its purpose, with some mistaking it for their homepage.
Issue 2
Upon booking their appointment, users encountered a sense of being stuck as they navigated to the payment screen, which served as a dead-end, offering no clear path or further guidance.
Suggested Change
To improve the user flow, consider redesigning the appointment booking process by offering the first appointment for free. Subsequently, prompt users to sign up for membership before they can schedule their next appointment. To enhance clarity and simplicity, streamline the membership screen by removing unnecessary graphics and ensuring its intention is clearly communicated.
Evidence
Out of the six participants, four of them expressed a sense of feeling trapped on the payment screen and struggled to find an exit option. They appeared hesitant to proceed with the payment and seemed reluctant to finalize the transaction at that point.
Issue 3
Upon booking their appointment, users encountered a sense of being stuck as they navigated to the payment screen, which served as a dead-end, offering no clear path or further guidance.
Suggested Change
To enhance the user experience during the onboarding process, consider implementing back and forward buttons on the screens. These buttons will allow users to easily navigate between previous and subsequent screens, providing a more intuitive and seamless user flow.
Evidence
Feedback from half of the users indicated that the inclusion of a back button would significantly improve their navigation experience within the app. Specifically, the screens on the right side of the interface would benefit from the addition of back and forward buttons to enable users to easily navigate between different screens.
Suggested Improvements
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
Typography
Design System Language
Following IOS Human Interface guidelines, icons used in the app are set to 40 (spotlight), 28 (default), or 20px (small).
Following IOS Human Interface guidelines buttons are set to a minimum of 44 x 44px. Rules include to not overuse drop shadows.
Evidence
Out of the six participants, four of them expressed a sense of feeling trapped on the payment screen and struggled to find an exit option. They appeared hesitant to proceed with the payment and seemed reluctant to finalize the transaction at that point.
In accordance with the IOS Human Interface Guidelines, the icons employed are configured to have a size of 28 within bars. The dimensions of the tab bar are set at 375 x 83 pixels. For the large navigation bar, the dimensions are 375 x 120 pixels, while the medium one measures 375 x 83 pixels, and the small bar measures 375 x 44 pixels. Hover states are designated with the primary color.
The cards maintain a consistent corner spacing with a 10-degree curve. They align with the primary colors and overall tone of the application.
The input forms exhibit consistent and easily recognizable patterns, ensuring readability.
The straightforward date and time calendar pickers emphasize the user’s chosen selection by utilizing the primary color.
All images used are sourced from Pexels and Unsplash, presenting a collection that showcases natural elements and authentic human interactions. This selection aims to foster a sense of healing and establish a genuine human connection for the users.
Design System Language
Function Forward is a health coach and meditation app designed to assist individuals in improving their overall well-being and functionality through holistic approaches.
All users have access to our guided meditations, and there is an option to upgrade to premium for additional benefits such as connecting with a health coach, personalized diet planning, and goal setting.
Our logo conveys our unique proposition to users, emphasizing our commitment to helping individuals discover comprehensive solutions for their body and mind, enabling them to move forward and function at their best.
Do
- Ensure designs are easy to read
- Keep colors and text minimalistic
- Use easily understandable buttons
- Employ simple language
Don’t
- Avoid excessive use of dark backgrounds
- Minimize the use of drop shadows
- Refrain from using fast and extravagant animations
- Steer clear of confusing health-related jargon
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.
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
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
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
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
The light gray color of the unfilled icons poses a challenge for users in terms of visibility.
Visibility Solution
Improvements such as changing icons to iOS filled icons and using a darker gray color improved visibility.
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
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.
