Redesigning an Online Bike Shop in Progress

Imagine the situation when you need to buy a bike for commuting and exercising. You are working full time, have a wife and two children. What would you do?

Would you shop from a larger retailer like REI online? Or use google maps to find the closest bike shop and walk there right away? Problem is that very few local bike stores have online shops where you can see what they can offer.

But what if you dont have time to spend walking to every store in the vicinity and reading through endless online bike forum discussions to figure out whats what?I want to share my first experience redesigning an e-commerce website for the local bike shop. With the rise of online shopping and the competition from the large retailers, small local bike shops face a lot of challenges.

Having an online presence and serving customers online is one of them. ResearchI have started by trying to gain as much understanding as possible asking myself questions. Who are the users of the bike shop?

Why do they shop at the local shop? And what are the strengths and challenges of this bike shop?C3 bike shop in Denver has two different locations, one near downtown and another close to the mountains.

Therefore, their customers have different needs. People living close to downtown more often shop for bikes for commuting and riding around the city. Another location focuses more on mountain bikes.

Keeping that in mind, I tried to make my design relatively universal in order to fit both types of customers. Through online customer reviews, interviews and the conversation with the store staff I have learned that customers had three major reasons to choose the local store: knowledge, customization and community. Even people who didnt buy their bikes at the store expressed a wish to shop locally in the future.

After synthesizing my data with affinity mapping I identified two user personas. Simon, an experienced veteran cycler, knew what kind of bike he would like he struggled to find what bikes the store carried and was frustrated when he couldnt see the specifications. He didnt want to waste his time walking to the store before knowing what would expect him and whether to trust the shop or not.

Problem Statement: Simon wastes a lot of time shopping for bikes, because he never knows what his local shops will be carrying before he shows up. Simon needs an easy and fast way to view and compare the specifications of multiple bikes online, from a shop he trusts.Shannon needed a simple bike to commute but wasnt sure where to start.

She needed expert advice but didnt want to waste her time and money going to the physical store. Problem Statement: Shannon needs a simple bike for her commute, but doesnt know where to start. She needs an easy and fast way to determine what bike will fit her needs without wasting her time and money hunting around.

Solution: C3 bike shop will allow Simon to get the feel of the store and to choose his bike without spending too much time on the hunt. Even if he chooses to test ride the bike first, he can save time and energy by using the online shop first. C3 Bike shop will allow Shannon to quickly determine what types of bikes will fit her needs.

She will benefit from the advice of the stores experts without wasting a lot of time hunting for the information elsewhere. IdeationI have started by brainstorming and sketching on paper. To give you an idea of my thought process, I will describe one example shown below.

I had an idea to add a button Can we help you find the right bike? on the home page leading to a short survey. The feature would allow Shannon to quickly get an idea of what kinds of bikes would serve her purpose.

After answering a few questions she would be given some options to consider. And then I asked myself if Simon would like seeing this button in the middle of the screen. Probably not since he already knows what he wants and the button would seem intrusive.

Hence, I didnt use the original idea while still trying to keep the functionality for Shannon available on the dropdown menu for bikes.Two other decisions I made were to use a vertical navigation bar instead of the horizontal and to include a larger image of a bike on the home page. Most of the stores websites have smaller bike images that sometimes make it difficult to see the details of the bike and to get a feel of it.

While this model works for larger stores that carry dozens of models it was interesting to see that most of the manufacturers who have only several models to offer provide large, full screen images. The screen-size image allows users to instantly get the feel of the store and gain trust in the quality of products and service. Vertical navigation bar that folds as you start scrolling creates more space for the visual information and reinforces the impression.

Wireframes and User testingI have started with low-fidelity wireframes to start user-testing soon in the process and iterate my ideas. While doing user testing I have noted several things and made changes accordingly:I have changed the checkout form from 5 initial screens to 2. Clicking through five screens created an impression of a longer checkout.

So in order to simplify the checkout process I have decreased the number of clicks required.2. I have moved the recommendations of similar products from the order confirmation page to the product detail page.

It is clear that it has more value there allowing users to compare bikes as well as potentially add accompanying gear.3. The current shop website has an option to schedule demo rides.

Bike Demos item in the global navigation directs users to the page where they can see a few models of mountain bikes. Further clicking opens a contact form that a customer can fill to schedule a test ride. Since a lot of users like Simon expressed a need to test ride the bike first I have tried to keep the functionality embedded in the design.

I havent yet designed that user flow but included the button Demo on the product listing page and on the product detail page. While conducting user tests I learned that it was somewhat confusing. It was not clear if there was a demo video or something else after the click on the button.

So I changed the wording to Schedule test ride. Future directionsIn conclusion, I havent yet done hi-fidelity mockups but there are several things I would want to change aside from developing other user flows:Adding an option to get more expert knowledge by contacting the store in Shannons user flow.Working on spacing in the placement of my elements.

Making sure that the search icon is easy to find at the bottom of the navigation bar and changing the hamburger menu icon on the folded navigation bar to arrow or simply changing the placement. Those are just a few of the changes I want to make further. I am at the stage of the process (both design and learning) when I would appreciate feedback and suggestions to consider while I keep iterating