I initially joined the team as a UX Consultant with the goal of providing advice and insights to unblock the business team and address technical debt. Upon assessment, it became evident that a significant redesign of the web application was needed. Transitioning into a more hands-on role, I redesigned the web app and developed additional product features to enrich the overall instructor experience.
Role
UX Designer + UX Consultant
Timeline
5 months (March 2022 - August 2022)
Team
UX Designer, UX Design Lead
Core responsibilities
Consulting + Design System + Responsive Web App Design
Tools
Adobe XD, Figma, FigJam
A little bit of context
The goal of the application was to give fitness instructors the tools to host classes online and manage their entire business in one platform. This need was driven by the restrictions of the pandemic which closed down all public facilities instructors would normally host classes.
BoomRoom launched its MVP in December 2021. However, the product underwent a lengthy development process and surfaced with UI inconsistencies and poor usability. This introduced additional challenges for the business team in onboarding new fitness instructors and hindered the development of new features. To tackle these issues, the company sought a more experienced designer capable of leading the initiative to establish UI consistency and chart a more effective course for incorporating new features.
I had previously contributed to the MVP that launched in 2021 and was asked to return as a UX Design Consultant to provide advice on how to improve the product. Because I was already familiar with the application, I could see the gap between the initial vision and the product that was launched.
Phase 1: Understanding the Landscape + Deciding What To Fix
To enhance the product, the initial step involved identifying current pain points and opportunities for improvement. This process started with a heuristic evaluation of the existing build, coupled with a thorough review of user interviews and team feedback.
I conducted a comprehensive evaluation of BoomRoom's usability, applying Nielsen Norman Group's "10 Usability Heuristics Applied to Complex Applications." This assessment revealed several key insights.
-
Recognizing the importance of aesthetic and minimalist design, the app showcased a clean and modern interface
-
The visibility of system status lacked clarity, particularly regarding successful class sign-ups and class availability
-
While the app allowed for user control and freedom in navigation, challenges emerged in finding scheduled classes and receiving feedback on class changes due to the absence of a notification system
-
The app did not follow consistent design patterns, contributing to usability issues
Pain points from the internal team:
-
Absence of clear design documentation, resulting in prolonged development times and communication complexities
-
Feature requests that surfaced during interviews lacked a clear implementation path
-
There was a lack of responsiveness, particularly on mobile devices
"Better organization than the current state." - Charlotte, UX Design Lead
"Make it look so simple it's unreal, like Snapchat." - Anna, Founder
"Everything should be able to be read quick, makes you feel good" - Founding Instructor
The solution
-
Establish a library of reusable UI components in Figma and transfer current documentation out of Adobe XD
-
Use the component library to redesign key pages of the application to improve usability of the web application
-
Create new features using documented components and write hand-off documentation to guide development
Phase 2: Design Exploration
A design system as the solution
Establishing a design library in Figma would allow for testing with clients before effort and money went into development, ease while collaborating on design, and would pave the way for clear communication during development and implementation. In an effort to be efficient, we decided to design the foundation or “atoms” of the design system first and planned to design the more complex UI components as we redesigned other parts of the web application.
During the first phase of the project, I had a consulting role versus a direct role in the design of the UI components we would be using. I gave a basic template for the Design Lead to work off to define the visual properties of the components and breakpoints. We would meet weekly to discuss her work and provide feedback. I provided advice on how to set up the components in the company Figma library for reuse. Eventually, I would take the creative lead in designing the components past the initial exploration.
Exploration 1: Profile Page
“My main reason for having a landing page is for people to find me that don't have an Instagram. I also like it for having more descriptions (in-depth paragraphs) about my services to further explain what I can do for them. I also have had a lot of inquiry opportunities through my contact form (super reliable leads, more reliable than dms).”
-Ashley Anthony, Founding Instructor
In response to customer feedback, the redesign of this page needed to center around providing fitness instructors with a landing page where clients could initiate their engagement with the content hosted on this platform.
Goals:
-
Provide instructors with opportunities to market their content
-
Increase brand presence of BoomRoom
-
Drive account creation and class subscription purchases
At this stage, we explored three views: Profile URL, Client View, and Instructor View. We created a view specifically tailored for new clients who did not have an account, enabling them to explore and discover the offerings of the instructor without having to login.
The following user stories drove our decision making on what kind of content would drive account creation at this step.
-
As a fitness instructor, I want to have a landing page so that clients can find me without Instagram.
-
I want my clients to be able to view detail about my business and learn about what I can do for them so I can generate more leads.
-
As a business stakeholder, I want to drive account creation and class subscription purchases so that the web application can drive revenue for the company.
Collaborating in Figma facilitated seamless work and feedback exchange in a remote setting. While shaping our concepts for content and layout, I focused on crafting new components for class cards, tags, and navigation. This approach enhanced our efficiency, ensuring a smooth workflow without encountering any blocks along the way.
Exploration 2: Class Details
Following the design of the Profile Page, we seamlessly transitioned to developing the Class Details Page. We delved into creating three distinct views to cater to the varying states of a class, ensuring a tailored presentation for clients based on whether the class was not yet live, available on-demand, or available in-person. Creating recognizable tags was key to effectively communicate these attributes to visiting clients.
Exploration 3: Dashboard
Next on the exploration list is the development of an intuitive dashboard catered to instructors. The objective was to provide instructors with a comprehensive overview of their account at a glance, enhancing their overall experience on the platform. The solution involved enabling quick access to essential actions and areas crucial for instructors, including building a class, editing their offerings, managing finances, and monitoring the number of clients. To ensure a seamless mobile experience, the design prioritized a modular stacking of blocks, ensuring accessibility and functionality across various devices. This dashboard aims to streamline the instructor's workflow, empowering them to efficiently navigate and manage key aspects of their account.
Results and Learnings
The transition from Adobe XD to Figma for design documentation played a pivotal role in enhancing communication between the design and development teams. By providing detailed development hand-off documentation in Figma, development time shortened by 50%. This shift eliminated the ambiguity that arose from relying on screenshots in Adobe XD, empowering developers with clear insights into design decisions and responsiveness requirements.
During this project, I realized the importance of clear communication in the design and development process. The initial challenges, stemming from inadequate design documentation, highlighted the need for a more seamless and collaborative workflow. If approached differently, I would have preferred to have been able to communicate directly with the developers but as a contractor working in a silo with the lead UX designer, I did not have that opportunity. Instead, I combated this through thorough hand-off guidelines in Figma.