UX/UI Product Designer
Thumbnail_Responsive.jpg

Responsive Web Design

Case Study

Designing for a classic hometown cyclist store.

Timeline 80 hours (5 weeks)

My Role Research, Wireframe, Updating Branding, Prototyping


Background

Rocky’s Cycling currently doesn’t have website. I did contact them but they are very attached to their facebook page and didn’t see the need for a website. I decided to move forward on my own since it would still be a good learning experience. These were my research objectives. 

What kind of website would best suit this business? 

  • Understand what makes a good bike shop website?

  • Understand what their business brand is about?

  • Understand what makes them stand out from their nearby competitors?

Methodologies I will be using are competitive analysis, interview bike users or people who have purchased a bike and online survey. 

 

Research

In-Depth Competitive Analysis

I researched competitors in surrounding towns. A few had permanently closed. Marion, Prospect and Delaware are the closest to these smaller towns if they want to avoid driving to bigger cities like Columbus or Marysville.

Breakaway Cycling, Delaware, OH

Strengths- Full services shop, online sales, accepts trade in used bikes. Provides a few rentals. Carries electric bikes.

Weakness- Inventory shortages. Due to high volumes scheduling repairs has a waiting list.

Jeff’s bicycling repair and shop. prospect, oh

Strengths- Online purchases available. Carry well known brands, and electric bikes. Organizes bike events for the community.

Weakness- Business hours are confusing and not consistent, only open 3 days a week, but google schedule is not updated with what they have up on their website and facebook page.


Conducting Interviews And Online Survey

I interviewed two people, Participant 1 was an active bicyclist. He utilizes it when he is commuting short distances. Due to the road conditions and the type of bike he uses he does have a lot of maintenance and repairs he constantly uses. Participant 2 bought a bike for his wife and talked about the specifics they were looking for and sticking to a price range. I learned a lot from these two interviews. 

Survey

I posted a survey online and got 16 participants. The survey was for people who have bought a bike for someone or have owned a bike themselves. I wanted to see what their decision factors for purchasing a bike. Also how often do they have to repair or keep up with maintenance.

Insights I Got

  1. The majority didn’t do any research before purchasing a bike. However, some of them do look for certain qualities and features like the size of the seat, how comfortable it is, the size of the bike, and tire size.

  2. A few users haven’t used their bike long enough to need repairs, and others have partners that know how to do these repairs. Unless it’s major then they will take it to a mechanic.

  3. Most users would like to shop locally instead of a major retail.  

Affinity Mapping

I did clusters of the responses I got. Here are some.

Trends I Noticed From My Affinity Mapping

4 out of 16 participants

They would do some research before buying a bike. 12 participants did not do research before buying a bike.  

Preference when shopping

When asking where they prefer to buy: large retail, small business, or online the answers were evenly divided. 5/16 like large retail, 6/16 prefer online and 5/16 prefer small business. 

Would they prefer a certified mechanic?

Most of my participants know or have someone that can repair bikes. 10 out of 16 would consider taking bikes to a CM if the repairs were more complicated. 

12 out of 16 participants

Had some decision factors when buying a bike. Size of tires, Handels, Weight capacity, Comfort, ect. 


Defining

POV Statements

I would like to explore more ways to relate to the users in what they would most likely buy from a bike shop so we could build customer loyalty. 

  • I would like to explore more ways to facilitate bicyclists who do go to a certified mechanic by providing an easy contact method for scheduling or consultations.  

  • I would like to explore more ways to keep shoppers engaged with the website, so they can learn about any new products and also make them want to use their bicycle more often.    

HMW Statements

  • How might we show a good variation of bikes?

  • How might we categorize the bikes?

  • How might we determine the decision factor to purchase a bike?

  • How might we show the sizes and weight capacity of the bikes? 

  • How might we add accessories so clients return to the bike shop web page? 

  • How might we provide the shopper with the right amount of description/info without providing too much that it overwhelms the shopper? 

  • How might we build a brand that is inclusive to all ages?

  • How might we build a brand that is inclusive to all ages?

  • How might we contribute to the community & get people excited and want to use their bikes more?

  • How might we create a reward program for shopping with us for bike needs?

  • How might we create a map for surrounding counties to find location?How might we differentiate this bike shop over the surrounding competition?

User Personas

I used my two interviews as my personas. I felt they were great examples of customers that could shop at a bike shop.


Site mapping

These are the pages and categories that the website will offer. The goal was to try to keep things simple and easy for customers to find. For now the only online purchases would be a few selected bikes while still encouraging the customers to visit their location for more options.

User Flows

Two user flows were done for two scenarios.

  1. The first one is for looking for bike lights and completing the purchase.

  2. The second scenario is for scheduling a bike repair with a mechanic. 

Task Flows

Two task flows were done in relation to the user flow. 

  1. The first one is to purchase online.

  2. The second one is filling out the request form to schedule a repair with a mechanic. 


Designing

Style Tile

Color palette: I wanted to keep the original colors of Rocky’s Cycling which are black, white, and orange. I added a few more different shades of orange and added gray and a lighter black. I think adding the colors gave it more depth.

Logo: I changed the logo. On their facebook page they don’t really have a logo, it’s just the name of the shop & the colors. Their door sign has a different design also. I made a tire and some bike marks in figma using vectors and different lines. 

Style: I want to keep a dark background and have pops of color on the website. Although the background is dark, the pops of orange make it feel friendly and fun. 

Brand values which are family oriented, efficient, athletic and outdoors. 

Low & Mid Fidelity Wireframes

I did a lighter version first. For the ecommerce page I thought info cards would display enough info customers needed that would spark an interest and learn more about the bike and purchase it.

High Fidelity Wireframes

There were a few inconsistencies. I moved the logo to the middle, for the size of it I didn’t want to make a smaller one so I moved it to the center.

The bottom bike section and apparel & equipment had a few aligning problems, I couldn’t find the right spacing so I took out the label and centered aligned “view more.”  

I also changed the footer. I decided it was best if it didn’t stand out.


Prototyping

Prototyping took longer than expected. Once I thought I was ready for usability testing I had to go back to my prototype and make more changes. For example some radio buttons would both fill in when only one was needed. Also my search buttons and email subscription wouldn’t show it’s filled in state.

Challenges

My screens were not loading like how a desktop should be viewed. It was showing the full length of the page and was hard for participants to see what they were doing.

Solution

I went back and change all the frames to a mac instead of a desktop. It helped, but I had to resize a few sections to make responsive again.


Usability Testing

I conducted an unmoderated usability test. User Task: Participants were given the following task.

  1. Purchase a bike online.

  2. Submitting a contact form so mechanics can talk to the customer and schedule their repair when necessary.

    Goals:

    1. To see if the website is user friendly.

    2. The process of purchasing online is self-explanatory. 

    3. Users would be able to navigate to other pages on the website.

Results of usability testing

I was on a time crunch so after having the test up for one day I closed it with only 4 participants recruited. There were a lot of misscliks rating at 33%. My assumption the animation on my components were off.  Overall I had a 100% direct success of participants completing the test. Zero participants abandoned the usability test, I considered that a success too.  

The feedback I got was good. I think I should try something different with my services & repairs page and the contact form, so that is what I worked on, along with other iterations that were needed.

Iterations On Wireframes

I fixed my components, animation and alignments. I think the results work a lot better. & It helped my navigation bar interact more efficient. It was a little wonky, all of the sections were highlighting when a different section was being selected. I changed that to hover state and it looks better

Key Takeaways

Researching competitors is always beneficial. Not to copy what they are doing but to stay resourceful & compliments the brands value for your clients, and help the business stand out more.

  1. The different stages of components (hovers, and click ons, ect) should be consistent with your design and are just as important. 

  2. Visual hierarchy needs to reflect on all pages. Not to focus on just aesthetic but by the most importance to the least. 

  3. Branding,  I worked on the logo and kept their brand colors present throughout the design process. I think if a business can work and build with their branding it can benefit them and distinguish them more.