Global Bikes is an award-winning bike shop with multiple locations in Phoenix, AZ. They have a strong community based on their service, group rides, and education. They also have a robust online shop in addition to their in-store offerings.

To grow their customer base even further, a responsive redesign with thoughtful attention to their unique qualities was needed. Their social aspects and community presence was more or buried on their site, meaning some people may never know about everything they have to offer. My task was to solve this challenge:

How can Global Bikes differentiate itself from local competition and online retailers?

Research

Talking to cyclists

In order to discover the needs, wants, and pain points for prospective customers, I conducted remote user interviews. The family and friends I interviewed ride their bikes on at least a semi-regular basis. After asking about their experiences with bike shops, I have identified some needs, wants, and opportunities for improvement when considering the design of the Global Bikes site. Some of the questions I asked were:

• Tell me about the last time you visited a bike shop. What should bike shops do to keep their customers happy?

• Tell me about a time you were turned off by a bike shop.

• Tell me about the last time you visited a cycling-related website. What should a user expect from a good cycling website?

• What makes for a positive online shopping experience? A negative one?

• Why would you purchase a bike online vs in-store?

My subjects wanted many of the same things:

• Knowledgable, friendly staff.

• A shop that is involved in the community.

• To know what products are in stock locally.

• A website that functions well across a variety of screen sizes.

• The ability to book a service appointment online.

What are other bike shops doing in Phoenix, AZ?

I looked at a few bike shops in the local market that had similar characteristics to Global Bikes, including multiple locations, an online store, and service or training offerings. I visited their sites on both my desktop and my phone to compare responsiveness and ease of use. I then dug deeper into their services, social media pages, and reviews. After reviewing it all, I found a few key takeaways:

• All local major players have a robust online shop that is hosted on their domain. Some shops farmed this job out to a major bike brand instead, breaking the experience.

• Opportunity for stronger tie-in with the community through group rides and workshops, increasing brand loyalty over other shops.

• Opportunity to book service appointments online, as well as offering other specialty services and education. Few competitors do this at all, or do it well.

• Negative customer service experiences can cause significant damage.

The Global Bikes website

Below is a portion of the Global Bikes homepage. While it is responsive, it could be further optimized. Navigation links could be consolidated or organized better, and users may need more obvious paths or actions to take.

What can we learn from the cycling industry?

I then did some market research to learn more about the cycling industry as a whole, as well as the current state and attitudes towards local bike shops. Some key takeaways would help further define what would be prioritized for Global Bikes:

• Local shops need to leverage differentiators like repairs, community events, and rentals to compete against online brands.

• Negative customer service experiences can cause significant damage.

• Historically a male-dominated sport, women are underrepresented in cycling and often disrespected in shops.

• Opportunity to promote used bikes to reduce waste and provide affordable access to more riders

Define

After I felt like I understood more about the industry, the needs and pain points of cyclists, and the local shop scene, I needed to fully understand our potential users. I took a linear approach and completed each step of this process in order. I created a persona from information gathered in my interviews, and placed them inside the customer journey of Global Bike’s current customer experience. Doing this allowed me to think through the entire research and purchasing process, along with the social aspects along the way.

I needed to focus on the community experience

During the customer journey phase, I decided that my time would be best spent testing and designing for the social aspects of Global Bikes, such as group rides or repair workshops. These are the biggest differentiators to online retailers, and the main reason a cyclist (based on my research) would remain loyal to a particular shop.

Design

In order to get ideas out quickly, I sketched with pencil and paper. I could rapidly consider the actions a user would take on each screen, and where they could be placed. I included interaction notes to demonstrate functionality that could not be drawn. I included more than one variation of certain screens if I thought there were multiple ways to accomplish the same task. Testing would later help confirm or challenge my instincts.

I decided to design the homepage first to align my priorities from the beginning. This process would help guide the design for the other pages. I took what I hypothesized would be the best version, and turned it, along with some other key screens, into low-fidelity wireframes. Specifically, I focused on screens surrounding the process for a user to find and sign up for a group ride.

Putting wireframes to the test

Testing my wireframes with users before any final design decisions were made allowed me to confirm (or reject) a design or user flow that I hypothesize will work, based on my research. Using remotely-moderated testing, I had the opportunity to see how other people used the Global Bikes site and find opportunities for improvement. I found a handful of willing friends and coworkers to poke around an Invision prototype and give me their honest opinions.

Their primary task: Find and register for a group ride

I also asked them to complete secondary tasks: Where would you go to find:

• A rental

• A calendar of events

• Information about getting fitted for a bike

• A how-to guide to adjust your brakes

I got some valuable feedback that would shape how I change the sitemap:

• Users clicked in both the main navigation and homepage features to get to group rides.

• Event Calendar placement may be confusing. One user tried “about” first. The others tried “ride”. May consider which is best, or to include in both.

• Renting a bike could fit under the Ride category (instead of Service)

• Every user failed to correctly guess “How-to’s” on the first attempt. Might be best to duplicate in Service and Ride

A quick note on branding

While a rebrand was not the project’s focus, it would be a missed opportunity to refresh the website and not touch the brand. I decided to keep the existing color palette and general layout of the logo, so as not to jar loyal customers with too many new things at once. The new logo works both stacked and wide, and is more readable at a small size.

Bringing it all to life

I got valuable feedback from my testers that I incorporated into my final designs. I chose to lean heavily on the community aspect, giving users multiple points of access. I carried the existing black and red brand colors through the site, and used the new logo. Compared to the old site, this version is much more concise and easy to navigate. Design was completed in Figma using desktop and iPhone 8 display dimensions.

Testing

After the high fidelity designs were complete, it was time to test them. I created an interactive prototype using Invision, created tasks for users to complete, and received feedback with remotely-moderated sessions. Each participant was given a brief introduction to the purpose of the test, and then each scenario and accompanying task was explained one at a time. I asked my participants to complete the following tasks:

Task 1: Register for the Sunday Service Ride on Sunday July 5th.

Task 2: Book a service to have your brakes fixed.

Task 3: Find out more about the repair clinics offered by Global Bikes.

What did I learn from these tests?

• Overall, users found the site easy to understand and navigate. Errors were typically limited to quirks in the prototype.

• Multiple users found the events calendar and ride info section on one page to be confusing. I had relied on only the events calendar page to be my source for ride info, but the ride info will either need to be placed above the calendar on the same page, or broken out into a separate page like the current site.

• There was doubt to the usefulness of the Book Service feature/form on the homepage, as most users didn’t start with it for the task, and a couple users commented on the granularity of detail offered for the booking process (which may have been addressed on the full page).

• The details for each group ride will be adjusted with some suggestions from a couple users.

• The biggest takeaway was to ensure the links and features go where the user expects.

Iterating on my design

Based on my user feedback from testing, I made a few changes to the organization and navigation, which are detailed below. As in any design or UX project, more rounds of testing would help to refine the experience even further. It’s an evolving process and one that’s never truly complete. The changes implemented below represent some of the most impactful changes given my constraints.

Navigation - The main navigation was refined and simplified to take up less space. Primary and secondary button styles were made consistent throughout the site, and an effort was made to rename certain links to reduce confusion with users.

Conclusion

I’ve always had a love for cycling, and this project appealed to me because it had the potential to get more people into riding. I faced challenges with how to guide a user most efficiently through ket processes, but through testing and iteration I was satisfied with the result. This has taught me to focus more on the user flow and wireframes up front, instead of facing a redesign down the road. If I were to continue on this project, I would continue to build out the other experiences, like browsing and purchasing a product, or accessing educational materials.

This project has shown me more about my strengths and weaknesses, which I can leverage and take into my future work. I am most proud of the transformation from the original site to a product that is even more focused in its mission to supply, educate, and support the cyclists of Phoenix.