Mobike UI Edit

Optimizing the current English version of the bike sharing app, Mobike.

I. Overview

Mobike is the world's largest bike-share operator with Shanghai being the world's largest bike-share city.

Objective

To improve upon the existing Mobike user interface and UX writing. As the expat population in Shanghai continues to increase, the need for an English app with good UI writing also becomes needed.

  1. I changed the wording of the first line and moved it to the top of the information card. I believe as the title of the card, it would be more beneficial to have it at the top of the card.
  2. The first and second lines are nearly identical in the original. Instead, I propose adding further instructions to explain wehre to find the QR codes.
  3. The call-to-action button should be more distinguishable from other text. Changing it to an orange button extended to the width of the box with white text will allow the users to know to click on it.
  4. "Bike number" can be replaced with "Enter ID" so users know they can manually type in the numbers.
  5. "Turn on light" can be shortened to "Light on" or "Light off" so users know if the button is active.

Original on the left, my edit on the right.

  1. Currently the "Scan QR Code" header looks like a button. I propose changing the font to be a little bigger and removing the dark background behind the text.
  2. I also recommend increasing the the darkness of the background around the QR code square to better emphasize where to point the camera.
  3. "Bike Number" should be changed to "Enter Bike ID" so users know they can manually type in the numbers. I also believe changing the icon from a hand to a keypad will better serve the user.

Original on the left, my edit on the right.

  1. Move the Header to the top of the info card and emphasize with a bold font and color.
  2. As both the first and second line in the original are identical, the second line should be removed.
  3. The wording in the third line could be changed to make up for the extra space that has been made.
  4. Changing the "Got it" words to an orange button extended to the width of the box and changing the text to white will make it appear more like a button to give users more

Original on the left, my edit on the right.

  1. The message underneath the black overlay is good but I believe that the wording would be better understood if "operating zone" is changed to "parking zone."
  2. The wording for the first line in the popup also is not straight-forward. Better wording would identify the required age at the beginning.
  3. The safety terms paragraph is very dense for the limited space. Reducing the language and highlighting the important terms would be better for the user.
  4. Again, clearer language would help the user identify important buttons. Having the user confirm or deny that they meet the required age limit rather than just hit OK or cancel ensures the user is paying attention to the requirements.

Original on the left, my edit on the right.

  1. The last page is the Customer Service page. This page identifies problems with a broken or malfunctioning bike. Here, changing the name directly identifies there is a problem with the bike that needs to be serviced.
  2. The second line should indicate that the user can scan the QR code or manually enter the ID.
  3. It is a bit confusing to see they have a text input form but can only scan the QR code. It would be better understood to have the text input form include "Bike ID" to indicate a manual text input.
  4. Another change that would work in favor visually would be to change the number of icons per row for items 5-12 from 4 icons to 3 icons, allowing for more text space to prevent wrapping of the words (See "handlebars").

Original on the left, my edit on the right.