A proposal for a revamped bikeshare system

BikeNYC Case Study Image

This reenvisioning of the New York City service features a touchscreen dashboard at each bicycle dock for users to enter their access code along with an enhanced mobile phone app.

This reenvisioning of the New York City service features a touchscreen dashboard at each bicycle dock for users to enter their access code along with an enhanced mobile phone app.


Research, Strategy, UX Architecture, Interaction Design, Prototyping, UI Design, Branding


Sketch, Illustrator, Photoshop, pen & paper

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

Over a period of 3 weeks, 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 research and testing in the field.
  • 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 dashboard and app, 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 dashboard and app.

Market Research

To begin my design process, I studied different bikeshare 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 writing, big cities still favor designated stations for picking up and returning bikes.  The stations have kiosks (usually one per station) and mechanical key-code or key-activated locks on each bicycle dock. Smaller communities and independent services, on the other hand, 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 dock-less security systems are still new and unproven.

Mid-sized cities like Columbus, Ohio are taking a hybrid approach — one that maintains the official bike “stations” at designated locations but without 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. However, numerical access code systems are universally easy to comprehend and had already proven themselves to be successful for bikesharing on a large scale, so I favored this option, but I wanted to see if these systems could be improved as far as usability was concerned.

Field Research

At the outset of this project, I was not familiar with how the process of bikesharing 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 and talked to other pedestrians as they engaged in the process of unlocking and docking bikes. The typical user in Manhattan is young to middle-aged and in good shape physically. They are hipsters or working professionals who want more control over their commutes. The people I was able to engage with had been riding CitiBike for a while and had generally grown well accustomed to picking up their bikes, to the point that they did not report trouble spots or grievances in the process. However, I wondered if the experience was the same for first timers like myself…

BikeNYC Field Research

In my own testing, 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 after 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 close to, 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 features 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 more 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 would require further refinement if implemented).

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 on the process of finding, unlocking, and docking a bike.

BikeNYC architecture outline


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


My ideas became more refined as I rendered a series of wireframes of the dashboard and app in Sketch. Some of the features of the dashboard that emerged clearly during this 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

Dock Dashboard

BikeNYC dashboard wireframes 1 BikeNYC dashboard wireframes 2

Mobile App

BikeNYC app wireframes 1 BikeNYC app wireframes 2

High-Fidelity Mockups

I began to consider color and contrast in this stage. One of my priorities was keeping the style modern, conforming to Google’s Material Design guide, and ensuring that the key interactive elements and messaging really stand out. The following are selected views of the dashboard and app that I designed in Sketch.

Dock Dashboard

BikeNYC dashboard mockups 1 BikeNYC dashboard mockups 2

Mobile App

I designed the app’s interface to borrow from CitiBike’s best features and UI which I deemed to be largely successful, but with a number of improvements. These unique upgrades include:

  • 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, considering the size, materials, and other specifications as they are an important part of the experience and overall feasibility. I would also create mockups/ prototypes for the account creation and subscribe flows and continue to iterate on the app design through usability testing and product-emotion evaluation.