April 04, 2016
Research, Synthesis, Wireframe, Prototype, Interface Design, Visual Design, Keynote
Responsive Website, Advanced Wireframes, High Level Prototypes, Visual Design, Usability Testing, Design Iteration
Our project focuses on delivering a digital solution for Public Bikes, a San Francisco based bicycle retailer. Our goal for this project was to deliver a digital solution that would help Public Bikes sell more of its new line of electric bikes.
The research and designs below explain the whole process we went through in 3 weeks total. This was a concept project developed under the General Assembly UX Design Immersive program.
Public Bikes is a San Francisco based bike retailer that sells a new line of electric bikes. They believe in their product, however they are having difficulty selling them in the US market. Public is looking to understand what they can do on their website to turn this around.
ITERATIVE DESIGN PROCESS
Our design process consists of a series of methods that help us better understand customer needs, expectations and current problems if there are any. Understanding the user and identifying challenges helps us create a better solution.
IDENTIFYING THE RIGHT PROBLEM
Talking to users and understanding the business helped us focus our efforts on the right issues. After interviewing 10 customers, mostly non-ebike users, we found that most of them heard of e-bikes but either weren't aware of the possibilities or never tried one. We also found that a test ride is the most important aspect of the decision process when purchasing a new bike. Here are the 4 key insights that helped us ideate on several possible solutions.
KEY INSIGHTS FROM PRIMARY RESEARCH
Mapping out a user's journey with the current product/service also helps us identify key opportunities when designing a solution. The two key opportunities we identified on Public's current website are:
Prospective buyers are in the discovery phase and are curious by the idea of getting a new bike. When landing on the current Public web site however a user is overwhelmed by options on the site, cognitive dissonance of what they’ve heard about Public Bikes and what they are seeing on the site.
User looks into Public E-bikes but doesn’t understand the benefits and how it can fit into their lifestyle. Seeks help from friends or forums to discuss best options and the benefits. Education phase can last 3-6 months before entering a store.
Through extensive user research we learned that shared learning is crucial for customers informing customers and that somehow we needed to raise awareness about the e-bikes overall. Several possible solutions came forth including an infographic showing the possibilities, a landing page technically explaining the difference between a regular and an e-bike and more. We tested some of the ideas and voted for the most rational solution.
Our solution focuses on three main areas:
We decided to create a digital educational component for the existing e-commerce site that would help close the gap between awareness and test ride.
We would do this through a product comparison feature on the homepage, shared learning through e-bike user stories and benefits that encourage meaningful test rides.
Once we had a clear understanding of the solution we started wireframing and prototyping to test our solution with actual users.
NATIVE APP OR MOBILE WEB?
A question often asked when designing for digital is "should we build an app, or should we have a responsive website that is usable on most mobile devices"? The answer is not often clear so we asked our users and none of the users needed to use an app for comparing, or evaluating bikes even in the toughest moments. Being able to access the information they needed through a clear website was all they needed so we decided to build a responsive web site that could help our customers easily book a test ride, go through bike models, or communicate with our client.
The mobile website we developed was just as easy and appealing to the user as the main site. We also developed a style guide for our client so that they could easily apply the new look and feel for any new addition or change on their new website.