Fini
Community Feature Design & Evaluation
Overview
Proposed and led the design of the Community feature that connects the current B2C product with the upcoming B2B Creator Ecosystem, enabling collaboration between fitness creators and brands while boosting engagement and retention among 2,400+ active users.
Applied WCAG accessibility guidelines and maintained a consistent design system, enhancing the user experience for individuals with disabilities.
Role
Product UIX Designer
Tools
Figma
Time
5 weeks
– 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 Statement
"How might we create a space that enables creators and opportunity providers to showcase their work and facilitate the interaction and collaboration?"
Process Overview
– Phase 01 - Analysis –
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 looking for qualified wellness professionals to improve their services
(e.g., event organizers, wellness retreats, hotels, fitness centers).
Members
Individuals seeking wellness challenges and events.
User Persona
Building on the previous UX researcher’s interview records, I created personas to better understand target users’ needs, behaviors, and goals.
↑ Partial demonstration of our work.
User Journey Map
Creating User Journey Maps for different target user helps us better identify users' pain points, needs, and potential opportunities.
↑ Partial demonstration of our work.
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:
– Phase 02 - 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.
– Phase 03 - Testing & Iteration –
Usability Testing
To further examine the functionality of the feature, I pinpointed the 5 most frequently used functions and designed a comprehensive Usability Test with 5 tasks to assess these features.
↑ This is a partial demonstration of our work.
Design Iterations
According to the feedback from the usability testing, we gained helpful feedback and then iterated design based on it.
Here are 4 most important design improvements:
1
Add instructions to guide users
Problem
Some participants were confused by the function of each page.
Solution
Adding instructional text helped clarify this.
2
Improve the user experience on pages with many items
Problem
Some pages may contain numerous items, making it difficult for users to find their target.
Solution
Added a search function on the Discover page to help users find their targets more easily.
Made the comment input box fixed at the bottom of the page.
3
Modify the access for the Community option
Problem
The button to open the Community option was hard for participants to notice,resulting in the highest failure rate for this task.
Solution
Added an icon to indicate that the button is clickable.
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.
4
Include a Draft Function
Problem
Users may need more time to decide whether they want to become a Fini member. In the first version of the prototype, if a user declines membership, the community settings they have created are discarded, which can lead to frustration.
Solution
Add a draft function that allows users to temporarily save their community settings.
Additionally, users can choose to unpublish their community, and any unpublished community will automatically be saved as a draft.
