Performance Bicycle

Redesigning an E-Commerce Site

 

General Assembly UXDI Project

 

I would be responsible for redesigning an e-commerce site to deliver an interactive prototype in the end.  I was given Performance Bicycle’s (www.performancebike.com) site as the site needing help but not much information outside of that.  It would be up to me to uncover any glaring UX issues and provide creative solutions overcoming them.


Brief

Performance Bicycle has been in business since 1982.  With over twenty five years of biking experience, they carry some of the top brands and offer a huge product selection.  They even have a slogan stating, "Where Great Rides Begin."  They have both brick and mortar stores as well as an e-commerce site with large inventory (ranging from 25 to hundreds in each category).


Solo

I worked by myself for this project.

Time Frame

2 weeks

My Role

I was responsible for user surveying, user research/interviews, persona creation, site analysis, comparative/competitive analysis, sitemaps, ideations, site redesign, user journeys and user flows, and finally, prototype creation.

Tools Used

Pen/pencil+paper, whiteboards, Google Forms, Illustrator, Gliffy, Evolus Pencil, InVision, Powerpoint


Figuring Out The Problem

Having no direction proved to be the most difficult aspect of the project. With no business goals and areas of the site to focus on, I knew I needed a starting point. It was up to me to figure it out.

User Research

I had to start somewhere before trying to uncover issues within the site.  Utilizing Google Forms, I geared questions towards understanding my audience's online shopping habits.

 
 

By splitting the users between current owners and potential bike owners allowed me to establish correlations in order to build stronge persona.  As expected, there were parallels between both camps which proved to be useful data points.

I also wanted to find out if there were similarities between their online shopping habits and other factors that were important for them.

Happy with my survey results, I laid out the data and any associations I came across would serve as the must-haves for my redesigned site.

Problems

Now that we have an idea for our persona’s online shopping habits, I now wanted to capture feedback on the site itself to pinpoint the areas I could streamline.   I sat with as many people as I could that fit the demographic from my results and recorded them as they went through Performance Bike’s website.  I also had the same individuals visit and provide feedback on a competitor’s website (Nashbar — www.nashbar.com) for comparison. Assigning numerical values to their responses, I was able to plug them into a bar chart.

 
 

Persona

Compiling all the data and feedback, I created the persona below. Nate is a young professional who recently relocated to Santa Monica and looking to purchase a road bike to commute to work.

 
 

Plan of action

Establishing knowledge of where the site needs improvement and where my users encountered problems, I can now plan accordingly. For site fixes, I planned to:

  • reorganize Performance Bicycle’s category (for our project, since we concentrated on just one user flow, I decided to reorganize bikes)
  • have better ad placement and present information in a clearer manner
  • revamp the layout to streamline the user flow from homepage → checkout
  • tweak the filtering to provide a much more practical method

I also wanted to add items I felt would improve my user’s experience on the site:

  • more emphasis on community and learning (I didn’t want the site to simply be a storefront for bike items but rather touch on the philosophy of biking as well)
  • proprietary tool to help users see a list of bikes suiting their needs
  • option to allow potential buyers to “try before they buy”
  • better info and reviews (links to external sites, publications, etc)

Design Process

I started my process by mapping out the user journey for Performance Bicycle to understand where my users encountered their pain points and uncover the areas that could be tweaked.  In the picture below, starting from the homepage and going counterclockwise towards checkout, the red boxes highlight any problem areas.

 
 

Sitemaps

Next I created a site map for Performance Bicycle to get a better idea of their organizational structure.

I compared it to that of Nashbar's - which was far more simplistic.

 
project_2_e_commerce_nashbar_site_map_.png
 

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

 
project_2_e_commerce_proposed_pb_site_map_.png
 

New Flow

With an idea of how I wanted the categories to look, I started working on the user flow. I made sure to include new features that would enhance my user’s experience on the revised site

 
 

Inspirations

For the site itself in terms of layout, I planned to change it drastically but at the same time not scare off current users. I took inspiration from biking brand websites (Trek, Cannondale, Specialized, etc) as well as car brands (Acura, Infiniti, Cadillac, etc).  All these sites are image rich with emphasis on the lifestyle, not just the products. I wanted to bring that philosophy to Performance Bike.

 
 Clockwise from left: Trek website, Nashbar homepage, Acura homepage. Middle: Performance Bicycle homepage.

Clockwise from left: Trek website, Nashbar homepage, Acura homepage. Middle: Performance Bicycle homepage.

 

For the product listing page, I was inspired by clothing and fashion sites. Big product pictures along with a more comprehensive and user friendly filters. I really enjoyed Michael Kors’ minimalist feel and Nordstrom’s filtering capability and chose to bring those elements into my design.

 Clockwise from left: Michael Kors quickview, Nashbar left sidebar, Nordstrom filtering, Michael Kors product list. Middle: Performance Bicycle quickview popup. Background: Performance Bicycle product listing.

Clockwise from left: Michael Kors quickview, Nashbar left sidebar, Nordstrom filtering, Michael Kors product list. Middle: Performance Bicycle quickview popup. Background: Performance Bicycle product listing.


Prototype

Ready to build my prototype, I started with hand sketches on grid paper to give me a guide before transitioning them into wireframes on the computer.

 
 

Prototyping

Building out my wireframes in Illustrator, I created everything the user might encounter as s/he goes from homepage to bike selection to checkout and finally confirmation. Feel free to access the prototype here.

For the Homepage I implemented a few ideas to emphasize the community aspect of biking.  Additionally, since my user is new to Santa Monica, I felt a feature where he could view bike routes in his city would be a helpful (and sticky) feature.

Product Listing was revamped with larger pictures along with a friendlier filter. Simple filters are placed at the top where anyone can view bikes by gender, brands, size, rating and price. The left sidebar contained more detailed and technical options such as drivetrain, crankshaft, gears, etc catering to the more experienced riders that come to the site. I didn’t want to alienate that demographic.

The Quickview now looks cleaner and less cluttered.  The user can easily view different angles of the bike as well as add directly to cart or schedule a test ride.

 

Product Detail was changed as well staying consistent with the overall cleaner feel.  Again, images were blown up and information laid out in a much more aesthetically pleasing manner.

No more narrow descriptions like before — the revised version would take the entire lower half of the page with selectable tabs.  Alongside Customer Reviews, there is now a link to professional and trusted publications.

 
 

Scheduling Center allows potential bike owners to test ride bike(s) of their choice at their local Performance Bicycle store.  My idea was to have a calendar showing the current week where the user can select time slots to make an appointment.

The Bike Selector Tool allows users to view a filtered list of bikes by answering a few questions. This gives them a starting point as they see bikes according to their gender, height, usage, and budget. My aim was to make the bike buying process less intimidating.

 

The Shopping Cart page is cleaned up, offering only relevant information that the user needs without being bombarded by too much noise.

Instead of having a page offering a choice of Login as User and Guest Checkout, I combined them.  In the Secure Checkout page, members could login and have their information filled in automatically.  The alternative is to directly fill out the information below that if you wished to checkout as a guest.

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. The message I wanted here was “we don’t just sell bikes, but we live and breathe bikes.”


Next Steps

  • Update current prototype with additional feedback from usability testing
  • Build out the map and scheduling features
  • Add more images to flesh out the site even further to resemble the final product
  • Finalize the categories that will go into the finished site
  • Upload product images and details