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.
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).
I worked by myself for this project.
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.
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.
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.
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.
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)
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.
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 witha cleaner site map.
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
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.
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.
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.
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.
- 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