Soledad Piana

UX/UI - Product designer

Rethinking
Barcelona's Bicing App

Let's turn this great idea into an equally great App

What is Bicing about?

First things first, let’s analyze a bit the app so we are all on the same page. Bicing is an app by the Generalitat de Catalunya for the use of the bicycles that you see all around the city. It offers the technology to unlock the bikes for use and some extras I will showcase in a bit.

As a user of the app myself, I find it hard to use and it took me some time to figure out all the features it offers, so I wanted to know if I was alone here or if there are more users out there who user in spite of the experience it offers.

One last thing to say is that the app comes in language options Spanish & Catalan, so you will see texts in Spanish, they are not many though!

Who's using this App and how?

Personas

I believe the creation of personas on this occasion is hard to narrow down. The app offers a service for which it is mandatory to use, even if it’s not the best. So, even if you download it, use it a bit and dislike it, you have to keep it to be able to access the bikes and go from point A to point B (unless you go more analogical and use the card they send, hey, that's fine too!).

Based on observation around the city and investigation via asking bicing users, I came up with three main types of users:

User Testing

Once these three types of users were selected, it was time to test!

I conducted one on one testing with a couple of people from each type to see how they behaved. Knowledge in exchange for a coffee :)

This was the script:

First of all, I want you to explore the app a bit, let me know if there’s anything that stands out.

The result was different.

Task 1: Take a look at the app and tell me, where would you go to get a bike?
Task 2: Now, let’s unlock a bike and choose the best path to get to Paseo de Gracia and Gran Via.
Task 3: You have successfully arrived at destiny, there's no parking spot available, what would you do?

Results

Both the Tech Savvy and the App Newbie users had similar results, showcasing how the app was designed for users to be very aware of what's being showed on the screen. It assumes the users will click on every button and see it all.

Task 1

Some users took the shortcut and wrote address in the space and chose the ROUTE button to create the way. Had a bit of difficulty creating it.
Others chose a different road and navigated around the map until finding the destination point and clicked on the route button to create it.

Task 2

Users were very disappointed with the results, some just saw the lines in the map, others later discovered the list and, again, were not satisfied with the option. Written streets are not useful. Liked the color coding and the time reference. Would like something more interactive for navigation.

Task 3

When it was time to find parking, only one user realized the bicycle icon was a button and changed. Others saw the info that appears when touching the chosen station and hoped for the best by the time they arrived!

Interview

I conducted a user interview with Maria, who already uses the app, in order to get a better understanding of the problem.

I wanted to know if there were any past frustrations while using the app, she was very open about it. She told me how at first she just unlocked the bikes and went on with the day. Just one button and that was all.

However, once she could not find a single place to park her bike. At first glance she was unable to see if there was any help at the app, she spent 20 minutes going along the avenue looking for one until she did. Little is to say that she wasn’t happy.

She knew how to perform all the tasks, she proudly showed me how the icons on the top were really buttons you can use to switch options, like look for parking spots!

No problem creating a route, but she said that she is not a fan of this. If it’s a path she’s unfamiliar with she has to park at the side, pull out the phone and see where to go next, a navigation system would be a great improvement.

Insights

People don’t really understand all the options the app provides.
There is too much information on the main screen the user does not see.
A navigation mode that could work with the spoken option would be liked to be able to discard the looking at the map.
An option to save a route as a favorite would be really appreciated.
The “Comprobar anclaje” or “check anchor” for the latest use of the bike is a bit confusing, and it does not load automatically. Did I park my bike the right way?

113.796

Subscribed Users

1.162.930

Average uses per month

424

Stations available

User Journey

What are the main features & functions? Let’s break them into steps and see what can be removed or rearranged to make the experience smoother.

I mapped out the users’ steps to see how I could simplify their journey to help them reach their most important goals with the product.

This helped me outline which are the main tasks the users perform while using the app, and separate them from the features that add to the experience but are not the focal points.

Let’s take the frustrations and turn them into opportunities!
Time to design!

Sketches

I always start the design process with low fidelity wireframes. This is how I iterate through many design options quickly.

My main challenge here was to simplify, there are many hidden options in the original one. To do so, my first attempt was to divide the menu, with an upper menu that houses the features that feel more “additional” let’s say and a lower menu (the easiest to reach for someone using the phone with just one hand) with the main “using the bike” features.

After trying different options I decided to change that into an even more simple screen in the final redesign.

I investigated a lot about toggle buttons, I really wanted to go in that direction since they show all options available, something that today is an issue with the app.

New main screen

New UI Design

Once I had tested out all usability mistakes, I started designing the final screens in Figma.

I really think onboarding is needed for people to use the app to the fullest, they need to know what’s offered! A quick and simple welcome note is needed, not clingy as the past wizards we know, but helpful and easy to skip if you prefer that.
Main Screen: I simplified the upper menu and left the big CTA button in the lower area of the screen. I kept the hamburger menu, the Search street button, the Create a route one and added a toggle button where you can choose to see in the map either stations with bikes or stations with available parking.
I chose to move the type of bike to the hamburger menu as an “Additional features” option for a couple of reasons. First of all, you already know how many mechanical or electrical bikes there are in each station when you click on one. And also, if the user is looking for a particular type, they are most likely to look for it all the time, if so, they can let it configured and change that one time they feel like it.
Navigation mode:at least we need to showcase the instructions in a map kind of way (go straight 500m along Diagonal Avenue, turn right at …). Also, a more noticeable button at the map would improve the experience.

Original menu

Hamburger menu

Let’s take a look at the current one. The main issues I found here is that:

A. there is repeated information from the main screen (hello, Route option again?).
B. some options lead to dead alleys (how do you get out, help!). Once you enter the Stations button, it shows a long list and there is no way to get out, unless you click again the hamburger menu.

So, loved by some and hated by others, I decided to keep the hamburger menu here, to store away some complementary features that add to the experience but don’t need the spotlight on the main screen. With this option it can be neatly stored away on the side.

Navigation

First of all, some of the directions that were listed on the original navigation were confusing, half in Spanish, half in English...weird. I had to change this and some other details, see below.

So, now when creating a route, I made the written directions button obvious, for the users to see.

The Navigation was updated as well, to provide a better understanding of the path to be taken.

Let's see the new screens!

Learnings

I started this redesign ready to change as much as possible since I did not think the app was working. However, as I investigated and tested, keeping the original look, I did not end up changing the main screen a whole lot, it's just simplified.

And let me tell you, simplicity is not easy to achieve if usability is the main focus.

The original screens require the user to be super intuitive and touch everything because everything is a button! In reality, users do not realize this and end up missing a lot.

I started with a whole different idea, but the design changed with the information I gathered step by step.

The next move would be to really work on the Navigation system, to create a really user-friendly one for the user to be able to enjoy while riding the bike.