Function Forward
an IOS Designed App
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.
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
A competitive SWOT analysis helped to understand the advantages and disadvantages of Talkspace and BetterHelp.
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
Insights from surveys and interviews
Three diversified personas were created, from ages 30 to 50.
Journey Mapping of task performed in the app.
.svg)
Crazy-eight sketches provided low-fidelity wireframes that allowed for free-flowing quick ideas.
Rapid prototyping created in Balsamiq helped form onboarding frames, leading to the first step in digital designing.
Mid-fidelity wireframes, designed in Figma, set the foundation for later high-fidelity additions in the design process.
High-fidelity added images, color, text, and logo branding to the former mid-fidelity frames.
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
An affinity map charted users' observations, including positive and negative experiences during prototype testing.
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.
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.
"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?"
Ten participants tested two different screens on UsabilityHub to determine the preferred design.
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.
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.
Cards hold consistent corner spacing of a 10 degree curve. They match the primary colors and tone of the app.
Input forms contain predictable patterns and are easy to read.
Simple date and time calendar pickers highlight the users' selection in the primary color.
All images are from Pexels and Unsplash. They embody natural elements and real people to connect users with a sense of healing and human connection.
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
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.
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
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.
Issue
The original primary color didn't pass a 4:5:1 accessibility test, as tested in Stark.
Solution
Based on Stark's results, we implemented a color that met a ratio of 7:61:1 standard for accessibility.
Issue
The original first screen contained an autoplay video that explained the app. Problems with this design were that text wasn't accessible, and it didn't align with IOS Human Interface Guidelines for a first screen.
Solution
The original first screen contained an autoplay video that explained the app. Problems with this design were that text wasn't accessible, and it didn't align with IOS Human Interface Guidelines for a first screen.
Issue:
The original text placed within cards didn't meet accessibility standards.
Solution:
Improved readability was obtained by darkening the scrim of the text background in the cards, and taking off the scrim in the photos.
Issue
The profile icon didn't meet standards for gender inclusive design.
Solution
Gender inclusivity is improved by changing the profile to a gender neutral icon.
Issue
The unfilled icons in a light gray color make it difficult for users to view.
Solution
Improvements such as changing icons to IOS filled icons and in a darker gray improves visibility.
Issue
There are too many icons on this video screen, including a stop button and a redundant pause button. There are also no subtitles.
Solution
Video accessibility improves by taking out busy icons, adding a closed caption for subtitles, and placing video buttons under the play slider.
The polished prototype. Take a look!
Polished Prototype
