RheoHero Website Redesign
.png)
Redesigning a Sports Product Website
Role
Role: UX/UI Designer
Timeline: 2 Weeks
Platform: Website
Tools
Figma
Wix
Approach
Usability Testing
Heuristic Evaluation
Wireframing
Competitive Analysis
Site Map
Sketching
Business Analysis
User Interviews
Limitations
This site needed to be built in the company's existing platform, Wix.
Background
Rheohero is a startup that creates bracing products for athletes to prevent injuries. Their first product is an ankle brace that is light, adjustable, and stabilizes the ankle while allowing the athlete to move freely.
The Problem
Rheohero's current website doesn't showcase its product or have any actions for website visitors to take. The founders want a website that captures leads for when the brace becomes available and looks professional and credible for investors.
Primary business goals for website redesign
1. Capturing leads for the waitlist and newsletter
2. Communicating the value and features of rheopro braces
3. Improving awareness of the prevalence of ankle injuries in sports
4. Establishing confidence and trust in the company
Current Site Analysis
I analyzed the current RheoHero website to determine what could be improved to address user and business needs. Some of the problems with the site include:
​
-
No CTA for website visitors. Although the product isn't available, the company is missing an opportunity to capture leads. There is currently no action for website visitors to take.​
​
-
No product photos or videos. The website only shows illustrations of the product, which are located at the bottom of the page instead of above the fold. This creates a confusing experience for users visiting the site in search of ankle braces.
​
-
Unclear website sections. The current site does not have clear headings and sections. Because of this, the product tagline, product feature, and benefits are presented together with no context for the user.
​
-
No brand guidelines/style guide. The website has an inconsistent use of typography and colors. This makes the site look incohesive and unprofessional.
​
-
Poor prioritization of information. Although this landing page is meant to give users information about the rheopro brace, there is a poor prioritization of information. For example, the company wordmark and slogan is shown first instead of showcasing the brace.
-
Difficult to use. The How to Wear section has a slideshow of photos showing users how to wear the brace, but it is unclear to users that it is a slideshow because of no visual cues. Once the user enters the gallery, they have to click through a series of photos because the gallery only shows one photo at a time. This contradicts the company's goal of showing that the brace is easy to use.
User Interviews
I completed a total of four user interviews to gain a better understanding of their reactions and pain points when navigating the current website. From the interviews, I gained the following insights.
​
1. Users did not trust the website because it was poorly designed and didn't have photos of the product.
​
2. Users wanted more information about the brace and why they should purchase it. They felt that the information offered was very limited and vague, which made them feel the product probably wasn't good.
​
3. Users were confused by the stock photos chosen and felt they didn't relate to the content of the website.
​
4. Users wanted to know that the brace was backed by professionals.
​
5. Users wanted social proof, such as testimonials and reviews.
Competitive Analysis
I researched four of RheoHero's competitors, Sleeve Stars, Bauerfeind, Z Athletics, and ASO and noticed the following about their website designs.
​​
-
Competitors have strong product photos and renders
-
Most ankle brace companies have websites that are primarily a shop to buy the product.
-
Many of the websites have a UI design that doesn't feel modern, which makes the product feel like an old solution​
​​
Based on their competitors, RheoHero has an opportunity to create a website that speaks to athletes and their pain points, include photography of athletes in action, improve awareness around ankle injuries with resources, showcase the brand and company mission, and use a design that feels both modern and trustworthy.
%20(1366%20%C3%97%205000%20px)%20(2).png)
%20(1366%20%C3%97%205000%20px)%20(1).png)
%20(1366%20%C3%97%205000%20px)%20(3).png)
RheoHero's Ideal Users
To gain more insight into the ideal experience for customers on RheoHero's website, I worked with the company's cofounders to identify the ideal target audiences for the company's product. I used their attributes, values, goals, and concerns to guide design, copy, and prioritization of website features.
Athletes
.png)
Attributes
-
Age: 12-18
-
Play a sport with a high risk of ankle injury (basketball, football, soccer, lacrosse)
-
Past foot or ankle injury
Values
-
Physical health
-
Team
-
Memories on the field
Goals
-
Reach their athletic potential
-
Win the championship
-
Play their season in full health
-
Get recruited by a college team
Concerns
-
Injury or re-injury that will take them out of the game and affect their training
Parents
.png)
Attributes
-
Age: 30-70
-
Former athlete
-
Invested and involved in their child's sports career
Values
-
Hard work
-
Dedication
-
Leadership
Goals
-
For their child to be a top athlete on their team
- For their child to earn a scholarship
Concerns
-
Their child will get injured in their high-contact sport
Coaches
.png)
Attributes
-
High school or college coach
Values
-
Developing athletes as players and people
-
Cultivating a team that plays to its full potential
Goals
-
Win a championship
-
Teach players lifelong skills
Concerns
-
Injuries affecting key players on the team
Team Trainers/Physical Therapists
.png)
Attributes
-
High school/college sports trainer/physical therapist
Values
-
Physical health
-
Strength & Conditioning
Goals
-
Rehabbing athletes to full health
-
Giving athletes the tools to stay healthy and build healthy habits
Concerns
-
Major injuries affecting the team
-
Bandwidth of trainers to treat players before practice and games
Information Architecture
I created a site map of the main navigation and outlined the content needed for each page.
Pages
Home
Product
Mission
Team
Creating the RheoHero Brand
After meeting with the founders to understand more about the company, I wanted to create a brand that embodied the joy of being an athlete (free to athlete). I incorporated freeform graphic elements of different sports, colors that evoke feelings of joy and freedom, and a friendly sans-serif font.
As a company creating braces for athletes and dedicated to decreasing preventable injuries in sports, dependability, stability, and trust were also important attributes to include in the brand design and are incorporated into the color pallet and logo.
The logo has a few different meanings. The intersecting R's create an H in the middle for RheoHero and form a square, a strong and stable shape representing the brace's stability. After doing a competitive analysis of sports company logos, abstract logos were common in the industry, so I used an abstract design for RheoHero's logo that was distinguishable.
Based on color theory, the color orange evokes feelings of optimism, happiness, enthusiasm, en and youthful connections. This works well with the joy of being an athlete brand I wanted to create. I also noticed that many competitors used the color red. Using orange as a primary color was a way to differentiate from these competitors. Blue is associated with freedom, which ties in directly to the RheoHero slogan. Many sports brands are very masculine and use dark colors. With RheoHero, I chose the color white to give the brand a brighter and lighter feel.
Style Guide
The Solution
Final UI Designs
Building Social Proof
I included a customer image gallery and testimonials to give users more confidence in the product.
Establishing Credibility
I included a section to highlight our advisors and organizations we've worked with to build credibility and show expertise.
Adding Call to Actions
I added call to actions to the website for users to join the waitlist and our newsletter so that the company can begin collecting leads for the product launch.
Communicating Product Value
On the home and product page, I added product benefits based on the pain points athletes experience with other braces and injuries so that they would understand the value in the product.
Building Brand Loyalty
By highlighting the company's mission and values, RheoHero can build brand loyalty and differentiate from its competitors.
Increasing Awareness of Ankle Injuries in Sports
Using stats and blogs, RheoHero is able to educate website visitors on the prevalence of ankle injuries and how they can be prevented.
Showcasing Partnerships
Rheohero is currently partnering with the Cornell Tennis team. The "Our Partners" page describes the partnership, more information about the team, why the tennis team is working with RheoHero, and how the brace benefits athletes. It also has a call-to-action to shop for the brace. This signals to potential customers that top programs trust the product and that it is a disruptor in the space.
Company Impact
The redesign of RheoHero's website had the following impact.
-
Sold 100% of product inventory for the product's launch
-
15% website sales conversion rate
-
233% increase in site sessions
-
134% increase in unique visitors
-
101% increase in average session duration (9m 58s)
​
The company was able to start collecting leads for its product launch and saw an increase in the response rate of B2B outreach to trainers and coaches.
​
User Feedback
Users shared that the new website gave them more confidence in the product and the company's credibility. The social proof through client photos and testimonials increased their desire to join the waitlist. Their overall perception of the product and company improved with the site's new design. They were able to quickly find the information they were looking for and navigate to pages that addressed their needs.
Next Steps
Further usability testing
As a next step, I would conduct user testing to evaluate the website's usability as well as any pain points, frustrations, or missing information. I would work with users from the different user groups (parents, athletes, coaches, trainers) to better understand how they compare ankle braces and what differentiators lead to them purchasing one brace over another. I would also test their ability to do certain tasks such as finding the name of the company's advisor, the brace's sizing chart, or join the newsletter to evaluate where they expect information to be and what flow they take to complete these tasks. These interviews will provide valuable insights into future iterations of the website that would provide an even better experience for RheoHero's users.
​
Creating specific experiences by target groups
Because RheoHero has very different personas to speak to and will use both a B2B and B2C sales strategy, I would want to explore adding additional pages for coaches, trainers, and parents where we can provide information relevant to these specific groups. Creating pages for basketball, football, lacrosse, and tennis with language and resources that feel relevant to that group could be another way to group athletes and create an experience that feels more relevant to them.
What I Learned
The power of defining product value
One of the most important early steps in redesigning the website was working with the cofounders to understand and define the product value, benefits, and differentiators and translating it in a way that spoke to an athlete audience. For example, the product may be 50% lighter than other braces, but what does that mean to athletes? How does that affect their gameplay? The brace may help prevent ankle injuries, but why is that so important to athletes? How do we capture the frustration of being out for a game or losing valuable training time as the alternative? Being able to clearly define value in a way that speaks to our audience was essential to improving the experience.