• •

Bike Sharing App

I got challenged to 'rethink and redesign' some interfaces of a Bike Sharing App like Bixi or Mobi. Here's a summary of the design process.

Research

 1. The onboarding

Current versions try to explain a lot in an upfront-onboarding. This leads to a heavy, long experience. Problems:

  • User-test showed us most users skip these screens without reading, due to the amount of text to read.
  • The explanation requires memorizing steps out of context, things are still not clear.
2. Hierarchy

The UI groups on the Main UI or the Station Info are together; things like ‘locate me’, ‘refresh’, ‘favourites’,  ‘route’, ‘settings’. In my opinion as a user these actions are not ‘equal’ in terms of priority.

‘Locate me’ and ‘refresh’ are related to the geolocation and the map.

‘Favourites’ and ‘settings’ are related to the user.

‘Route’ was a real call to action related to what the user needs.

3. Code and time lapse

The code is shown with the time-lapse when it’s not clear where to use the code or the fact that the code is valid for only 5 minutes.

4. Side menu and Get memberships

Both elements lack branding, hierarchy, and appealing elements.

Ideation

With a few wireframes, we noticed :

  • It’s possible to organize functions and features around the main interface (the map), with only one gesture.
  • We can harmonize the experience with consistent gestures, like dragging up and down the Favourite-card and Station-card.
  • A hint-bar can explain contextually what is happening and what the user is supposed to do. Example: “Drag the map to the desired pickup location” or “No available stations in this area”.
  • The screen will be optimized to show more ‘real-estate’ of the screen while dragging, and when IDLE it will show the complementary interface  as “locate me”, “search & route” and the “menu”.
  • Pins should only show one information: the available bikes or the empty dock; for more the user can tap and access the Station Card.
  • With Facebook-connect we could customize the experience with the personal avatar.
  • In the Favorites Card, we will explain the use of it. Also suggesting a place for Home and Work to give the user examples of favorite-stations.
    With an empty-state, we will explain how to add stations and why it’s empty.
  • The Station Card will display the bikes available, total of docks, more details, the probability for the number of bikes and the main call-to-action: ‘Rent a Bike’.
  • With the button “Show empty docks instead”, the user can switch between seeing available empty-docks or available bikes.
  • After the rent-a-bike-request is sent the user has to make the payment or accept terms and conditions; then the Pin-code screen will give the Code, the amount of time missing while the code is valid and a visual example of the pin code on the bike-dock.
  • There’s a timer in a contrasting color scheme that would automatically run and indicate the time remaining before the user needs to park the bike back.

Explainer video

If you would like to hear the thoughts and ideas behind the design, and you don’t mind the accent, here’s a short VIDEO with more.
I hope you like it!

Some ideas and thoughts behind this redesign app, the User Journey and the User Interface.

Result

Once we have the idea of the user journey we created a design system having in mind the main elements and needs: color schemes, hierarchy, and consistency. And lastly, the main-menu and the membership screens are designed to be more harmonious with a brand and appealing with illustrations.