BikeNYC

A Proposal for a New Bike-sharing Service in NYC

BikeNYC is a proposed replacement for CitiBike in New York City. The system includes a mobile phone app for subscribing, locating and unlocking bikes, and a touchscreen dashboard attached to each bicycle dock for users to enter an access code from their phone.

The Challenge

I was given a design brief for the project by a freelance agency as part of their screening process for UI/ UX design talent.

Design the interface used on a service that provides city bikes on subscription. This will be multiple device, as well as a pickup and pay dashboard located with the bikes. Take advantage of upcoming technologies—voice or face recognition—or utilize any ideas around security for a user to have fewer steps from arriving to getting on a bike.

My Role

I owned the entire UX design process end-to-end, including:

  • Product & User Research. I examined and analyzed existing bike-share systems and apps and conducted field research and testing.
  • Interaction Design. I re-imagined the user experience of renting a bike while borrowing from existing conventions that have been proven to work. I created rough sketches and wireframes of the app and dashboard, and a low-fidelity rendering of the bike dock.
  • Branding & UI Design. I developed a custom logo and visual aesthetic, and a set of high-fidelity mockups showing the different states of the app and dashboard.

Market Research

To begin my design process, I studied different bike-share systems currently on the market, including the mobile app interfaces that customers use to manage the process of reserving and locating bikes. I also looked at the technical components driving these systems.

BikeNYC Research - Existing Services BikeNYC Research - Existing Apps

BikeNYC tech research

At the time of this project, big cities were still favoring designated bike stations with kiosks and numerical key-code locks, while smaller communities and independent services were exploring “station-less” bikes that can be parked anywhere and unlocked with bluetooth technology or a QR code scanner. The latter option is less expensive to deploy and more convenient, but critics in larger cities like New York have argued that too many bikes could be left strewn about the city and that the companies developing the dockless security systems were still new and unproven.

Mid-sized cities like Columbus, Ohio were taking a hybrid approach — one that maintained the bike “stations” at designated locations but removed the centralized kiosks, as this was found to be one of the bigger pain points for customers. Younger riders accustomed to services like Uber enjoy the convenience of hitching rides exclusively from their phones and had no patience to wait in line at a kiosk. This made sense to me.

Based on my research, I also ascertained that face and voice recognition tech could potentially save a bit of time and effort for repeat customers, but initializing a profile for the system to read can be time-consuming for newcomers. QR code scanning was another option, but has known security flaws and risks. Numerical access code systems are universally easy to comprehend and had already proven themselves to be successful for bike-sharing on a large scale, so I favored this option, but I wanted to see if these systems needed any improvement as far as usability was concerned.

Field Research

At the outset of this project, I was not familiar with how the process of bike-sharing worked, so I downloaded New York’s CitiBike app, signed up for a day pass, and went out to spend time testing the system, including procuring a bike and going for a ride. I also observed other users as they engaged in the process of unlocking and docking bikes.

BikeNYC Field Research

I found CitiBike’s app to be the one of the most intuitive of the many apps I tried, and I was able to subscribe to a plan and request a code to unlock a bike without any real trouble. Where I ran into a few pain points and saw potential for improvement was in the process of unlocking the bike. Each bike dock has a mechanical lock with a small 3-button panel (1-2-3). The buttons are flat and have a light color that does not stand out against the panel, so they are not instantaneously recognizable as buttons. The rider must enter a 5-digit code from their phone’s screen in the correct sequence without the aid of any beeps or success sounds. At the top of the panel, a light changes from red to yellow to green after the final correct number is entered.

When I first entered the code correctly, I tried to remove the bike while the light was still yellow, not aware that I needed to wait for it to turn green. When it did turn green, I decided to take my time because I was initially having trouble dislodging it. However, there is a five-second time limit before which the bike gets re-locked, and I ran out of time! So I was forced to start over by requesting a new code from my phone and re-entering it. I ascertained that the lack of instructions immediately near, or on, the dock itself might be a problem for new users. Even though I had briefly looked at the steps for unlocking a bike on the CitiBike website, they didn’t get committed to memory.

I also tested the option of unlocking a bike from the kiosk, but as soon as I saw that it required me to either commit the 5-digit code to memory or print it out on a piece of paper to carry over to the bike, I knew that the kiosk was not helping to expedite the process, which was a key goal for this project.

Based on my observations and experiences, I decided to forgo the regular standing kiosk in my system’s design and focus instead on enhancing the dock itself.

The Solution

The solution I devised consists of a new dock design with a small digital dashboard installed at the top. The dashboard is a more user-friendly replacement to the limited mechanical keypad panels. It allows users to enter their access code intuitively and get instantaneous feedback during the process of unlocking a bike. (Please note that the shape, angles, and dimensions of the dock portrayed in the low-fi rendering below are rough approximations and need further refinement).

The system’s companion mobile app, also shown below, borrows conventions from other successful bike-share apps like CitiBike, while introducing a few enhancements as well.

BikeNYC promo

The dashboard screen would measure approx. 6″ x 4.5″ (subject to change based on testing)

BikeNYC dashboard CU

Architecture Outline

One of my first steps in designing my solution was drafting an outline of the architecture for both the mobile app and dashboard. In my early design work, which included sketching and wireframing, I sought to cover all user flows and states, but in later stages, I decided to reduce the scope by focusing in on the process of finding, unlocking, and docking a bike.

BikeNYC architecture outline

Sketches

The following are some of the preliminary sketches I made on paper in order to quickly test out different visual ideas.

Dock Dashboard

BikeNYC dashboard sketches

Mobile App

BikeNYC mobile app sketches

Wireframes

The following are a selection of wireframes of the dashboard and app created in Sketch.

Dock Dashboard

Features of the dashboard that emerged clearly during the wire-framing stage included:

  • A prominent keypad for entering a 4-digit access code (eventually reduced to digits 1-5)
  • Ability to delete numbers entered by accident
  • Error message shown upon entering an incorrect access code
  • Timer shown immediately after bike is unlocked
  • Success message shown immediately upon removing the bike from the dock
  • Color-coded status icons with explanation text

BikeNYC dashboard wireframes 1

BikeNYC dashboard wireframes 2

Mobile App

BikeNYC app wireframes 1 BikeNYC app wireframes 2

Logo Design

I went through several iterations of the brand name and logo.

BikeNYC logo designs

Mockups

The following are selected views of the dashboard and app designed in Sketch.

Dock Dashboard

BikeNYC dashboard mockups 1 BikeNYC dashboard mockups 2

Mobile App

Unique features of the app that became clearly defined during the mockup stage included:

  • List/ Map view toggle for both bikes and docks with ability to unlock or dock a bike from either view
  • Google Map street views shown in List view
  • Current subscription/ plan shown as a reminder when navigating

BikeNYC app mockups 1 BikeNYC app mockups 2

Future Steps

The next step in this project would be to collaborate with an industrial engineer to refine the form of the bicycle dock and consider size, materials, and other specifications as it is an important part of the experience and feasibility. I would also create mockups for the account creation and subscribe flows and continue to iterate on the app design through usability testing and product-emotion evaluation.