Spur.fit
Customized personal training at an affordable rate.
Kickoff
Our internship began with an initial meeting with the Spur.fit team where we introduced ourselves, learned about the product, discussed the deliverables, explained our design process, and constructed a timeline.
Prior to our kickoff call, to develop a strong understanding of their intentions with the website and performance expectations, we had internally compiled some questions to ask the stakeholders. Our purpose for asking style related questions was to make sure our impressions of the site’s look and feel aligned with the company’s mission.
Personas
At the beginning of our partnership with the Spur.fit team, their design team shared the below personas with us. Throughout my research process, I consistently visited these to see whether their existing website design decisions aligned with the user type. I took note of any instances where content, color choices, and imagery felt misaligned with the target audience illustrated in the personas. During the redesign process, I referenced these personas as I restructured sections of the site and transformed the UI to ensure the changes I made would enhance the target user’s experience.
Synthesis
Research & Problem Definition
Designing & Ideating Solutions
Sketches
Once we gained an understanding of the company's objectives, the intended audience, and the issues with the current website, we initiated our iterative design process by creating initial drafts of potential solutions.
Reflection & Next Steps
In redesigning Spur.fit's site, I learned the importance of working within the design limitations to meet the business goals and user needs as defined by the specific client. Since we were directed not to alter the style guide or information, we repurposed the provided design elements for a more visually pleasing result. We also restructured the information architecture of the website in an effort to strike a balance between the site's functionality and aesthetics.
I couldn't have asked for a better team to complete this internship with. From the start, we all wanted to be involved with each aspect of the design process. We communicated daily, conquering each phase in a supportive, collaborative manner. As a result of this teamwork, we built a better understanding of how to defend our designs through research and how to apply our critical thinking skills to devise solutions that address user needs.
Creating an intuitive, smooth, and pleasant user experience was our goal. Moreover, we didn't feel that the existing site's appearance aligned with how Spur.fit described the feeling of its brand - "encouraging and exciting." Based on positive user and client feedback, I am delighted to know that we achieved our objective and can't wait to measure the impact we made.
I'm looking forward to reviewing Spur.fit's metrics after the new site launches and seeing if the redesign has improved performance. It is my hope that the revamped site will not only provide value to the company, but will also improve the registration experience of interested new users.
The Client
Spur.fit is a mobile app that provides affordable, personalized exercise plans and community fitness challenges for users. Based on their fitness level, health history, and goals, users are virtually connected to an appropriate real-life personal trainer who develops a customized daily workout plan for them. Using artificial intelligence, the app tracks the movements, pace, and overall energy exertion of each user and provides them real-time feedback. By continuously reviewing the user’s workout analytics, the personal trainer makes any necessary adjustments to the assigned exercises.
Problem
Spur.fit’s website acts as a supplement to the app to enhance interested users’ understanding of the company. The only action users can take on the website is to enter their email for more information regarding “early access.” There is no user portal on the site for registered users to view their account information. This experience on the site, coupled with the poor content/visual hierarchy, led to user confusion and oftentimes distrust in the brand.
The challenge was to create a more engaging, streamlined user experience on the website. The client’s main concern was that the UI and CTA of the hero section’s “get early access” were dissuading users from registering for the service through the website.
High Fidelity Wireframe, Version 1
Through collaborative teamwork, we brought our ideas to life by creating the above high fidelity wireframe. In this first version, we refrained from making drastic changes to the aesthetics of the site. Given the design limitations the client shared with us at the start, we wanted to see if we already exercised the extent of the design changes they were willing to make, or if they were open to a more drastic transformation. To our surprise, they gave us the green light to make additional changes to the design. With this creative freedom, we each began to brainstorm additional ways to create a more visually appealing interface.
High Fidelity, Version 2
Utilizing Spur.fit's style guide, we collectively designed the below version of the site and made the following changes:
We also designed a questionnaire for interested new users to schedule their assessment call with a trainer. For the progress bar of the questionnaire, I thought of the the idea of adding a running man gif to make the experience more engaging and encouraging.
Usability Testing, Round 1
To help identify any weaknesses in the functionality and aesthetics of the site, we conducted six usability tests using the second version of the high fidelity prototype.
Design Process
Business Goals
Build trust with the user
Brand should feel encouraging and exciting
Increase conversion
Emphasize the flexibility aspect of the product - workout anywhere, anytime
Expand the customer base and build a community
Better emphasize the affordability, accountability, and customization aspects of the membership
User Goals
Understand the company’s offerings quickly, particularly how they stand out from competitors
Easily register for the service
Train with a reliable, experienced coach
Get in shape and have fun doing it
Website Redesign Constraints
Maintain the existing blue and orange color palette
Keep all existing information sections - no changes should be made to copy, but changes can be made to layout and sizing
Do not add pages
Website Redesign Wishes
Capture more information from new users
Improve visual appearance and user experience
Put more of a spotlight on key selling points - affordability, flexibility, and customization
User Pain Points
We identified the below pain points during our observation and analysis of Spur.fit’s existing website. These issues were highly impacting users’ perception of the brand, particularly their level of trust and confidence in the app.
Competitive Analysis
To understand the online fitness market better, we examined the websites of three competitors and noted their strengths and weaknesses. By analyzing the color palette, information hierarchy, imagery, types of CTAs, and overall user experience of each site, we identified opportunities for UI/UX improvement on Spur.fit’s site.
We studied Future.co, Ultrahuman.com, and Centr.com, three successful fitness and wellness focused apps with enticing websites. Overall, we noticed the competitor sites had more intriguing imagery, more genuine testimonials, clean, intuitive UI, easy to follow user flows, and more efficient sign up processes.
Website Audit
To further develop a strong understanding of where Spur.fit stands in comparison to competitors, we conducted a website audit to define the usability issues and aesthetic weaknesses present on their existing site.
Opportunities for Improvement
The identified user pain points fueled our redesign mission and further clarified the types of changes we should implement to achieve a more aesthetically pleasing and functional website. Keeping in mind the redesign constraints, our objective was to redesign Spur.fit’s website to achieve higher conversion rates and an overall more satisfying user experience.
User Pain Points
By observing how users interacted with the redesigned site and hearing their feedback, we identified the below weak points in our design:
Usability Testing, Round 2
In the second round of testing, the users seamlessly navigated the site and were not distracted by an abundance of CTAs. In the prior version, users were confused as to what CTA they should click on to begin their journey.
Ironically, during this second round of testing, the users mentioned that they preferred the longer features section. They found the longer features section to provide more in depth visuals and context as to what is included with a Spur.fit membership. In regards to the pricing section, users were happy with the addition of information pertaining to the free trial period. In the prior version, there was only mention of a 14-day free trial at the bottom of each pricing section, which wasn't as impactful. This third version explains the free trial in more detail, particularly that the user won't be charged until the fourteen days are over and have the flexibility of canceling anytime.
Based on the competitive analysis I conducted as part of my research process, a longer features section was a common feature of fitness app websites. Referencing the data we compiled from our research, coupled with user feedback from round two of testing, we discussed the layout with the Spur.fit team and they agreed to move forward with the longer features section.
Our Questions
What is the purpose of the website? What are the main business & user goals?
Can you share metrics with us?
Are you looking for a mobile app or website redesign?
As part of the redesign, can we change the color palette and copy of the existing website? Can we add pages to the site?
Were there any notable mentions of Spur.fit in the media (I.e. articles, IG influencers, TV)?
What is the feeling you're trying to convey with the chosen color palette and imagery?
Key Insights
From what Spur.fit team shared with us, below is what I found to be of utmost importance to guide our research and design process.
Final Prototype
Lo-fi Wireframes
To create a cleaner visual representation of our suggested remedies for the identified pain points, we each transformed our sketches into low fidelity wireframes. Our purpose for doing this was to make sure we achieved internal alignment on our UX redesign approach, particularly the information hierarchy of the site, before we presented to the client.
Keeping in mind the business and user goals, we landed on the below information architecture for the redesign. Our intentions with this revised layout was to design a more persuasive and conversion focused website.
Before we applied the provided stylistic preferences to the wireframe, we shared the information architecture with the client for approval. Considering that there hasn’t been any notable mentions of Spur.fit in the media (yet), their sole feedback was for us to remove that section.
We revised the information sections according to the feedback and continued our design process by creating high fidelity wireframes. This involved us reviewing Spur.fit’s existing style guide and thinking of ways we could revamp the UI of the site using the provided color palette, logo, and information.
High Fidelity, Version 3
When we presented the second version of the high fidelity designs to the stakeholders, they were happy with how we applied the existing color palette in a new way. While this new version exceeded their expectations, they were in agreement with the findings from the usability tests and asked to see a shorter version.
Keeping the feedback in mind, my team and I created a more concise version of the site. Our goal was to convey the same messaging regarding Spur.fit's features and pricing options in less space.
The hero section’s CTA was changed from “Get Started” to “Start Free Trial” to be in line with the pricing section’s CTA. Based on user feedback, it was deemed unnecessary to have another CTA directly under the hero, therefore we removed the about section’s CTA.
Our team consolidated the list of membership features and allocated a smaller section of the page to it. Despite dedicating less space to house the information, we made sure all key benefits of the product were stated.
To avoid overcrowding the site with CTAs and prevent a confusing user experience, we removed the "Get Started" CTA from the pricing comparison section.
We incorporated user feedback by switching the placement of the pricing and testimonials sections. Since there already was a "Join our community!" heading, we removed the text above the testimonials section. To help attract new users and provide more details regarding the free trial, we adding two lines of text above the pricing options section.
User Journey
To help strengthen our understanding of the users, we created a visual storyline of a provided persona’s experience with Spur.fit’s brand, from expectations to research and purchase. Creating this map revealed that Spur.fit’s current app registration process on the website was inadequate. The CTA present on the existing site only asks for the user’s email address - there’s no questionnaire and no information explaining what the user will receive by entering their email. Most importantly, for users who decide to proceed with Spur.fit as their online fitness app, the site lacks a “download the app” option. These revelations made our team more determined to improve this user experience by creating a questionnaire to smoothen the sign up process and also add a “download the app” option to the site.
Solution
We redesigned the existing website to improve the user experience and create a more visually appealing interface.
Context
My Role • UX/UI Designer on a team of two other designers
Duration • 3 week contract throughout November - December 2022
Responsibilities • UX research, UX/UI design, information architecture redesign, user journey mapping, sketching, wireframing, prototyping, user testing
Tools • Figma, Google Workplace, Zoom, Slack
