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.
1. The onboarding
Current versions try to explain a lot in an upfront-onboarding. This leads to a heavy, long experience. User test showed us most user skip these screen without reading due
- To the amount of text.
- The explanation requires memorizing steps out of context things are still not clear.
The UI groups on the Main UI or the Station Info are together; things like ‘locate me’, ‘refresh’, ‘favorites’, ‘settings’, ‘route’.
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.
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.
I hope you like it!
Some ideas and thoughts behind this redesign app, the User Journey and the User Interface.
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.