Hub & Spoke is my second capstone project for Springboard’s UI/UX design course. Hub & Spoke is a bicycle e-commerce site that strictly sells online. They need to make changes to enhance their browsing platform and check out experience to improve usability and conversions.
Their target users are between the ages of 24 and 38, made up of 72% men, and are high-income earners. They take biking seriously and are willing to spend a lot of money on a bicycle, so they are very picky and do their research beforehand.
Business Goal:
Increase conversions from browsing to completion of checkout, thus increasing revenue.
Problems:
• 50% of users open an average of 7 item pages and then abandon the site never placing anything into their cart.
• 70% of the users who placed something into their cart do not finish the purchase. The users would abandon the cart at the registration page.
Challenges:
• Discover what information avid bikers compare when shopping for a bicycle.
• Determine what other features or information will help them to make a purchase.
• Design a smooth checkout with the option to complete your purchase as a guest.
Solutions:
• The PM believes that users are unable to determine which bike is best based on relative features and recommends creating a “compare product feature” to the site.
• Currently, in order to make a purchase, the user would have to create an account. Because of this information, the PM would like to add a guest check-out to solve this problem.
I started the project by doing a competitive analysis to see how other companies are designing their comparison features and guest check-outs. First, I looked at some of the major bike sellers and then branched out to look at how other industries are helping shoppers compare products.
During this research, I educated myself on the different aspects of the bikes that were being compared and what they were. I also looked into different aspects of biking to help me develop questions for my survey.
With the time constraints and the type of information I wanted to gather, I decided to use a survey. The survey that I created included multiple-choice, open-ended questions, and logic to direct different types of shoppers to different questions designed to gather quantitative and qualitative data. I split the survey into three sections, depending on where the surveyee purchased their bike(s) and if they prefer a local bike shop, online shop, or could go either way.
I then used the data and answers collected to create an affinity map to synthesize the raw information.
I was able to gather information from 73 different people. From them I learned:
• Just over half of them preferred purchasing bikes at their local bike shop
• About 85% were men
• The majority ride road bikes
• The majority shopped for or researched bikes on a computer rather than their phone.
Most mentioned being able to test ride a bike to see fit and how it rode.
The personal aspect of shopping at a shop was also mentioned a lot. This included things like, Q&A, advice, customer service, support, and being able to talk to a person with more knowledge/expertise.
Overall it seems that the physical aspect of testing the bike out and the fit are the main reasons to purchase at a local bike shop and not online.
Cyclists who prefer a local bike shop would need these key aspects to consider buying online:
Cyclists found these features to be the most helpful when shopping online:
The top 2 mentioned were:
The next 2 were:
The top 2 aspects users would look for are:
With this information, I was then able to brainstorm and prioritize the aspects and features to include in Hub and Spoke’s comparison feature to best assist the buyer in their search for a new bike.
From the data and insights collected, I was able to prioritize the information in the comparison feature as well as brainstorm any smaller features within the comparison feature to help shoppers make their decisions quickly and easily from there.
Here is the order of the sections and why:
General Specs: The purpose of this section is to allow users to quickly scan some of the general information and components of the bike so they can decide if they want to dive deeper or not.
Video Reviews: While doing my competitive analysis I came across some videos on some bicycle websites. The videos showed the specific bikes in action with a rider giving the highlights about it. I also came across some clothing/shoe sites that showed how the different products fit on a model. These two videos gave me the idea to include HD quality videos in the comparison feature. To elevate the videos would consist of the bike in a studio and in action. While this is happening there’s a voice over talking about the pros and cons of the bike and overall ride and feel of it. The video would end with different-sized riders getting on a bike while showing their measurements and different angles. This would help users to get an idea of which bike size would fit them and how it would look. This feature would be one of the closest things to actually testing the bike out in person. It also touches upon three other aspects that users look for: High definition visuals, reviews, and some sizing help which leads into the next section.
Find Your Size: The next feature helps the user to find the size that will fit them best. The first part of the section has a feature where the user can plug their height and inseam in to find what size bike would be good for them from each brand and model in the comparison. This is a helpful start since bike sizing can differ from company to company.
Virtual Fitting: The Find Your Size section also has information about Hub and Spoke’s Virtual Fitting service. From here the user can learn more about it or book an appointment (where the user will also learn more about it). The user will be able to book a fitting and be able to talk to an expert about the bikes they are looking into. This section not only will help with fittings but add a bit of the customer service / expert advice that some users like from the local bike shop.
Bike Geometry: This section shows the measurements of the different parts of the bike for users to compare which bike would fit them and their ride style best.
Specs: This section goes into more detail about the different components that make up the bike. I kept this for last since it is the most dense information and can be overwhelming to come across at first.
After working through the comparison feature I turned my focus to the Guest Checkout feature. While doing my competitive analysis I was able to take note of elements and patterns from the different ecommerce sites that I felt had high usability and clarity. By doing this I was able to see how many screens I needed and what needed to be on those screens without having to reinvent the wheel.
Even though this project was set up to appear like an established company that I would be working for I had to come up with a brand and style guide based off of the information that was given to me. The brief states that the brand personality is that of an expert in the field who is always knowledgeable about the very latest trends and best products related to biking. It attributes areavvy, focused, serious, dependable. With this information I came up with Hub & Spoke. I chose the name because most people know what a hub and spoke are relating to a bike or other wheeled vehicle. The t word brand name is also something that is current and modern. The actual logo mark’s shape takes inspiration from vintage bicycle head badges. The icon within that is an abstracted and simplified handlebar and front tire of a road bike. For the main brand color I wanted to go with something bright and vibrant. It gives a nod to racing, gold medals, and road lines. The rest of the UI style guide is very clean, simple, and modern. It is meant to be taken seriously and can be trusted.
With the comparison feature planned out, I was able to design a user flow that would take the user from the home page through the comparison feature (and sub-features) to purchasing a bike as a guest.
With the user flow, I was better able to visualize and organize how the screens would look and how they would be interacted with.
With my time restraints, I decided to do a few rough sketches of the comparison screens and then used Sketch to create my wireframes.
I conducted the first round of usability testing on the low fidelity wireframe mockups of the Hub & Spoke E-commerce site. The purpose was to discover usability issues, how the guest checkout flow feels/looks, and most importantly how the comparison feature is received along with its additional features. For the comparison feature, I specifically want to find out how intuitive it is to add bikes to the feature, if all of the information is legible, if the info presented is in an order that makes sense, how the “find my size” / virtual fitting features do with users, and gauge interest in the video feature and its content.
I conducted tests on five different individuals that are avid cyclists and have either purchased bikes online, are currently shopping, or have done research online.
I synthesized the information from the usability tests and discovered that:
1. The comparison feature needs a few updates to help with usability and clarity.
2. Overall the participants felt the checkout process was smooth but had a few suggestions.
3. The Find your size / Virtual Fitting concept got positive feedback but needed some updates.
The next step was to convert my wireframes into the hi-fi mockups. During this period I brainstormed and iterated some ideas and layouts to address the issues.
1. Updates to the Comparison feature:
2. Updates to the checkout process:
3. Updates to Find Your Size/Virtual Fitting flow:
For this second round of usability testing on the hi-fi prototype I was hoping to discover new usability issues, if adding the “View Bike” and “Add to Cart” buttons are helpful, if adding a collapse/expand function to the different sections is helpful/intuitive, to see if the updates to the Find Your Size/Virtual Fitting flow has any usability issues, and to see if users have any issues with editing information during the checkout process.
This round of testing was also conducted on 5 different individuals that are avid cyclists and have either purchased bikes online, are currently shopping, or have done bike research online.
Through this round of testing I discovered:
After this second round of usability tests I did another round of ideation and updates to address the issues from the 2nd usability test.
From feedback given by the two rounds of Usability tests, I feel that the added comparison feature will help those 50% of users that looked at several different products by allowing them to easily compare some of the different products they are interested in and in turn choosing something that suits them best. In addition to the easily read informational charts the Video Reviews, Find Your Size, and Virtual Fitting features within the comparison feature were given positive feedback. They are key features that would help potential buyers to feel more comfortable and confident in buying a bike online.
The addition of the guest checkout should also help convert the 70% of users that abandoned the checkout process once they hit the registration page. The new checkout flow is designed to be easy and to remove added steps of having to sign up.
I feel my choice of using a survey designed to collect both quantitative and qualitative data worked out for me and this project. Though, after going through the process and receiving information from the surveys I would have asked some questions differently and added some new ones as well. At the end of the day I was able to create a solid design from the information, but I do feel I would have benefitted from some more research about biking and interviews up front.
