iSpin
Client: iSpin (Design Lab)
Industry: Fitness
My Role: UX/UI Designer & Researcher
Conceptual product design work for a former spin studio that needed a total rebrand and a more navigable website.
My Deliverables
I worked on the full UX/UI process from research to full rebranding and design to prototyping and user testing.
User research - Information Architecture - Wireframing - UI Design - User Testing
The Challenge
I created a responsive website for a local cycling studio, iSpin, that wanted to refresh their branding and digital presence for their fifth anniversary to gain new members and create a more interactive community for their current ones. The project included a full re-brand, including a new logo, typography, and color palette to reflect the high-energy of the studio and workout, as well as a mock-up of a responsive homepage and prototype.
The Research
To dig further into the target demographic and learn more about their wants, needs, and pain-points, the following approaches were chosen:
Competitor Analysis: unveiling the strengths & weaknesses of both the directly competitive local studios as well as the more well known multi-location studios.
Competitors Main Strengths: Simple Navigation, Comprehensive About Sections, Filters for Class Schedules, Incorporation of Music and Video, Visible Promotions, Multiple Ways to Book Classes
Competitor Main Weaknesses: Local Studios Have Very Basic Info, No Way to Purchase Merchandise, Not Many Visuals, No Social Streaming, Some Local Studios Use Third Party Sites to Book
User Interviews and Surveys: gaining a more personal insight to the target consumer by both 1-1 interviews and online surveys with current and potential members in the local community. There was a total of 10 participants, both men and women 25-40 years old, who all booked a fitness class through a studio’s website within the last week.
Main Needs/Wants: Live Chat Function, Detailed & Concise “What to Expect” Section, Instructor Bios with Class and Music Style, Class Schedules with Filters, Branded Merchandise Shop
Main Pain-points: Difficulties Modifying Bookings, Lack of Exciting Visuals, Complex/Long Check-Outs and Bookings, Lack of Information on Instructors and Classes, Non-Flexible Memberships
The user research uncovered that the target demographic’s main needs from a studio’s website were to find detailed information, including a comprehensive run-down on what to expect, instructors bios and class styles/music, and class descriptions, as well as a more personal way to make modifications or cancel classes. To further humanize the research data, a persona, empathy map, and story board were created to embody the wants, needs, and pain points of the main user and the decisions they may make.
The UX
Following the identification of the main persona, the next step was to define the high-level product requirements of the main pages as well as organize the information via the site map. After having a clear picture of the site’s structure, the task and user flows were created to understand the interactions the user will have while navigating the site.
High Level Requirements 1 Homepage that includes a detailed “what to expect” section and live chat 2 Instructors Page that includes a quick view summary 3 Instructor Bio Pages that show their class style, current music playlist, & class schedule 4 Class Schedule page that includes filter by time, instructor, and class style 5 Buy Class/Series Page that shows single-class, multi-class, or membership packages 6 Cart Page that has autofill if logged in 7 Review Order Page 8 Seat Map Page showing open seats 9 Booking Confirmation page with bike number and option to modify, cancel, or live chat
The next step once the interactions were mapped out was to create the low-fidelity wireframes of the main pages of the flow. To show the responsive nature of the website, the homepage was created at different screen sizes including desktop, tablet, and mobile.
The Design
With the beginnings of the User Experience fleshed out, the focus was then put in to refreshing the brand and encompass the high-energy style of their studio classes. A style guide was created including new logo lock-ups representing the merge between spin cycling and music, color palette, and typography. Once completed, this branding was then translated to the UI Kit.
The high-fidelity wireframes were then created to show both the responsive homepage as well as eall other pages to showcase the different interactions of the flow. This was done prior to the usability testing so feedback can be received for both the UX and UI of the website.
After the UI was solidified and brought into all flow pages, the prototype was created. The prototype highlighted all of the major needs of the members, including a comprehensive “What to Expect” section on the homepage, instructor pages with bio, class styles, set lists and schedules, class schedules with filters for instructor, style, and time, seat map with open seats and instructor positioning, class package and merchandise shops with auto-filled check-outs, and a live chat feature to make modifications and/or cancellations in a more personal way. Link to Prototype
The User Testing
Testing: With a working prototype, usability testing was done on 5 more people that were locals and fitness enthusiasts. Overall everyone really liked the website and felt it was a big step up from what they usually see from local studios. They really loved the information included on the homepage and instructor pages and felt the entire process was quick and easy to navigate. The main hesitations were on the homepage sliders that needed a visual cue to show they open up, and for the schedule page, the reset button needed to be moved away from the filter option to not be confused with the apply button and the dropdown filters needed to be bigger.
Next Steps: Adjustments were made on the prototype based on the feedback given from the usability testing (Click Here) Any further steps would be to create a higher fidelity prototype with more interactions, conduct more testing and continue to update as needed.