< Cycle Central case study

Research and Conceptualization

Background

Cycle Central, or CC, is a retailer for bicycles, bicycle accessories, and related equipment. CC has a successful chain of stores, but owing to the prevalence of online platforms, CC has recently formed its own website to sell its goods. Other bicycle stores as well as specific manufacturers already have successful websites, so competition is stiff. More importantly, however, CC has noticed that no matter how many of its customers page through the online catalog, precious few of them pick a favorite ride, let alone buy one.

Problem

Capturing and holding your audience’s attention is always a top priority when you’re building an online experience, but it’s probably most crucial if you’re catering to shoppers. After all, what good is a shop if no one’s buying anything? If it’s hard to find the right product, and even harder to check out, chances are your customers aren’t going to stick around for long.

That’s exactly the problem Cycle Central encountered with their customers. Hindered by countless tabs and a checkout that requires logging in, countless customers leave before they can even make up their minds. How can we improve the retention and conversion rates of CC’s online shopping experience?

Research

The problem is twofold:

50% of users open on average 7 item pages and then abandon the site without moving any items into the cart. Users are probably unable to determine which bike is best based on relative features.
70% of users who place an item in the cart do not purchase. Data shows that users abandon the cart at the registration page. Right now, users must make an account to purchase. A guest checkout would be the ticket for this! The guest checkout must capture the user’s email to keep the hassle to a minimum.

Persona perspective

The userbase for Cycle Central (CC) is mainly composed of men, about 24-38 years old, who are high earners, and are picky about bikes. Additionally, a few key descriptors about the brand were presented: “savvy,” “focused,” “serious,” and “dependable.” These cyclists did their homework before settling on any one bike, and it showed—each of them had ridden their “daily drivers” for at least five years. Through my conversations with them, it seemed neither browsing nor checking out were problematic experiences in any one of the popular bicycle shop websites.

Big names like Cannondale, The Pros Closet, and Canyon were thrown around as exemplars for their sleek designs and seamless flows. The criticisms were actually targeted towards such semantics as whether a given bike actually fit in a given category, or how sizing a bike was a more involved process than the seemingly simple options shown on some of the sites.

Competitive perspective

Some industry giants to look out for include Amazon, Target, and Trekbikes. While Amazon and Target are giants in their own right, they lack the “commitment” a site like Trekbikes has towards a specific customer base—one that rides bikes. The first solution was almost immediately apparent across every bicycle retail site in the form of a “bike rack” that users could add to as they browsed through the catalog. As users added to the bike rack, they could view practically every detail about each bike side by side.

The guest checkout was similarly simple in implementation: give the user the option to check out either as a guest or sign up/in, and initiate the checkout process for guests with only an email as a requirement.

However, the checkout process itself deserved closer scrutiny. Each site presented a different format and visuals for their checkout flows. Cannondale had a consistent side by side look that evolved as the user progressed through the flow, while Trek and Canyon followed a more traditional paged flow. Before finalization, however, some consideration was again given to other online retailers. Target and Amazon had been listed as competitors and observed accordingly, but didn’t have the same “focus” the bicycle sites did.

Further analysis into online retailers returned Ikea as an exemplary competitor--it had a similar level of detail in the browsing experience, and its checkout flow stood out even among the existing choices. For example, Ikea also had a comparison feature, not to mention having an unlimited number of slots for product comparison. The checkout flow had a convenient “guest or registered user” pop-up prompt.

The final design incorporated the segmented Cannondale flow, but with a cart and the checkout prompt from Ikea. The Ikea prompt was chosen for its responsiveness, and the Cannondale flow had a compact yet legible format that fit the serious, “made for discerning pros” look at the heart of CC.

Early ideation focused specifically on having a simple, up-front product page with detailed yet easily navigable comparison tools. The implementation of the comparison tools varies between each competitor...

...wherein they might have everything on a separate page that has everything expanded. Scrolling through this can take a while.

In this picture and the next, we see a comparison window that is limited to the overlay itself and doesn't open in a new page.

Following from the image prior, we can see that this site also opted for an entirely expanded menu.

As we can see here, the competition isn't limited to bicycle retailers. Ikea has arguably the most flexible comparison tool, which allows for over a dozen products to be added and prevents information overload with collapsible sections.

Sketching and Wireframing

Exemplars like Cannondale and TrekBikes were imitated for the ever-convenient Bike Rack feature, which let users compare multiple bikes side by side, while the checkout merely needed to be enhanced with the addition of a “Guest” feature. Even the earliest sketches ended up making it through almost unchanged.

First sketch of the product page. The site header features, from left to right, the logo/home button, some bike categories, a search button, and a cart button. The catalog is a grid of product "squares" that feature an "add to cart" and "add to rack" button in each of the top corners. Below each square is the name of the bike as well as an average user review score. The bike rack conveniently sits at the bottom of the screen.

Bike rack. Up to three (or even four) bikes laid side by side to compare photos and features. The whole is separated into an accordion of drop-down menus so users can compare features that matter to them.

Sitemap. Limited in scope to accommodate only the checkout flow.

User flow for browsing and checkout. Keep it simple! Customers should see what they want and get what they want with as little hassle as possible.

Hues of blue and highlights of gold lend themselves to the professional, reliable, and knowledgeable reputation of Cycle Central.

Simple overlay where users can edit their selections before opening a more comprehensive comparison window.

The bicycle comparison window, with three bikes being compared and their respective features listed below.

Prompt for guest or registered user checkout.

Design choices and validation

“No” to monotone

Comparative analysis revealed that similar sites, such as Cannondale and Trek Bikes, opted for a more neutral black-and-white scheme. Simple, effective, but maybe not as evocative of the keywords as other colors could be. For example, blue is touted as a color that communicates authority, trust, and responsibility. It is featured on numerous types of uniforms, stamps, and coat-of-arms.

A complement of yellow or orange was also considered to prevent a monotonous palette. The shade was narrowed down to gold, which carries itself with success and prestige; two apt descriptors for the kind of service CC customers would look for. A design kit featuring blue and gold was chosen accordingly.

Did we do the right thing?

With the look finalized, and the necessary flows implemented, further user tests were conducted by reaching out to the customers who had provided their insights at the outset of the project. They were eager to see CC develop primarily because they were excited about a website that’d let them browse across brands rather than within a brand.

Customers were happy to see the expansive catalog, but noted that further options for refining their search queries would be a good addition. They also liked the bike rack, though some opined for a fifth slot instead of being limited to the usual limit of four slots. Some also took issue with the fact that the actual comparison window opened in a new tab instead of being consolidated into the collapsible bike rack menu. The guest checkout, however, was a unanimous success. Everyone was happy to be rid of a checkout that demanded signing in or up.

Conclusion

The flow optimization for the CC website was a pertinent reminder that customer satisfaction and retention are derived not only from a pretty website with a recognizable name. People won’t stick around if they can’t get what they’ve come for.

The experience of designing not an entire website but improving a part of it was, in a way, just as intense. Asking research participants for their past experiences with similar products and learning how to combine those impressions into a cohesive flow that would suit everyone’s tastes was challenging and a lesson in maintaining a scope appropriate for the task at hand.

Additionally, seeing how enthusiastic CC customers were to see the website improve was a good source of motivation. As a designer and researcher, it is important to remember that the customers want to see our product succeed as much as we do, and address their concerns with the appropriate care and attention.

The next steps to take for this design would involve taking the final impressions of the users into account and iterating on them, namely the search options and the consolidation of the comparison window with the bike rack proper.

You can view the prototype here.