bnilssonuxdesign

Bike Loft North

Bike Loft North is a local bike shop that sells products to a variety of customers, but focuses mainly on the adult cycling enthusiast market.  Increasingly, bike shops have had to rely on other sources of revenue to make ends meet, as the sales of the local Independent Bicycle Dealers have dropped due to online retailers and  low profit margins on bicycle sales.

BLNmacbookmock.png
 

Project - To develop a site design for Bike Loft North that provides information and online scheduling.
Target User - Current and new Bike Loft customers.
Deliverables - A responsive desktop site that works in mobile and tablet formats.
My role - Research, planning, design and implementation.
Tools - Sketch, Invision, Adobe Suite and Silverback

 

Process

BLN process graphic.png
 

Research

From my secondary research I learned:

  • Bicycle manufactures may sell their product directly to customers in the future.

  • Bicycle shops provide a valuable service in the area of repairs, education and community building.

  • Bicycle shops will have to change their business model to compensate for a loss in product sales.

 

Interviews and Survey

Being as I had little time to wait to interview people for this project, I chose to also make an online survey for end users to take.  For the structure of the site, it was important for me to know what content people would find useful and important v.s. content they would never look at.  Also, I wanted to know whether being able to schedule an appointment for a service would be valuable to the end user.  To find this out, I asked questions about how they use their favorite retailers websites.

 

  • 75% of respondents use their local shops website to determine hours, contact and location info, group ride info, brands they carry and sale info.

  • 80% use or have used online retailers to purchase cycling related items.

  • 84% of respondents use social media, blogs and newsletters to stay informed on cycling related activities.

  • 62.5% of respondents said that they would use an online repair scheduling system.

 

Personas

From my interviews and survey I was able to test my assumptions against my research findings in order to better understand the end user.  While many if not most of the target audience are tech savy and well informed consumers, all are still willing to yield to the customer experience offered by their local bike shop.  My friend Doug perfectly fits that mold.  While he considers himself an expert in cycling gear, he enjoys the experience, the community and the boost to the local economy that his local bike shop provides for him.

dougpersona.png
 

Information Architecture

Bike Loft North's website has a huge amount of information in it, which, while it was very impressive, does not meet the end users specific needs, according to my survey results.  To that end, I decided to drastically prune out the links and content with the intent of providing a more streamlined site.

Bike Loft site map

Bike Loft site map

 

Interaction Design

Below are my user flows for several entry points into the site. The user flow I followed for my final prototype was following a link to the landing page which features the online scheduling CTA first.

Bike Loft user flow

Bike Loft user flow

 

Sketches

Doing quick sketches of what the site interface might look like has worked out well for me.  I like the zen concept of first idea, best idea, although, I usually end up exploring more than one idea.  These sketches really help me when it comes to creating the UI for my low fidelity wireframes.

Bike Loft desktop landing screen sketches

Bike Loft desktop landing screen sketches

 

Wireframes

From those sketches I developed some of the initial low fidelity digital wireframes using sketch and then started prototyping using Invision.  I was getting used to using Sketch, so I started with the mobile screens to get practice and then moved on to the desktop screens for my final low fidelity wires and prototype.

Bike Loft desktop screen wire frames

Bike Loft desktop screen wire frames

 

UI Design

Bike Loft was intent on keeping their logo, so my job was to develop a color and stylistic scheme that would reflect colors and typefaces that they use in their logo.  I wanted to feature lots of lifestyle and product images in the site, so additional colors would be mostly used to guide the user through processes and to show he user where to click.  I did leave the interpretation of the UI Kit open until I was able to experiment with the prototype to see what people thought about it.

Bike Loft UI Kit

Bike Loft UI Kit

 

PROTOTYPING

After I had suitable low fidelity wireframes and a usable UI kit I worked on putting together my prototype.  I had to add quite a few screens after testing the prototype, as I felt it would make sense to the end user to have a few more visual ques.

Bike Loft high fidelity prototype screens

Bike Loft high fidelity prototype screens

 

SUMMARY

After testing my prototype, I gained valuable insight during my conversations after the test.  I asked very general questions about each users experience.  While each user made it through the task (making and appointment online using the available options) in less than a minute, everyone felt that leaving the entry of personal information until last was important.  Also, users felt that adding additional visual cues during the steps in making an appointment, and the flexibility to go back and change times and dates was important.  Overall, I felt that the project was a success, but definitely could refine the prototype further in its use of color.