UX/UI Case study: BiciMad, a Spanish bike renting application
This case study will approach the UX redesign of “BiciMad” a Spanish application for bike renting.
What is BiciMad?
BiciMad is Madrid’s bike renting public application service that offers electric bikes as an alternative, clean, and healthy way of transportation.
The problem statement: users and business goals don’t match the current UX
BiciMAD business goal:
Promote the use of bicicles as alternative and clean ways of transportation around Madrid.
User’s goal:
Citizens and tourists want to rent a bike quickly and easily in their daily life transportation or leisure strolls. Agility is the key word here.
The current UX:
To rent a bike, users go through a long and exhaustive process. Starts with an unfamiliar Sign Up interface, followed by a Document Registration form with many inputs that, when finished, take the user to a Login page that requires a password even though there was no previous step to set that up on the last pages.
Eventually, the user will receive their account confirmation email, which is usually delayed, with a link to enter the application and change their password. If they don’t see the email, they will never even enter the application.
When entering the application, the user’s first interaction is to buy credits. They choose a credit option and get redirected to a Checkout page. Just after that, the user will be able to start discovering the application and find their bike.
Product analysis and issues to be tackled:
The product analysis consisted of a Heuristics and accessibility audit throughout the whole experience and interface of the application. This analysis brought up the touching points in the UX that, later on, were transformed into action items
Issue 1: UI inconsistency
As a Designer, the app’s first impression is to notice the different styles of buttons, input sizes, and multiple fonts seen across the whole experience.
Action item 1: Audit and redesign
Audit the application’s components to categorize them into one file (design system starters). Later, analyze their style according to accessibility and best practices to create redesign action items. At last, redesign those components to create one consistent visual identity or small Design System.
Issue 2: No transparency of the bike renting process
The user's goal is to unlock a bike and ride as soon as possible. To do that, they have to go through some steps first. It is crucial to be transparent about it, to avoid future frustration and enable the user to have control and freedom through their actions and find their emergency exits.
Action item 2: Enable emergency exits and create an informative page
As the user goes through the app’s first steps, create return cues and emergency action buttons to enable them to control their setups. Also, make an informative page showing the user the steps to achieve their final goal.
Issue 3: No language accessibility
Madrid is one of the most visited cities in Europe, and many tourists may want to use Bicimad to explore the city. The Signup page, which is the user’s first contact with the product, is all in Spanish/Castellano and has no other language option. Without those options added to a non-familiar interface, the user gets confused and can end up not accomplishing the simple task of signing up.
Action item 3: More language options
Right on the app’s first screen, insert the option of choosing a language, or at least enable the English option to make the interface accessible to non-Spanish speakers.
Issue 4: Non-friendly Sign Up interface and lack of informational transparency
The Sign-Up page doesn’t have a familiar and friendly interface. By that, I mean that this page doesn't have the usual email, name, and input style, that people are used to when creating a new account. In this interface, the user has to already choose a plan without having much information about them.
Action Item 4: Review Sign Up flow and interface
Review the Sign-Up user flow by focusing on transparency of information throughout the experience. Also, create a more familiar interface, similar to what we usually see on other sign-up pages. Since the plan information only affects the user payment-wise, insert it into the Credits and Checkout steps.
Issue 5: User registration is unnecessarily long
For renting the bike, it is necessary to inform personal information to track the user with the bicycle. The current user registration has too many input fields to be filled, which delays the onboarding renting process.
Action item 5: Improve information architecture by better distributing the user registration information
Part of the input fields moved to the Signup Page, and the rest was better organized through the user registration page to improve the information architecture.
Issue 6: The login page lacks action options
Through Sign-Up and User Registration, there is no option to create a password. The app automatically generates a random password sent by email, although this action is never displayed in the interface or has feedback. The user would have to guess that there is an email containing their password, or else they would click on recover password.
Action item 6: Change information architecture to improve user flow and system transparency
First, enable the user to set up their password as soon as possible, displaying an input field on the Sign Up page for creating a password. Later, explain why the app needs their personal information.
Issue 7: Not much information about the app’s plans
The app’s plan information is currently on the Sign Up page. It is not very clear the difference between plans, nor why they have different prices. The user might not know what plan fits best to their needs.
Action item 7: Create a personalized experience according to user intent of usage
Instead of positioning the plans on the Sign Up page, move this information to the Credits/Checkout Page, since the prices change depending on the app’s plan. There will be two buttons filtering a plan for each type of usage of the app to help the user filter it based on their needs,
Thank you very much!
