Side project

Transmilenio

Allowing people in Bogota move around the city with ease.

Brief

Bogota has over 9 million people. It's a great place to study, networking and business but one of the problem it faces is the movility.

Private car ownership forms a major part of the congestion, in addition to taxis, buses and commercial vehicles. There are two bus systems: the traditional system and the Transmilenio.

Transmilenio is the main transportation system they have and its app allows people to travel all over the city with ease. It gives them routes and the location of each bus station whether they are for the main bus or the alternative ones.

User persona

As this city is the capital of Colombia, many people move in here to get better academic and professional alternatives.

Meet Julio, a vendor from a large company who has just been relocated in Bogota. Julio's job is basically get new customers for the company he works for and has to make visits and calls to meet them.

In order to make his job easier, Julio:

  • Needs the fastest routes that get him to their customers offices.
  • Wants to get used to the city's culture.
  • Needs help to get quickly the routes he uses more frequently.

current app problems

planning the trip

There are some factors that made me make this case study.

I used 6 people to make this experiment, asked them questions and saw how did they interact with the app.

The first struggle for them was to understand the ilustrations it has and identify the actual button for their trip.

Current home screen

results screen

The user-flow for the app must be clean yet easy-to-use as it's an app to use on the go.

The main function in this ap is the routes searching. There's no way to change the origin and destination stations in the results screen. If someone wants to change them, they have to go back to the home screen and make the changes and that just duplicates the steps to get the route.

The results lack of air and distracts users when it comes to identify routes and transferences.

Current results screen

buses screen

2 out of 6 users didn't know there were more than three type of buses. 

There is an infinite scroll in this screen as the buses are showcased alphabetically according to their zones. What if the bus I need is in the M zone? I have a lot of scroll to do then.

Current buses screen

my solution

process

How could I improve the experience for users while they want to get to their destination faster?

Here are key points that need to be considered for the user experience:

  • Users can see their recent and favourites trips.
  • They should be able to change dates, time, origin, destination with ease.
  • The app should be easier to navigate.
  • Users must understand the new design system.
  • Icons and buttons must be easily recognizable.

User Interface

Once I knew the difficulties some users had while using the app, then I already knew what was needed to be done.

UI Design
home screen

Users can plan their trip from the home page without in-between screens. They need to it in the fastest and easiest way possible and that's what this screen is all about.

Here users can:

  • Select origin and destination by typing the name of the station or click the 'view map' button. Some might not know the name of the station but the app can tell them which are near their location.
  • See their recent trips.
  • See their favourites trips.
type the origin and destination and click the button to get the route easily
results screen

Now they are able to change the date, origin and destination of the trip in the same results screen.

Below, they get all the information they need for each trip:

  • A list of recomendations starting with the fastest.
  • They can see how many stops that trip has and how long it takes.
  • The starter station and bus they have to take. 
  • If transferences are needed, now the user can see them nicely labeled. Each bus has its own color code, users know it once they're in the station waiting for them. Here they can see a slight separation between the buses they have to take.
  • If needed, they also can view the route in a map by clicking the red button.
results screen and change of information

Now the user can change the dates, origin and destination from the results screen with just a few steps away.

It's very important to add routes as favourites because those are the ones users need the most whether it is for work or personal destinations.

I added a well known time and date picker from Google to make it understandable for all kind of users. 

With the origin and destination changes I wanted to keep it simple. They can change them by just typing the new station in each field. The app automatically changes the route and gets them a better experience.

 

stops screen
stops screen
buses screen

Final thoughts

Working on this project gave me valuable experience. I realized that we as modern interface and experience designers, should always consider user’s needs and wishes that are vital in creating successful experience. Not the needs and wishes we assume they might have but the ones we've analyzed through interviews and interactions with real users.

Need help with a similar project?

get in touch