Hydrow
-
Role: UX designer
-
Tools: Figma, Google slides
-
Deliverables: Experience benchmarking, information architecture, personas, journey maps, wireframes
Ask
Project Overview
Hydrow felt it was time to revamp the overall look and feel of their website right before they launched their new product, the Hydrow Wave. They wanted to upgrade their navigation, make the site feel premium, explain what set Hydrow apart from other machines in the workout equipment industry, tell Hydrow’s unique story and evoke community between Hydrow users and Hydrow athletes.
Process
Workshop
We met with the Hydrow team to discuss our research and give our recommendations on improving overall site experience, information hierarchy and site mapping.
Experience Benchmarking
When completing our experience benchmarking, we kept in mind the fact that the Hydrow team expressed how important it was for the site to feel premium, create connection and tell Hydrow’s story. We took a look at many websites and found examples that excelled in these crucial areas.
Information Architecture and Navigation
After walking the Hydrow team through our experience benchmarks and our takeaways, we reviewed their current information architecture and navigation. We went over what could be improved, such as confusing language (Shop vs. Buy Hydrow), redundant links, and omission of important selling points such as 1:1 coaching. We also went over the different types of navigation patterns as well as their respective pros and cons.
Information Architecture and Navigation Activity
To close out our workshop, we asked the Hydrow team to split into three groups and draw their own ideal state of the navigation based off of what they learned from our navigation review. Each team explained their thought process, we collected their hand drawn navigations and considered them as we built out our recommended navigation.
Recommended Navigation
A week after our workshop, we returned to Hydrow to review the work completed during the workshop and to show them what we would recommend for an upgraded navigation. Our recommendation was a top navigation with a mega menu that opens up to a fullscreen takeover because we wanted the top navigation to showcase their offerings visually while remaining as uncluttered as possible. Also, we chose a top navigation and mega menu since Hydrow only has a few products and content pages.
Personas and Journey Maps
Hydrow had previously done some market research and found that their three core groups of customers fell into the following categories:
Workout fanatics who are always looking for another challenge and searching for a community of other exercise fans
People who don’t workout frequently, but are looking for a new routine that will make them feel as if they are improving their health
Individuals who have stopped working out and want to ease back into working out and feeling great about their physical self
Hydrow informed us that price and uncomplicated set up and use were aspects that were important to all three persona groups. We took the three customer groups, built out their personas and worked through an ideal journey map for each of them.
Outcome
Wireframes
When it came time to create wireframes for Hydrow, we wanted to retain the most important information and offer that information first instead of burying it or having it live in a page that garnered less traffic. We also focused on making our targeted pages more modern and incorporated components that would be more dynamic instead of static.
Homepage
Hydrow’s homepage opens up with a 50:50 hero component. The video would draw the user in with footage from one of Hydrow’s live workouts, while the left hand blurb would give the user information pertaining to the Hydrow Experience as well as a link to the Hydrow Experience landing page. Directly under the hero component we reveal the Original Hydrow and Hydrow Wave as well as quick links to their respective product detail pages.
We believed it was important to have a component dedicated to Hydrow’s origin so that those who are unfamiliar with Hydrow can get acquainted with the company’s backstory. To modernize the website, we introduced a component with a parallax effect. This component would focus on different features of the Hydrow and a blurb about them as the user scrolls down the page.
In addition, we added a component for reviews written by current Hydrow rowers, and a carousel featuring quotes from press reviews. Lastly, we included a component detailing Hydrow’s Live Outdoor Reality workouts. The Live Outdoor Reality workouts are filmed outdoors, on location with real rowing instructors.
Hydrow Experience
The experience page features information surrounding live outdoor reality workouts provided by Hydrow. This page would also feature call outs to the Hydrow app, the variety of workouts available and a component that introduces the user to some of the athletes that coach Hydrow rowers through their workouts.
Product Detail Page
For our product pages, we leaned into offering clear language surrounding retail price and financing price. There is a dedicated section for specifications, a call out to the Hydrow Experience page, as well as a comparison table where the user can determine if the original Hydrow or the Wave is the right rower for them. We added a carousel for quotes, as well as a section that would allow the user to add related accessories to their cart. We also created a frequently asked questions component and a section for user generated reviews so the user can get other opinions before purchasing.
Our Origin
We wanted to show users that Hydrow was not a flash in the pan company that decided to make rowers on a whim. That Hydrow was dedicated to the art of rowing and wanted to make rowing accessible to those from all walks of life. For this page, we delved into the history of Hydrow’s founder, rowing champion and U.S. National Team coach, Bruce Smith, as well as his ancestors and their rowing roots.
View my other work
-
99 Cents Only
Ask: Help improve accessibility across all pages of 99 Cent Only’s website.
Outcome: Formulated an extensive list of accessibility violations and remediation notes that would aid 99 Cents Only in achieving WCAG 2.0 AA compliance.
-
Acura
Ask: Inform users about Acura’s new electric vehicle and improve the design of the homepage and buy online pages.
Outcome: Content benchmarking, crafted user journeys for Acura’s personas and created wireframes.
-
Coca-Cola: Mexico
Ask: Build out user journey for Coca-Cola Mexico’s promotions page.
Outcome: Created unified user journey and crafted MVP and idealized wireframes for promotions page.