GB Copy
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?
Project Type
Responsive Website
Role
Researcher, UX/UI Designer
Skills
Research, Product Roadmap, UX/UI Design, User Testing
Duration
Four weeks (2020)
Research
I spoke with family and friends who happen to cycle, as well as collected available data online. This research allowed me to rapidly learn more about the cycling industry, how people behave in bike shops, and some opportunities to make a successful website for Global Bikes.
Talking to cyclists
In order to discover the needs, wants, and pain points for prospective customers, I conducted remote user interviews. Everyone I interviewed cycle on at least a semi-regular basis. By asking open-ended questions about their experiences and motivators, 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:
Users want knowledgable staff.
Users want a shop that is involved in the community.
Users want to know what products are in stock locally.
Users need the website to function well across a variety of screen sizes.
What are other bike shops doing in Phoenix, AZ?
I looked at:
Local shops need differentiators like repairs, community events, and rentals to compete against online brands.
Negative customer service experiences can cause significant damage.
Define
After creating a persona based on my research, a customer journey map tracked multiple aspects of a user’s path from searching to purchase to follow-through, and presented opportunities for the role of the website in this process.
Click to enlarge
A sitemap assisted with a visual re-prioritization of the page structure, and allowed me to increase focus on the primary user and business needs compared to the previous structure.
User flows helped me assess existing processes and how to refine, focus, and add value to common user tasks.
Design
Sketches helped me get ideas out quickly, and to make decisions on hierarchy early on. I considered the differentiators from an online bike shop, like service and community, as guidance for placing elements. Wireframes were then created, starting to work out more specific grouping and placement of site components.
Click to view wireframes
Wireframe Testing
It was important to test my wireframes with users before any final design decisions were made. Using remotely-moderated testing, I had the opportunity to see how other people used the site and find opportunities for improvement.
Primary Task: Find and register for a group ride
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
Results:
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.
High-Fidelity Designs
After sketching, wireframing, and testing, it was time to build the high-fidelity UI design.
Homepage
Events Page
Group Ride Detail Page
Home (Mobile)
Rides (Mobile)
Events (Mobile)
Main Navigation Styling
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.
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.
Design Revisions
Based on my user feedback from testing, I made a few design and organizational changes to the site.
Event Flow - 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 needed to be broken out into a separate page so users could see an overview of offerings.
Service Flow - 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 lamented the lack of detail offered for the booking process. People want to learn more about the services before jumping into an appointment, so a solution similar to events was needed here.
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 focused in its mission to supply, educate, and support the cyclists of Phoenix.