Sidyum
AI/ML Digital platform for fitness professionals and influencers to offer online fitness training.
Overview
Sidyum is a digital platform where fitness meets technology. Using AI/ML, users can now follow exercises while receiving feedback on the accuracy and safety of their movements, access a marketplace where they can find a wide variety of classes, and access metrics of their progress. On the other hand, fitness trainers can create training sessions, interact individually with each participant, create affiliate programs, and receive payments while building their communities.
Process
Heuristic Evaluation
Competitive Analysis
User Journeys
Style Guide
Wireframes
Prototype
User Testing
Role
UX/UI Designer in a team of five designers and one PM
Tools
Figma
FigJam
Zoom
Slack
Google Drive
Usertesting.com
Problem
The client sought to evaluate a partially developed web app and improve the user experience, site architecture, and UI to ensure a seamless user experience for the instructors and their clients.
Solution
Our team redesigned and restructured the website based on the results of our previous heuristic evaluation, competitive analysis, and iterations to produce a prototype to conduct user testing. Our design aimed to:
Improving consistency and usability both for trainers and their clients.
Enhance accessibility and information architecture to support intuitive navigation.
Ensuring a seamless and clear developer handoff.
Duration
6 Weeks
Team Kick-Off Meeting
My team and I created a list of questions to understand better the client’s goal and the web app functionalities, especially the AI/ML component. From the meeting, we could understand the flow they were trying to create for both trainers and their clients and each feature they wanted to develop.
We expressed to our client the importance of changing the current interface to a dashboard to support quicker and clearer access to all the features and to split functionalities according to the user persona since each user has different needs. Ultimately, we were all aligned regarding expectations and the next steps.
Competitive Analysis
Through secondary research, we evaluated several competitors, especially their functionalities and user interfaces, to better understand the industry and note the best practices. Additionally, it was important for us to determine opportunities where our client could be differentiated from its competitors.
Heuristic Evaluation
Guided by the usability heuristics developed by Jacob Nielsen, each member of my team conducted a thorough heuristic analysis of the Sidyum website. Some of the major problems we encountered were:
Inconsistencies across several elements of design
Failure to comply with WCAG 2.0 accessibility guidelines
Absence of confirmation screens
The navigation was confusing, and there were several dead ends. There was no main navigation hub.
Use of confusing language and call to actions
User Stories
Since the project’s scope was broader, we devised several user stories for instructors and for the clients. We sorted them into High, Medium, and Low priority to establish, along with the client, the MVP so we could clarify each user flow and begin our ideation process. Then, we grouped the high priority stories into the most important user flows.
Site Maps
To keep the platform organized, we decided to create two site maps. One for the instructors and the second one for their clients. This helped us organize the information architecture and ensure the main features were easily accessed.
User Flows
For the instructors, we identified 21 user flows grouped into four main categories: Sign Up/Onboarding and Profile, Challenges, Payments, and Features. For their clients, there were 14 user flows divided into the same four categories as the instructors, plus the landing page. Each team member became responsible for one of the categories and would design wireframes for each user persona. I chose the Challenges.
Sketching and Iterations
Three of us began the Lo-Fi Wireframe iterations so the client could choose a graphic line. I sketched several ideas and created a Lo-Fi Wireframe the one I liked the most to present as my proposal.
My design was selected, and I volunteered to create all the components to ensure consistency across all the wireframe designs. I also supported my teammates in reviewing their screens to verify we were all aligned in graphic style.
Lo-Fi Wireframes
My role for the Lo-Fi Wireframe was to design all the screens for the Challenges for trainers and their client’s side. My biggest takeaway from the research and the conversations with the client was the importance of creating a seamless flow, where the users were aware of each step in the process and could adjust the information quickly.
Considering that the initial information architecture and user flow were confusing and that there were two types of users, I approached my design with a focus on usability by making the following changes:
Including a step indicator, so users can see where they are in the challenge creation process.
Enable clients to favorite and share challenges without having to open the card.
Incorporating the routine creation into the challenge flow to avoid jumping between screens.
Redesigning the forms to enhance the user flow.
Giving trainers the freedom to edit, duplicate or delete routines and challenges.
Creating a session schedule with a responsive design in mind, removing drag-and-drop options.
Giving the trainers the possibility to save an incomplete form or delete the process.
Generating confirmation modals, so users could be informed their changes were rightly processed.
Style Guide
For the creation of the style guide, I partnered with the team lead to create the color palette, organize the UI elements and establish the rules for the logo so we could tackle the Hi-Fi wireframes in a cohesive and articulated way.
UI Iterations
Like Low-Fidelity iterations, three of us volunteered to iterate the landing page. Based on the competitive analysis, I took some key UI elements and incorporated them into my design. However, I tried to create a more sober aesthetic that would stand out from the competition.
High Fidelity Wireframes
After sharing the three iterations with the client, he chose one he considered best for Sidyum. With this feedback, we updated all the Lo-Fi components and elevated the design to create the 79 high-fidelity screens, ensuring consistency throughout all the designs.
Prototype
Using Figma, we worked as a team to develop two rapid prototypes for each type of user, with 10 flows for the clients and 9 for the instructors. We reviewed each interaction to ensure every detail was accurate enough for user testing and developer hand-off.
User Testing
Given the time and budget restraints, we conducted 11 unmoderated user tests to help us identify any issues and learn about the first impressions of the two prototypes. We gathered nearly 3 hours of recordings, in which users were assigned to perform a series of tasks, and they would share their impressions of every flow out loud.
Test Results
After evaluating the 11 user tests, we found that users successfully completed most of the tasks quickly and expressed that the platform was intuitive and straightforward. The design feedback was positive, and many described the UI as clean. We also reviewed pain points and identified five clear issues for the Instructor’s prototype and seven for the client’s platform.
Based on the Instructor’s prototype user test results, I realized it was important to separate the Workout creation from the process of creating a Challenge. After researching a simple way to link both flows, I designed a specific search engine where instructors could search for a Workout inside the Challenge flow.
Developer Hand-Off
Finally, we carefully annotated every screen to ensure clear communication with the developer. We explained how each flow and component works. As part of the developer hand-off process, we also provided the client with the style guide and prototype to guarantee proper implementation.
Biggest Challenge
Something I love about big challenges is their power to ignite my creativity. The client had a fantastic product in this opportunity, but the information was scattered and complex, creating confusion. I relied on the research and my organizational skills to sort out all the elements and reorganize them in a user-friendly flow that would satisfy the user’s needs every step of the way.
Biggest Success
The highlight of this project was the teamwork. I had the wonderful opportunity to work with passionate UX/UI designers to create this amazing web app. Our team had a great dynamic and strong communication that allowed us to appeal to our individual strengths to contribute to the project’s success. With my team’s trust in my design skills, I enjoyed pushing my limits with component creation and setting the graphic tone for the project.