Cross-Platform Design for Fitness Appointment Service
Product Design | 17FIT
.jpg)
Overview
17FIT is a SaaS service offering checkout, management and analytics solutions for the sports and beauty industry, including gyms, bouldering gyms, yoga studios, and hair and nail studios. For consumers, we provide both a website and an app platform for booking and searching services.
Due to the confidential policy, the content regarding features will not be very specific or detailed.
My role
🎨 Product designer
Team
1 Manager 1 Product designer ⭢ 1 Product designer with 2~3 project managers
Users : B2B2C
- Consumer : Members of studio
- Business : Staffs or Owner in the studio
Responsibility
Maintain and deliver design across multiple platforms
At 17FIT, we offer products across multiple platforms. We also have mobile apps and support for the Line app browser. Maintaining consistent designs across these platforms is a challenging. We have different UI frameworks for each platform, such as Tailwind and Mobiscroll. Also we have to notice and follow the design guideline for iOS and Android APP.
To make the communication easier, I created design tokens and worked with front-end developers to ensure it's adaptable and useful, with everything uploaded to Storybook as a single source of truth. Recently, I've started incorporating Figma variables into our design system to enhance flexibility and save time.
To make the communication easier, I created design tokens and worked with front-end developers to ensure it's adaptable and useful, with everything uploaded to Storybook as a single source of truth. Recently, I've started incorporating Figma variables into our design system to enhance flexibility and save time.
.png)
.png)
Plus+: Lottie animation (For B2C)
Reduce drop-off rates during the purchasing process. Lottie animations are a great way to reduce user anxiety and frustration during waiting times and failed booking attempts. These animations were created and implemented directly using a Figma plugin, reducing both development costs and time.
Analyze information and translate it into design
When we kick off a task, we start by clarifying the goal and defining the scope of what we will deliver. This is crucial because we need to consider the time constraints of our quality assurance engineers and developers. Clear communication is essential to ensure everyone is aligned and working towards the same goal. Each decision should be considered valuable.
In many cases, our design system is highly beneficial, improving the usability significantly. We've also invented new components to enhance usability, particularly in our SaaS offerings. Through this collaborative approach, we reduced communication costs with the development team and cut the design delivery time by 50%.
For more complex tasks, like renewing the homepage or adding promotional spaces, we adapted the design researches. We mainly used qualitative data such as field study, issue cards, feedback survey and collecting screen recordings to identify pain points and make assumptions.
.png)
For example, we weren't sure whether an agenda list or a date view would be more helpful for users. We initially went with the agenda list, but feedback from app reviews suggested otherwise. Upon further investigation, heatmaps showed that users were more likely to click the date view button. Additionally, screen recordings revealed that users preferred extracting dates, so providing a calendar to select would better meet their needs.
.png)
Fostering Design Culture and Enhancing UX Maturity
Before I joined, our team had low UX maturity and lacked user-centered thinking. By building a design system, we significantly improved our design workflow. However, we still faced challenges due to the lack of user-centered goals, leading to functional but inconsistent and inefficient UX work.
To address this, my coworkers and I focused on enhancing our design culture. I used the UX maturity chart from the Nielsen Norman Group to evaluate and improve our UX maturity. I shared this information with the team and organized UX sharing events to keep everyone engaged.
What we've done so far:
✅ Stage 3
✅ UX repository
✅ UX insight sharing
✅ Design system
To address this, my coworkers and I focused on enhancing our design culture. I used the UX maturity chart from the Nielsen Norman Group to evaluate and improve our UX maturity. I shared this information with the team and organized UX sharing events to keep everyone engaged.
What we've done so far:
✅ Stage 3
✅ UX repository
✅ UX insight sharing
✅ Design system
Milestones
🗿 Explore | B2C
We redesigned the search experience. The original "class page" was inefficient, with an unintuitive interface that made it difficult for users to find the courses they wanted. We optimized the entire product experience, providing users with more relevant search results, while aligning with business goals and incorporating promotional information.
We also applied the design to our app. In addition to introducing a new exploration feature, we improved the app’s navigation functionality (confidential details).
We redesigned the search experience. The original "class page" was inefficient, with an unintuitive interface that made it difficult for users to find the courses they wanted. We optimized the entire product experience, providing users with more relevant search results, while aligning with business goals and incorporating promotional information.
We also applied the design to our app. In addition to introducing a new exploration feature, we improved the app’s navigation functionality (confidential details).
.png)
.png)
🗿 Customer Analysis Dashboard | B2B
This feature stems from business needs to enhance product competitiveness. The Studio can use this dashboard to understand the activity level and value of individual customers for sales purposes. We assume these useful datas to present. Considerations include data visualization, readability, iteration, and component creation.
🗿 Sign up/ Log in | B2C
The request was to add a user account field to the login form. After clarifying the goal, we changed the single-page form to a step-by-step process to reduce the amount of data on one page, improve error-checking accuracy, and ensure correct data entry. The advantage of the new design is that we have made the login a standalone service, optimizing both the user experience and visual appeal.
.png)
🗿 Homepage for Studio | B2B2C
Initially, the business information was not comprehensive. We extracted data related to system and venue information and researched the requirements to determine if they should be included in the feature. Currently, it displays activity information, venue introduction, social media, and more.
.png)
Learnings
Delivering design efficiently across multiple platforms is a significant challenge. Design systems and design tokens have been instrumental in this process. Never underestimate your impact—sometimes, bottom-up changes can help the design team secure more resources and increase its influence. Even as a one-person team, we can still scale and improve the design culture.
Wanna learn about this project?
Please contact me if you want to learn more for recruiting.
email me
Next design system