Sidyum

AI/ML Digital platform for fitness professionals and influencers to offer online fitness training.

Image alt tag

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

Discovery & Research
Sidyum - SaaS Product

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.

Sidyum - SaaS Product

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

Ideation
Sidyum - SaaS Product

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.

Sidyum - SaaS Product

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. 

Sidyum - SaaS Product

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.

Sidyum - SaaS Product

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.

Design

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:

  1. Including a step indicator, so users can see where they are in the challenge creation process.

  2. Enable clients to favorite and share challenges without having to open the card. 

  3. Incorporating the routine creation into the challenge flow to avoid jumping between screens.

  4. Redesigning the forms to enhance the user flow.

  5. Giving trainers the freedom to edit, duplicate or delete routines and challenges.

  6. Creating a session schedule with a responsive design in mind, removing drag-and-drop options. 

  7. Giving the trainers the possibility to save an incomplete form or delete the process.

  8. 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.

Sidyum - SaaS Product

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.

Testing

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 and Developer Hand-Off
Sidyum - SaaS Product

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.

Sidyum - SaaS Product

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.

Reflections

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.