Screen Shot 2015-11-28 at 3.54.24 PM.png

PERFORMANCE BICYCLE

PERFORMANCE BICYCLE

 

 

About This Project

The premise of this project was to reimagine the Performance Bicycle existing user-flow for purchasing a bike-lock (or any other product of choice).  The site must integrate a feature that serves the user, while keeping the existing business goals top of mind.  This was the only criteria given to us which made the project fairly open to interpretation. With no access to the stakeholder it was up to us to determine a starting point.

The Goal

The primary goal for this project, was to sharpen our toolbox —learn how to plan and manage our time efficiently and effectively while applying research and prototyping techniques developed over the previous two weeks at General Assembly.  It was time to put the full UX process into action and to document and deliver thoughtful, intuitive designs. 

 
 
 

Process

 

ROLE

I was the sole designer for this project responsible for documentation and final deliverables end-to-end.

SKILLS

Facilitation, Business Development, User Research, Strategy, Wire-framing, UI Design, Branding.

METHOD

Discovery & Research

Sketching and Ideation

Narrowing Scope and Structure

Prototyping and Testing

DURATION

14 days.

TOOLS

 
 
 

 

Market Research

E-Commerce Best Practices

My first course of action was to gain some context around the current E-commerce landscape online and determine specific improvements I needed to make for my redesign of Performance Bicycle. I found the Nielson Norman Group to be great resource for data driven best practices, not only for UX Design as a general topic, but for E-commerce specifically.

Over-Arching Goals

1. Create a good first impression

2. Keep customers on your site

3. Sell and build trust


DO’S AND DON’TS ON E-COMMERCE USABILITY

DO: Bigger Product Images

Large images can show more detail and multiple views offer even more information. This lets user see detail early on in the shopping and comparison process, helping users spend their time exploring the right products.

DO: More Robust Reviews

Offering additional information about the reviewer or by better summarizing the reviews, lets users find reviews that are pertinent to their situation or use. Review summaries help users wade through large numbers of reviews to see what common issues or strengths the product has.

DON’T:  Smaller and Hidden Product Descriptions: 

Descriptions can answer questions about use, benefits, care, materials, and measurements. Users have to be able to quickly and easily find and use the product description when they want to.

DON’T: Adding Items to the Cart

Users shouldn’t have to guess if an item has been added to the shopping cart. If users don’t know if an item was added, they may leave the shopping process to check the cart. Others may add the item again.

 

Task Analysis

After studying best practices, my first objective was to do a thorough Task Analysis of Performance Bicycle to identify immediate pain points. At first glance, I noticed three key challenges: 1) Overall layout and design was clunky and cluttered. 2) The site was difficult to navigate all-around making it difficult to complete desired task. 3) Style inconsistency — too many fonts, colors, sizes, and distracting advertisements throughout entire site.


Competitive/Comparative Analysis

 

While waiting for survey results to pile in, I was able to do a thorough comparative analysis. This analysis allowed me to not only better understand market competitors, and how they organized their sites, but to also gain some insight to how others have accomplished the same tasks with a different approach. I studied everything from direct e-commerce competitors such as Nashbar, Helen’s Bicycles, and Cannondale, to more boutique bicycle manufactures such as Linus, Brooklyn Bicycles, and Brilliant Co. My research also included taking a look at sites such as Everlane, Cuyana, and Amazon to better understand the overall e-commerce space online.

 

  1. Nashbar is most similar to Performance Bicycle and is by far their largest market competitor. While I appreciate the simplicity of their navigation, the overall look/feel of the site still felt clunky and obtrusive with poor UI and too many ads floating around.
  2. Brilliant Bicycle has simplified their design to the perfect degree — keeping the universal style clean, modern, and airy, while maintaining a simple and intuitive universal navigation. CON: With only 2 bike options, the site is not ideal for advanced riders.

  3. Cannondale is for professional and advanced bikers. The layout of the navigation bar includes images that correlate to the different types of bikes. The visuals on the menu help the users to identity the different categories.

 

 

User Research

Survey

 

Now that I had pinpointed some immediate challenges with Performance Bicycle, the next step was to determine what users felt to be problematic with the site. From here I was able to develop tailored survey questions in which I compiled into a Google Form and shipped off to users. The goal of these survey questions was to understand user demographics, behaviors, and overall needs while identifying my target audience and a more focused flow to tackle during my redesign.

 

Persona

 
 
 

Scenario

“I GOT MY BIKE STOLEN, AND NEED A REPLACEMENT LOCK”

Last month, after wrapping up a 12hr day at his office in Venice, Chapin went to go retrieve his bike outside to ride home and was sadly greeted by a broken lock and no bike to be found. While Chapin is no stranger to property theft in Venice, he is a fairly new rider, and was deeply regretful of his choice in a lock. Since then, Chapin has found a new bike but is in the market to find a perfect lock — one that is conducive to his lifestyle, portable, highly-rated, and most importantly extra-secure to avoid theft in the future.

 

 
 

USER NEEDS

  • Detailed information about products
  • High resolution product imagery to show scale, size, and material quality
  • Star Rating, aggregated user reviews
  • Improved navigation efficiency making it easier to find desired products
  • Simplified flow from homepage to product pages
  • Clean, simple, minimalistic design
  • Simplified check-out process
  • Accurate search results
  • Ability to find a lock that is conducive to lifestyle and alleviates core pain points

USER pain-points

  • Difficult for beginner and intermediate riders to find exactly what they need efficiently & effectively on Performance Bicycle’s current website.
  • Layout is cluttered, clunky, and difficult to navigate — lacks simplicity.
  • Unnecessary/redundant content on every page, creating a space that is overwhelming rather than welcoming.
  •  Inaccurate search results when using search bar.
  • Product Listing page does not show material quality in detail, or in scale.
  • Slow and redundant check-out process. Forms need to be simplified and updated.
  • The flow from task to task is disconnected, leaving the user lost or struggling to accomplish task at any given point in the overall flow.
  •  Navigation and information architecture is crowded, bulky, and too wide in scop

Ideation

 

With my target audience and persona now clearly identified I was able to begin the ideation process. After carefully evaluating the results of my research the design direction became clear:

  1. Chapin’s primary use case for going to performancebicycle.com was to buy a new bike lock (not to purchase a bicycle or any other accessory)— this task became the cornerstone of my redesign.
  2. A flow must be designed for purchasing a bike lock that was not only simple and intuitive, but served Chapin’s need to find the perfect bike lock that was conducive to his lifestyle.

The first deliverable at this point was to solidify the information architecture of the site and begin sketching the user-flow. I imagined how my user would go through the entire flow of purchasing a bike lock, accounting for every decision he/she might make.

Design Inspiration

While sketching out my user flow, I used sites like everlane.com, cuyana.com, and amazon.com for inspiration. I studied their various placements of navigation, sign-in, cart, hero banner, etc...

 

Re-imagined Site Map

Deciding to whittle away most of the categories in Performance Bike, I wanted my revised version to resemble Nashbar’s or Brilliant Bicycle's a bit more. Instead of deleting categories in Performance Bike, I combined ones that were similar to one another and ended up with a cleaner site map.

p2_site_map_ecommerice_final (1).png

 

User-flow

With an idea of how I wanted the categories to look, I started working on the user flow that consumers would journey through. I made sure to include new features that would enhance the user experience on the reworked site:

1. Lock selection tool accessible from home page and product listing page.

2. Big and beautiful product detail screens with improved layout and functionality.

3. Product detail page linking to external reviews and including a snapshot.

 
Screen Shot 2015-11-28 at 4.41.59 PM.png

Design  

 

Sketching

Before going into my Lo-Fi Wireframes I took to the whiteboard for sketching my initial concepts. 

Lo-Fi Wireframes + Prototype

After going to the drawing board and sketching my initial concepts, I was able to begin Wireframing in Sketch. This was my first time using Sketch, and I learned quite a bit in the process. A few key takeaways:

  • Organize art boards and naming layers early on to save time!!
  • Spend more time hand-drawing sketches prior to going to digital wireframes. Next time around making paper-prototypes will be an addition to my process.

Once my wireframes were complete I was able to pull them into Invision and create a clickable prototype that takes users through the flow of purchasing a bike lock


Let's Take A Closer Look...

For my redesign of Performance Bicycle I focused on revamping pages that already exist (i.e homepage, product listing page, checkout, etc..) as well as integrating a new feature to help users find their perfect bike lock. Below you can find more detail on these redesigned pages. 

 

Homepage

Before + After

 

The homepage is most important page of the website and therefore it should capture your target consumer immediately. It determines if the user comprehends the purpose of the site and stays on without bouncing to another destination. I implemented a few ideas to emphasize the community aspect of biking and cleaned up overall navigation and design. My user cares deeply about craftsmanship, quality, and the creators behind the products he purchases. Taking this into account, I decided to integrate a large, dynamic, interactive video spanning the whole top-section of the website. The video would feature the makers behind the products, and show beautiful destinations of active people riding across the globe. Additionally, since my user is in the market for a perfect lock, I integrated a carrousel tool, to help users find the  products that matter most to them (i.e bike locks, helmets, bicycles, etc..).

 
 

       Design Solutions + Improvements

  1. Simplified layout, decluttering to open an airy, focused space
  2. Moved primary navigation to the top, as well as search, login, cart, and help
  3. Consolidated and reduced category options within nav
  4. Removed adds, streamlined buttons, swapped buttons with icons
  5. Added a moving carousel for primary use-cases, including my chosen flow
  6. Added a high res, inspiring video across the top, showcasing the makers behind the products
 

Product Detail Page 

Before + After

 

Product Detail was improved as well staying consistent with the overall cleaner, modernized feel. Again, images were increased in size and information laid out in a much more aesthetically pleasing, linear manner. No more narrow descriptions like before — the revised version would take the entire lower half of the page with selectable (and collapsable)  tabs. I also integrated personalized lock recommendations below, so users can quickly navigate to similar, trusted products.  

 
 
 
 

DESIGN SOLUTIONS + IMPROVEMENTS

  1. Simplified layout
  2. conserved space drop down description, specs, + reviews
  3. Increased lock image size to see quality details, sizing, and design
  4. “Add to cart” button CTA front and center and easy to see
  5. Moved recommended products below, using a carousel to scroll through
  6. Only included list price that was relevant to the item
  7. Shortened bread crumbs
  8. Removed redundant information
  9. Moved social buttons to footer
  10. Listed shipping information right in title

Checkout and Confirmation

 

Before + After

 
 

Checkout was streamlined significantly in my redesign. I removed all redundant information, simplified forms, and eliminated an unnecessary sidebar. 

For the Confirmation page, in addition to showing the order number, I included links that encouraged users to stay on the site. Again, I wanted to emphasize the biking culture and philosophy rather than just be an e-commerce site for bikes and accessories. 

 
 

DESIGN SOLUTIONS + IMPROVEMENTS

  1. Simplified layout, decluttering to open an airy, focused space
  2. Removed redundant side bar
  3. Consolidated repetitive language and copy
  4. Removed adds, streamlined buttons, swapped buttons with icons
  5. Reduced the number of steps, and information fields on each page
  6. Added “Biking 101” guides on confirmation page
  7. Moved “Review” to “payment method” page
  8. Made progress bar more prominent keeping user informed on where they are at all times
 

 

New Feature: “Find your perfect lock”

The concept for this new feature was born out of Chapin’s struggle to find a lock conducive to his location, and where he stores his bike most frequently. Chapin found there is a learning curve involved when it comes to finding the appropriate accessories for his bike and felt uninformed the first time around buying a bike lock. Purchasing a bike is an investment and protecting that investment is almost more important than the investment itself.

The Solution to Chapin’s Challenge: Create a flow and algorithm that walks users through 3 easy steps and recommends a bike lock commensurate with their lifestyle.

 
 
 

Usability Testing + Findings

 

Once my wireframes were complete I was able to pull them seamlessly into Invision and begin usability testing. It was at this point in the process where I began to see the project truly take-form. Through the Quick-Time player I was able to record the interactions between my user-testers and the prototype. This decision to record became incredibly helpful when it came time to iterate on my designs and prototype.

 
 

       ITERATION DERIVED FROM USER TESTING

  • Add more content to homepage carousel to diversify page
  • Integrate reviews to the product detail page
  • Simplify last screen in “find your perfect lock” flow by removing recommended locks at the bottom of the page and replacing it with a CTA linking to filtered product listing page
  • Add recommended items on product detail page
  • Simplify check-out process by combining shipping method page with payment method page
  • Fix minor bugs and copy throughout
  • Change flow from Cart pop-up directly into checkout flow rather than to cart page first
  • Clarify progress bar in check out by adding numbers (looks like breadcrumbs)
  • Add confirmation page after the the purchase is made
 

Next- Steps

 
  • Continue research, brainstorm new or improved features, and iterate further on designs to serve user needs
  • Flesh out additional features in prototype based on feedback from first round of usability testing
  • Clean up wires from first round of design
  • Continue to hold usability tests with larger pool of users
  • Integrate business needs/goals into entire scope of design
  • Create high fidelity wireframes + prototype