2000px-Citi_Bike_logo.svg.png


Citi Bike IOS App – Building a Report Broken Bike Button

My Role: Product Designer
Time: August 2016 - 8 weeks
Location: New York City, NY
Client: 
Motivate. Facilitated by Pratt Design Institute, NYC.


Motivate is a mission driven company that cares deeply about the environment, combined with making city life better at the intersection of software, hardware, and innovation.

The freedom users want is coming from bicycles. Users can grab a bike, go somewhere, put it back, and someone else takes it. It's a whole new form of urban mobility.

Our team researches the usability when users report a broken bike. My role: Service Design, Data Analysis, Product Design.

 

Feel free to watch the video below on Citi Bike’s mission for urban bike share rides to become more accessible to users.

 
 
 

Project Goals

How might we replace the experience of calling customer service with a simple click of a button in the mobile app? Our product team focuses on the service design of the bike and connecting the physical bike with the mobile application to report broken bikes.

 

Overview

Our team was assigned to evaluate monthly operating reports for May 2016. The three main components driving this project were based on our team's approach to equally: immerse - observe - engage with the user and the product in the city.

Each method took about one week to uncover and learn about users and our target audience. The entire project took 12 weeks to complete. Our results and solutions helped unlock key features for marketing teams about Citi Bike users and ridership information. 

Evaluating Citi Bike's system-data questions: where do Citi Bikers ride? When do they ride? How far do they go? Which stations are most popular? What days of the week are most rides taken on? 

On the left side is the old bike version and the right is the new version with updated features.

On the left side is the old bike version and the right is the new version with updated features.

Current use case of reporting a broken bike, the only way is through the website. Users need the app to report a malfunction in the Citi Bike.

The Desktop website is where users can go to learn more about to deal with a broken bike. Most people we interviewed only went to the application.  Source .

The Desktop website is where users can go to learn more about to deal with a broken bike. Most people we interviewed only went to the application. Source.

  1. A demonstration of how users can report a bike on a desktop website.

  2. Why would a user standing at the bike kiosk go to the desktop website on mobile?

  3. Why is there lack of information about ride issues on the app?

 

Ridership Information

The most popular origins and destinations continue to be stations near large transit and tourist hubs, including the stations near Central Park, Penn Station and the Port Authority, Pershing Square, and the area around Union Square. As has been the pattern, the least frequented destination stations are in Brooklyn. See reference. 

Citi-Bike-Union-Square-169582277.jpg

Product Information

Citi Bike is a share-service that is widely accessible in New York City. There are about 10 million trips made every year on Citi Bikes. Citi Bike is available 24 hours and as of August 2016, the bike share expansion reached 140 stations in Manhattan and Jersey City moving into Brooklyn neighborhoods.

Citi Bike wanted to increase awareness in reporting broken bikes through the mobile application. This project focuses on the service design of Citi Bikes and communication using the mobile application. The team's focus was on the interaction the user makes on the bike. The user will unlock the bike, then use the Citi Bike, after completing the trip, the user will return the bike to the dock station.

Objectives

  1. Citi Bikes aim to make urban bike share an intrinsic component of New York City's modern transportation infrastructure.

  2. By investing in an online platform that communicates the benefits of bike share with riders, Motivate is generating greater excitement about a healthy, sustainable, affordable and convenient mode of travel while ensuring it is accessible to all.

Team Roles

  1. Evaluate user interviews and contextual inquiry

  2. Design a visible signage/language on the bike to report issues and notify the next user

  3. Prototyped interactions to evaluate user navigation with malfunctioned bicycles at the station

Goals

  1. Reduce wait times for calls made out to customer service

  2. Create efficient communication between the bike technician and Citi Bike user

1. Storyboards

2. Empathy Map

Key Points

  • Timothy is Busy

  • Works from 9am - 6pm in NYC

  • Lives in Brooklyn, NY

  • Age 25 - 40

  • Full-time UI Designer

  • Commutes to the subway and then gets off mid-way to take a Citi Bike to work in Midtown Manhattan

  • Goals is to get on a bike and never find it broken

3. Customer Journey Map

  • The goal is to capture the user's interaction with a broken bicycle after pulling the Citi Bike out from the dock

  • I collaborated on the storyboard diagram with a visual designer to understand the user's frustration

  • To understand where frustration takes place and how the user temporarily solves the existing problem

 

4. Mobile User Interface

Building Interactive User Flows to Report Broken Bikes on the Mobile App

  1. 'My Bike is Broken'

  2. Users are getting on bikes and discovering mid-way through rides that the bike is not functioning properly.

  3. How are Citi Bike members forwarding a message to the next user or Citi Bike technician the bike is out of order?

  4. Why are Citi Bike Users not reporting broken bikes by using the 🔧 symbol displayed?

User_Flow_Report_Broken_Bike_02.png
User_Flow_Report_Broken_Bike_3000 copy-min.png
 

Research Work

  1. Review Research; Create design specs

  2. Review results of research with the team

  3. Develop approach to designing improved solutions.

  4. Go out and test solution at bike station

 

Design Thinking Process

 
Our team went through the first four stages of the UX Methodology process towards reaching a solution for reporting broken bikes.

Our team went through the first four stages of the UX Methodology process towards reaching a solution for reporting broken bikes.

 

Our team builds design solutions using lean UX Design thinking process in user research & strategy.

 

Uncover and evaluate problems that lead to insights

  1. Create themes with team

  2. Understand opportunity areas

  3. Execute research ideas

  4. Converge HMW and problem statements

  5. Diverge user-friendly solutions for Citi Bike users

Below are the necessary stages to switch the team's model from 'designing the right thing' to 'designing things right'. 

Design Process 01.png
 

Service Design

The twist-screw is a common pain point for Citi Bike users.

The twist-screw is a common pain point for Citi Bike users.

By understanding the design of the bike, we can look into the details and see what works with customers and what does not work.

 
citi-bike-meet-the-bike.jpg
 
 

Citi Bike Data

citibike data copy.png

Trips made over the past 24 hours, midnight to 11:59pm

2017 Q1

daily_citi_bike_trip_counts_and_weather.png

Trip counts + Weather condition report

  1. Our team accessed Citi Bike's open data to understand bicycle maintenance check and cleaning rate within the last 45 days. (May 2016).

  2. Performance rate is 99.70% where every stations, as well as all bicycles present must be cleaned, wiped down between the 16th and last days of the month.

  3. In Instances of deficient, damaged, or unclean bicycles, 'Wrenching' of Bicycle by a user will constitute Notification, and removal of Bicycle from service by Citi Bike. Performance rate: 89.72%.

 

User Interviews  

  • Our team contacted Citi Bike employees to conduct user interviews.

  • We talked to bike technicians to learn frustrations on from their side.

  • With staff members about interactions with Citi Bike users.

  • We interviewed 15 Citi Bike users on their way to and from the bike dock.

  1. How are you using Citi Bikes?

  2. How many times did you use Citi Bikes today?

  3. What is your process for reporting a malfunctioned bicycle?

  4. How do you communicate with Citi Bike technicians?

 

Problem Statement

User recognizes problems with Citi Bikes in past trips. Now he double checks the bike before every ride. It should not be that way.

User recognizes problems with Citi Bikes in past trips. Now he double checks the bike before every ride. It should not be that way.

  • Review various design ideas with the team.

  • Agree one design option.

  • Iterate and implement quick changes to design, when necessary.

  • Test design using appropriate testing method.

 

Cardsort Exercise

Our team builds a card Sorting exercise to determine our approach with the bike technicians and users with communication issues.

Our wall of color coded post-it notes with ideas and user points around Citi Bike.

Our wall of color coded post-it notes with ideas and user points around Citi Bike.

UI Design

Testing solutions 'Report Bike Button' in the main menu.

Testing solutions 'Report Bike Button' in the main menu.

  1. Prototype a feature on the mobile application to serve existing Citi Bike members then conduct user testings.

  2. To encourage users to click a report bike button in the app so the customer service team can look at the reported issues and send the appropriate maintenance team to the rescue.

I designed a User Flow along with a visual designer to indicate how the user might report a broken bike right from the Landing Page, on the IOS app.

I designed a User Flow along with a visual designer to indicate how the user might report a broken bike right from the Landing Page, on the IOS app.

  • The flow above is to create seamless communications between user and technician on mobile to avoid making a phone call and to collect data on rider-report issues for further analysis.

  • The user logs in and finds a Report Broken Bike button.

  • The user enters the bicycle number printed on the bike stand on keypad.

  • Add a comment (optional) when the user thinks the technician should receive a specific note from the bike user.

  • A message pops up after the user submits a problem with geo-fencing options for the user to register the station address where the broken bike was reported and for the technician to assess the problem.

 

Comparative Analysis

  1. Testing Ofo, the third bike-sharing service to hit Seattle’s streets.

  2. The diagram shows a variety of bike part to select from.

  3. An intuitive way for including photos when reporting an issue.

 

Bike Prototype

Initial concept for flagging the bike as broken to warn the next rider.

Initial concept for flagging the bike as broken to warn the next rider.

In addition to improving the UX of the app, the team worked on improving the physical bike too. By Integrating a physical plastic part to the bike, the rider can pull this part to flag the bike as broken. A new version of the bike was released with a more engaging tool to report broken bike. 

 

Findings

  1. Citi Bike Users were not communicating with the 🔧 broken button displayed. Some users thought that it did not stand out so they couldn't locate the wrench symbol.

  2. Users were turning the seats backward as an indicator that the bike is broken, but not many users were aware of these existing techniques.

A comparison image of both old (left) and new (right) versions of the Citi Bikes where we can explore room for implementing our solution of user reporting broken Cit Bikes.

A comparison image of both old (left) and new (right) versions of the Citi Bikes where we can explore room for implementing our solution of user reporting broken Cit Bikes.

Citibikewrench-570x356.jpg

For full access to this case study providing outcomes and results, feel free to contact me here