99Bikes Case Study

Research & redesign concept for 99Bikes' mobile e-commerce website

Overview

  • Cycling
  • 2 weeks
  • March 2019
  • Itiah, Kate, Rhys
  • GA UX Course
  • My Responsibilities
  • Project plan • 3 of 9 interviews • 2 of 5 card sorts • 2 of 5 contextual inquiries • Initial digital prototype • Presentation deck • Co-presented
  • Methodologies
  • Empathy Maps • Contextual Inquiries • In person interviews • Survey • Affinity Map • Open Card Sort • Information Architecture • Personas Creation • Journey Maps • User Flows • Competitive Analysis • Value Proposition Canvases • MVP Definition • Usability Testing • Prototyping
  • Tools
  • Teamweek • Google Forms • Sketch • InVision • Axure • Keynote
  • Problem
  • Meet & exceed consumer’s expectations of a streamlined & convenient online shopping experience, comprehensive information that’s presented simply, and timely assistance when needed.
  • Solution
  • Improve the 99Bikes website’s browsing, comparison, assistance & checkout touch points, and simplify the design to create a seamless & positive online experience for their consumers.

Project Plan

During research, the critical task was conducting interviews to define the personas representative of 99Bikes e-commerce consumers.

During design, the critical task as usability testing with the initial prototype before building the final in Axure.

99 Bikes Project Plan

Context

The brief provided an initial problem statement: 99Bikes wants to enhance the shopping experience for their e-commerce consumers. Three main personas were also given.

It was our task to discover if there was a deeper problem, and if these personas were true representatives of 99Bikes consumers.

Given Personas

Evaluate personas

4

Empathy Maps

We each created an empathy map for a given persona with the scenario of shopping online for a bike or cycling accessories. Then we combined the most common attributes into a single empathy map to see trends and develop more clear definitions of primary 99Bikes consumers. Key commonalities were:

• Concern about the level of customer service offered online
• Opening many search engine tabs to compare bikes/accessories
• Needing greater advice & clear/concise presentation of information
• Wanting a smooth shopping experience & satisfaction of value gained for money spent

Combined Empathy Map of Given Personas

5

Contextual Inquiries

We visited bike retailers in the Sydney CBD to witness the customer buying experience for cycling equipment. We collectively observed:

• Stores were organised by bike & accessory type
• The vibe was relaxed and approachable
• Consumers ranged from businessmen to people dressed in bike gear
• Staff often waited before approaching, yet were friendly & informative

Visiting bike stores for contextual inquiries

9

Interviewed

84

Surveyed

We conducted in-person interviews & surveys was to understand people’s online shopping experiences, expectations and habits in general, and if these differed from when they purchased bikes/cycling accessories. Key insights were:

• People’s shopping habits & expectations did not differ from when they purchased cycling items vs. other items
• People open and switch between a lot of tabs to compare products; wasting time
• If people cannot find the help they need, they leave the website
• Discounts & customer reviews rank highest in importance
• Great customer service means a convenient, speedy & stress-free process

99 Bikes Interview & Survey Insights

5

Card Sorts

We conducted open card sort sessions for 50 key products to simplify the website’s information architecture & navigation from 6 to 4 main categories:

• Bikes
• Accessories
• Kids
• On sale

99 Bikes redesigned Information Architecture

refine personas

We had a team affinity mapping session to synthesise information from our various research methods. We discovered two primary types of 99Bikes online consumers:

• Andrew is a speedy shopper that prefers to be in & out
• Susan researches extensively & often has questions

Persona 1 - Andrew The Speedy Shopper
99Bikes Andrew Persona Board
Persona 2 - Susan The Contemplative Shopper
99Bikes Susan Persona Board

Journey Mapping

These updated personas were a blend of the original ones, but our journey maps revealed what mainly distinguished them was how their shopping styles differed when a shopper knows what they want vs. needing assistance. The website design would need to cater for both.

Persona 1 - Andrew The Speedy Shopper
99 Bikes Andrew Journey Map
Persona 2 - Susan The Contemplative Shopper
99 Bikes Susan Journey Map

User Flows

We created user flows for the updated personas to develop how people would progress through the site based on these two styles of shopping for a bike & accessories.

Persona 1 - Andrew The Speedy Shopper
99 Bikes Andrew User Flow
Persona 2 - Susan The Contemplative Shopper
99 Bikes Susan User Flow

Value Proposition

We created a value proposition canvas per persona to identify their pains & gains when intending to buy a bike or cycling accessories online. We discovered that our proposed new features needed to promote a convenient & quick streamlined, yet a well-assisted & simply informed online shopping experience.

Persona 1 - Andrew The Speedy Shopper
99Bikes Andrew Value Proposition Canvas
Persona 2 - Susan The Contemplative Shopper
99Bikes Susan Value Proposition Canvas

Problem Statement

The user research we conducted helped up to evolve the problem statement from 99Bikes wants to enhance the shopping experience for their e-commerce consumers to:

99Bikes needs to meet & exceed e-commerce consumer’s expectations of a streamlined & convenient shopping experience, comprehensive information that’s presented simply, and timely assistance when needed.

Next, we explored 99Bike’s offerings further, and compared them to the cycling marketplace to develop solutions.

Competitor Analysis

We reviewed 99Bike’s current mobile website, and also compared it to two main online competitor bike retailers to observe what aspects we wanted to immolate, evolve or discard.

For instance, Trek’s site is minimalistic, visual heavy and features a compare tool, and Giant’s site functionality allows users to dive deeper into product tech specs by clicking on numbered icons. 99Bikes customers range from novices to dedicated riders, so the design approach needed to accommodate for that.

99Bikes Competitor Analysis

Minimal Viable Product

We identified 3 priority levels of features to include in the mobile website as the minimal viable product. It had to at least have a simplified header & layout design, customer reviews, a comparison tool and allow checkout as guest.

 

99 Bikes MVP

Solution Statement

After gaining a greater understanding of 99Bikes, competitors and representative online consumers, we were able to develop the solution statement:

Improve the 99 Bikes website’s browsing, comparison, assistance & checkout touch points, and simplify the design to create a seamless & positive online experience for their consumers.

I took the lead on digitally sketching our initial prototype, keeping our research, solution, project plan and MVP in consideration.

initial prototype

3 Usability Tests Conducted

Homepage, Product Page, Cart
Guest/Login, Checkout Details, Review

final prototype

2 Usability Tests Conducted

Product Page
Cart to Checkout Process

Cart:

  • Simplified the design by using less text to change product feature selections.
  • Added ability to select delivery options before checkout, and per item, since testers were confused about their shipping options during the checkout process. Accessories can be click & collected with the bike or delivered separately.

Checkout pages:

  • Changed to pagination in lieu of an infinite scroll after specifically testing these two versions.
  • Added progression tabs so that consumers know where they are in the process & can return to previous screens in the checkout process if needed.
  • Moved display of cost to prior to adding payment details per tester feedback. It will change to a “total” amount pending entry of shipping address & payment type.
  • After reviewing entered details and placing an order, a payment total & confirmation number was provided as testers were concerned about having something to reference in case the receipt was not e-mailed.

Video of the final checkout design built in Axure

Clickable Prototype in InVision

Conclusion

resolution

Our MVP created a balance between a convenient & quick streamlined and a well-assisted & simply informed online shopping experience for 99Bikes e-commerce consumers.

99Bikes would benefit from satisfied customers who are enjoying these enhanced services, leading to increased revenue.

future features

If we were able to develop the website further, we would design & test these additional features:

Ability for purchased items to be saved for future reference would add personalisation for return customers

A paid delivery option once a bike is assembled to assist those who cannot as easily bring it home

Allow consumers to design or personalise their bike/accessories when ordering

Ability for product images to rotate around a pivot point for greater viewing angles

reflection

• If we had additional time I would conduct more usability tests after the final iteration

• Project planning and updating our status every day was key to finishing on time

• I learned that conducting interviews first can help to shape what is relevant to ask in surveys

• I improved my skills in creating and validating personas from research findings