E-Bike Library

Electric Bike Rentals by MomentumMag

Vancouver, British Columbia, CANADA (September 2017)

Project: Optimize existing website into a mobile responsive, eCommerce website.
Role: User Experience (UX) Design, User Interface (UI) Design

The Opportunity

E-Bike Lending Library is a web-based platform based in Vancouver, British Columbia with hopes to expand in Seattle, Washington. It is the brainchild of innovative bicycling media company, MomentumMag.

The platform allows users to test ride an e-bike for a two-week period, at a very low cost ($25)— to assess if the bike is an ideal solution for their urban life needs.

By having the customers fill out surveys before and after the rental, the organization allows manufacturers to gather direct customer feedback on their products.

Project Goals

  • Grow awareness for the e-bike community in urban Vancouver
  • Enticing, responsive, mobile-friendly web design / landing page
  • Customized booking system for e-bike library

The Solution

Create a responsive, eCommerce web app, where E-Bike Lending Library can introduce alternate transportation to the urban people, introduce a culture that is fun, innovative and eco-friendly.

To get started with this project, we followed a pattern, which time and time again has shown to be very effective. We started off with:

  • Research where we conducted interviews, surveys, contextual inquiries to learn about the goals from the business side, identify the goals of the users.
  • Valuable information from research helped us plan some designs and see how we can solve this problem.
  • In the design stage, we were able to sketch out our ideas and see how our solution might translate.
  • We then were able to prototype using tools such as paper for low-fidelity, Proto.io and InvisionApp (for mid-fi and high-fi) to test with real users to get feedback and iterate the design that will allow a better experience.

Tools

Pen, pencil, paper, sticky note: Interviews, story board, affinity diagram, feature prioritization, design studio, wireframes & low-fi paper prototyping and user testing
Axure RP: User flow & site map
Trello: Project management, scrum notes
Slack: Communicate, share and collaborate ideas
Sketch: Persona, mid-fidelity & high-fidelity screens
InvisionApp: Hi-fi prototyping & user-testing, client walk-through
Photoshop CC: Image edits, animated gifs, screen/product mockups
Illustrator CC: User-testing results
Keynote: Final presentation

Domain Research

From conducting domain research, we learned that there were few local companies that rented out e-bikes along with regular bikes.

We also looked into other markets that were similar, such as car sharing services. Some features that they all had in common were:
• Section on “How it works” (educational aspect)
• Different plans
• Ability to pick up / drop off at different locations
• Available for short periods of time

Competitive & Comparative Analysis

We conducted a CCA on the local market to see their competition and different features that were available. One main thing we learned was that none of the companies rented bikes to see how they fit into the customer’s lifestyle—but rather for quick hour or two, or in some cases whole day for leisure purposes. The most similar to E-Bike Lending Library was Mobi Bikes. Some features they had in common were memberships, instructions / educational tips, safety information and accessories. Unlike other competitors and E-Bike, Mobi has the capability to rent from any location and return to same or any other location.

The main feature that lets E-Bike Lending Library stand out is the capability to rent the bike for two weeks, for such a short amount ($25), and see how it fits into their lifestyle. The customers get their deposit back when the return the bike and fill out a short survey on their experience.

We also analyzed how E-Bike Lending Library fairs against other such services on a global scale. Most of the companies we came across where large companies with businesses spanning many locations—some that were even global.

Out of the 5 we looked into, only 2 (Bmore & Spinlister) had bikes that were electric. Just like the local competition, all of these allowed users to pick up / drop off from multiple locations and could only rent for a short periods of time (up to a whole day).

Interviews

We were able to interview nine (9) people to gather qualitative data.

From the interview we learned that almost all users thought $25 for 2 weeks was a great deal.

We also understood that although users find electric bikes to be a convenient factor, eco-friendly and especially helpful when going up hill, they would only consider buying one, if they found it at the right price and especially if they saw it becoming a part of their daily routine.

“Bike-share is an ingenious idea. It will help people like me test it out and see which e-bike fits into my needs. Although I ride bike for both leisure and commute, e-bike could help play a role in making uphill commutes much easier.”

—Interviewee 1

“Electric Bikes are great. They are little above my price range, but they are very eco-friendly.”

—Interviewee 2

Survey

We conducted survey on our own, as well as relied on E-Bike Lending Library’s survey to gather quantitative data to understand the users, their motivations & frustrations, to help support our design decisions.

Some of the key findings based on survey, conducted on client’s social media platform:

50% have been using bicycle as a mode for transportation for 5 or more years.
67.3% sees an e-bike fitting into their lifestyle for commuting purposes.

84.6% believe they are useful on hills.
32.7% would travel 5–10km on average for most days of the week.

30.8% finds range as the most important factor when considering e-bike.
73.5% found price to the key factor, preventing them from getting an e-bike.

Affinity Diagram

We took the survey results as well as the qualitative data gathered from interviews and created an affinity diagram.

Affinity diagram helps us group points that are similar into different categories and within each category, helps us notice certain patterns.

Feature Prioritization

Once we identified the features from stakeholder interview, organizational & domain research, user interviews / surveys, we prioritized them using two different methods.

The first was the bucket method where we placed them into three groups: Must haves, nice-to-haves and not needed.

The second method was a 2×2 matrix where we measured the features’ impact level -vs- effort level to prioritize them.

Although two different methods were used to prioritize the features, we relied on our research from both the business goal, as well as the user needs to place importance — or the lack thereof.

Based on the research part of our process, we were to able to identify the goals of our users.

Primary Persona

The affinity diagram allowed us to create a persona as a married professional couple, aged 38 & 42, living in Vancouver as a Management Consultant and as an Accounts Manager.

Their motivations include:
• being eco-conscious and the wanting to save money (intrinsic) and
• to leave a positive impression on their children (extrinsic).

Some of their goals are:
• convenient and easy way to get to work
• would not like to use car as much (save money on insurance, parking, gas, eco-friendly)
• would like to run errands with short distances from work and home
• would like to learn which electric bike fits into their urban lifestyle

Some of their frustrations include:
• not having a transit stop close by home
• parking being too expensive near new work place
• gets to work sweaty having to ride the last leg uphill, while riding their personal bicycle
• can’t run errands on the weekend with kids (day at the part, soccer practice, grocery shopping) without having to use their car

Information Architecture

Once we got to learn about the business goals and the user goals, we set out to plan our design. We started off with a user flow to meet our MVP and as well as created a structure of the app to see where all the elements lived.

But before that, we conducted an open card sort to help sort out the navigation and content taxonomy.

User Flow

We mapped out a possible user flow for our persona to complete certain tasks to test the functionality and goals of the Minimum Viable Product (MVP).

Site Map

To get a visual representation of the layout of the website, we created created a site map. We organized the structure based on key features we identified were important for our target users, based on research.

User Story 1

As someone who is unfamiliar with e-bikes, I want to learn more about them and find a bike that meets my needs (cargo bike).

Scenario 1

“Kerry is a 38-year-old accounts manager working for a catering company in Vancouver for seven years. She originally moved here from Portland, Oregon after completing a bachelor’s in anthropology from Lewis and Clark College. Biking has always been a big part of her life, but with two toddlers it’s near impossible to cart them both around the city. Instead, she finds herself limited to places walking distance, or uses a car-share service when absolutely desperate. Kerry prides herself in the fact that she and her husband don’t have a car, and feels much safer on her bike. A coworker mentioned renting an e-bike for a week at this place called the e-bike library, and suggested she should check it out.”

User Story 2

As someone who bikes to work daily, I’m looking for efficient, affordable, eco-friendly transportation that doesn’t leave me sweaty at work.

Scenario 2

“Alan is a 42 year old management consultant at Accenture. He grew up in Ontario, and moved to Vancouver after University. Alan places great importance on maintaining an active and earth-conscious lifestyle. Six months ago, he visited his cousin in Barcelona and went on an e-bike tour. Immediately he thought how much an e-bike would add to his family’s life. His wife however, is less convinced as she has never tried one. Knowing she will want one if she just tries it for a few days, Alan searches electric bike rentals in Vancouver online.”

User Story 3

As a product manager at an electric bicycle company, I’m looking for ways to promote our new e-bike in North American territories.

Scenario 3

“Claudia is a 31 year old product manager working for Evelo electric bicycles. A Seattle-based company, they are looking for ways to expand e-bike popularity and their own market in North America. She is current on all the cycling blogs and magazines around the world, and actively manages the blog for Evelo. Claudia commonly visits momentummag.com for the most current and respected product reviews and tips for the urban cyclist. One day while reading a momentum mag blog on types of electric bikes, she notice the “e-bike library” tab on the main navigation. She decides to click on it.”

Design v1.0 (Low-fidelity, Paper Wireframes)

Our design started off with sketching wireframes on paper, based on the user flow and the sitemap. My UX partner and I did a design studio (my design studio sketches on right) for the landing page of E-Bike Lending Library.

For the design studio, we set a two-minute time frame to create a landing page. We then spent one minute discussing our ideas and took each others feedback into consideration and ran another sprint for two minutes refining our previous one. From there, we discussed what our users would find beneficial from our design and checked to see if it would meet business goals.

Prototype & Testing v1.0 (low-fi)

Once we came to a consensus, we sketched out the remaining set of screens for a minimum viable product (MVP) to fulfill three tasks that our users would be able to complete.

The screens below are couple of screens finalized for low-fidelity wireframes. Together with few other screens, we created a paper prototype and conducted user testing with 3 tasks.

Tasks for User-Testing

• As someone that is unfamiliar to electric bikes, learn about them
• Find an e-bike that would be appropriate for up hill climb
• As a sponsor, how would you go about looking for partnership opportunities

Feedbacks (User-testing in person)

Some of the key findings from this low-fidelity, paper prototype test:

  • 100% of the users were able to learn about E-Bikes, since they were unfamiliar to them.
  • From the second task, we learned that, a mountain bike doesn’t necessarily mean helping with up-hill climb in the city. We needed to revise how we strategized the content here. Finding bikes with more power was the better solution for our users.
  • 100% of users, had no trouble getting in touch for partnership opportunities.

Design v2.0 (Mid-fidelity, Sketch App)

Mid-fidelity screens showing breakpoints of desktop and mobile for three of the sections: “What is an E-bike”, “Renting an E-Bike”, “Available Models”.

View the fully functioning, interactive prototype in mid-fidelity state.

Tasks

• As someone that is unfamiliar to electric bikes, learn about them
• Find an e-bike that would be appropriate for up hill climb
• As a sponsor, how would you go about looking for partnership opportunities

Feedbacks (mid-fi user testing)

  • Couldn’t see all the myths and had to scroll through the carousel to see if the myth they had in mind was covered.
  • Wanted to see the results of the E-bike match right away, instead of in a subsequent email.
  • The carousel state “dots” on the bottom in E-Bike match necessarily didn’t help user know where they were in the step (too many dots). Numbers such as “1/7” helped them better understand where they were in relation to the E-Bike match quiz.
  • Although dropdown height picker didn’t cause a negative experience, the stepper to edit height, was a better overall experience.

Accordions for E-Bike Myths busted

Couldn’t see all the myths and had to scroll through the carousel to see if the myth they had in mind was covered.

From testing mid-fi, we learned that 85.7% of the testers wouldn’t scroll through all the carousels to see if a certain myth they had in mind, was busted. Although available on the desktop version, the mobile view hid them and the users were to navigate using the “next” and “previous” buttons. Our solution was to list all of them (so users see all the myths) and allow them to open in a accordion.

The green ellipse in the far left shows how it was in the mid-fi state and improved in the high-fi state. On the set of screens on the right, the green ellipses show the interaction when the user is toggling accordions for myth 1 and the blue ellipses show the interaction for myth 2.

E-Bike Match Results

Wanted to see the results of the E-bike match right away, instead of in a subsequent email.

E-Bike Match Carousel

The carousel state “dots” on the bottom in E-Bike match necessarily didn’t help user know where they were in the step (too many dots). Numbers such as “1/7” helped them better understand where they were in relation to the E-Bike match quiz.

Height Picker

Although dropdown height picker didn’t cause a negative experience, the stepper to edit height, was a better overall experience.

High-fidelity screens at both desktop and mobile for sections: renting an e-bike, available models and model detail page (below).

Overview (Desktop vs. Mobile)

What is an E-Bike (Desktop vs. Mobile)

Rent an E-Bike (Desktop vs. Mobile)

About Us and Contact sections (Desktop vs. Mobile)

E-Bike Match (Desktop vs. Mobile)

View the fully functioning, interactive prototype in high-fidelity state.

It was exciting to work on a project that was passionate about bringing the electric bike movement to the North American market, especially to Vancouver.

If more time permitted would’ve definitely liked to research more into why the European market is so successful and how we could incorporate their features and business model into this product.

As this was the final community partner project while at RED Academy, I was happy with the final outcome. I believe the 12 weeks of immersive training really came through and you can see how much I have matured as a UX designer through this project.

0
Weeks
0
Desktop Screens
0
Mobile Screens

———Thank you!———

Let’s Work Together

Just say hi or let me know how I can help tell your stories.

jothish.john@gmail.com
error: Content is protected !!