Overview
Introduction
User Research
UX & UI Design
Usability Testing
Fini
Application Feature Design & Evaluation
ROLE
Product UIX Designer
TEAM
1 UX Researcher
1 Product Manager
3 Developers
TIMELINE
May 2024 – Sep 2024
TOOLS
Figma, FigJam
SUMMARY
I proposed and led the design of the Community feature, which connects the current B2C product with the upcoming B2B Creator Ecosystem, enabling collaboration between fitness creators and brands.
I also applied WCAG accessibility guidelines and maintained a consistent design system, enhancing the user experience for individuals with disabilities while ensuring aesthetic consistency.
This feature is currently under development and is estimated to boost engagement and retention among 2,400+ active users.
Introduction
BACKGROUND
Fini is a health tech platform that helps individuals achieve their physical and mental health goals through personalized wellness solutions and a supportive community.
Fini is expanding its services to develop a B2B creator ecosystem: an all-in-one solution that helps health and wellness creators and opportunity providers run successful businesses effortlessly.
PROBLEM
"How might we create a space that enables creators and opportunity providers to showcase their work and facilitate the interaction and collaboration?"
GOAL
Design a feature that facilitates interaction between creators and opportunity providers.
PROCESS
User Research
Upon joining Fini’s design team, I updated and organized existing research data, identified pain points and opportunities, and explored how these insights could support the company's goal of expanding its services for wellness content creators.
TARGET AUDIENCE
Creators and Members are the current target users of Fini’s application.
Creators and Opportunity Providers are the target users Fini aims to focus on when designing the creator ecosystem.
Creators
Health and wellness professionals.
(e.g., yoga instructors, nutritionists, mindfulness coaches).
Opportunity Providers
Organizations, businesses, and individuals seeking qualified wellness professionals to enhance their services.
(e.g., event organizers, wellness retreats, hotels, fitness centers).
Members
Individuals seeking wellness challenges and events.
PERSONA
Building on the previous UX researcher’s interview records, I created personas to better understand target users’ needs, behaviors, and goals.
USER JOURNEY MAP
Creating User Journey Maps for different target user helps us better identify users' pain points, needs, and potential opportunities.
BRAINSTORMING
Fini's Current Service Structure
(under construction)
❓
What challenges is our target audience facing?
Creators
Finding partners and collaborators
Increasing exposure for their services and products
Building a sustainable member base
Organizing events more conveniently
(e.g., easier methods for finding suitable hosting spaces)
Opportunity Providers
Increasing exposure for their services and products
Finding partners and collaborators
Members
Discovering interesting events and challenges to participate in
Finding inspiring creators
Enhancing both mental and physical wellness
📌
What is our goal?
The main challenge we identified during the analysis process is the difficulty wellness content creators face in reaching out to resources, building connections, and organizing events to enhance their visibility—especially since they are often busy with their primary businesses (e.g., coaching, training, etc.). This cumbersome process would greatly benefit from a tool designed to streamline it.
Our long-term goal for Fini is to not only strengthen the existing product but also expand the service's scope, facilitating interactions between creators and opportunity providers, allowing them to connect and organize events more easily. This is where our initial inspiration for the "Creator Ecosystem" originates.
💡
How might we achieve our goal?
To envision a new version of Fini, I facilitated several brainstorming sessions with the design team. This is the blueprint of the service structure we plan to offer in the future Fini.
Future Fini
I spearheaded the concept for the Community feature and convinced my team to prioritize it for development for 2 main reasons:
The community feature bridges the gap between the current Fini app and the future collaboration hub, providing a platform for creators and opportunity providers to showcase their work.
Launching the community feature allows us to gather relevant data and observe interactions, which will benefit the design of the collaboration hub.
💭
What will the interaction look like?
The following graph demonstrates how the Community feature and Collaboration Hub will interact with our users:
UX & UI Design
WIREFRAMING
Creating a wireframe visualizes the layout and functionality, enabling early feedback and iterative improvements.
COLOR PALETTE & ACCESSIBILITY
Upon joining the Fini team, I conducted a thorough UI/UX audit and identified inconsistent color usage as a major issue:
The app used varied colors for elements at the same hierarchy level, and some features allowed user customization. While this added energy and flexibility, it compromised visual consistency.
Minimal use of brand colors (black and yellow) weakened brand identity.
Poor color contrast in many areas failed to meet WCAG guidelines, reducing accessibility.
This is a partial screenshot
of the current Fini app →
Therefore, when designing this prototype, I tested various color combinations to identify the best options for both aesthetics and usability.
I use this color contrast checker from Coolors to ensure the combination fits the WCAG 2.2 AA standards ↓
This is the final color palette I've applied to the prototype ↓
This new color palette will not only be applied to the specific feature but will also be implemented across the entire app in the near future.
HIGH-FIDELITY PROTOTYPE
Moving forward with the development of a high-fidelity prototype enables us to test realistic interactions, visuals, and functionality, ensuring a user-centered design before final implementation.
Usability Testing
PREPARATION
To evaluate the feature’s functionality, I identified the 5 most frequently used functions and designed a usability test with 5 corresponding tasks.
Join a community
Check the latest post and leave a comment
Delete the comment and leave the community
Create a community
Create a post
I conducted the test with 6 participants, each session lasting 30 minutes.
KEY INSIGHTS
Navigation Confusion
Users confused between Home page vs Discover page
“I wasn’t sure what the difference is between the Home page and the Discover page; it’s a little bit confusing.”
“On the Discover page, there is no search function. While the filter for yoga is helpful, having the ability to search would be better.”
Commenting Experience
Comment box unclear and buried.
“The comment box is also white, making it less intuitive to realize I need to type there.”
“If there are a hundred comments, it would be hard to find the input area. Placing it near the header would make it easier.”
Leaving a Community - Only 40% succeeded
Most users could not locate leave button.
“I don’t know how to leave the community!”
“Having a chip-style button (‘Join’ → ‘Unjoin’) would be better.”
Community Creation
Users didn’t expect “Create Community” in Account.
“I expected the create community function on the Home page, not hidden in Account.”
“A pop-up would be clearer than just text above the image.”
DESIGN ITERATIONS
Based on the feedback from usability testing, we iterated on the redesign to improve navigation and help users move more smoothly across the application.
Here are 4 most important design improvements:
Add clear instructions to help users distinguish between pages
Problem:
Some participants were confused by the function of each page.
Redesign:
Adding instructional text helped clarify this.
Improve navigation on pages with many items
Problem:
Some pages contain numerous items, making it hard for users to locate their targets.
Redesign:
Made the comment input box fixed at the bottom of the page.
Redesign:
Added a search function on the Discover page to help users find their targets more easily.
Modify the access for the Community option
Redesign:
Since most participants scroll to the bottom of the page during the task, I also added another button with same function at the bottom of the page.
Redesign:
Added an icon to indicate that the button is clickable.
Problem:
The button to access Community options (e.g., Report Community, Leave Community) was difficult for participants to notice, leading to the highest task failure rate (40%).
Include a Draft Function
Redesign:
Users can choose to unpublish their community, and any unpublished community will automatically be saved as a draft.
Redesign:
Add a draft function that allows users to temporarily save their community settings.
