GA 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 client that needed help but not much information outside of that.  It would be up to me to uncover any glaring UX issues and provide creative solutions to overcome them.

Brief

Performance Bicycle has been in business since 1982.  With over twenty five years of biking experience, they carry some of the nation’s top brands while offering a wide 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 a staggering inventory (ranging from 25 to hundreds in each category).

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

Time Frame
2 weeks

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

Finding 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 user groups between current bike owners and potential bike owners allowed me to establish correlations in order to build stronger personas.  As expected, there were parallels between both demographics 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 they may deem important.

Happy with my survey results, I started highlighting the associations I came across as the must-haves for the redesigned site.

Pain Points

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 simple bar chart.

Persona

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

Action Plan

Knowing where the site needed improvement and where my users encountered problems, I can now plan accordingly. For site fixes, I planned to:

• reorganize Performance Bicycle’s category (for this 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 a touchpoint 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 highlighted 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.

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 with a much leaner site map.

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 the user 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 customers. I took inspiration from biking brand websites (Trek, Cannondale, Specialized, etc) as well as car brands (Acura, Infiniti, Cadillac, etc).  All these sites were image rich not just on the product itself, but with emphasis on the lifestyle. I wanted to bring that same philosophy to Performance Bike.

For the product listing page, I was inspired by clothing and fashion sites. Big beautiful product pictures along with 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.

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.

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