CityMapper / Adding a new feature

I am a student in Ironhack bootcamp and my new individual project is adding a new feature to Citymapper App.

Citymapper is a public transit app and mapping service which displays transport options, usually with live timing, between any two locations in a supported city.

In my secondary research I see that Citymapper integrates data for all urban modes of transport, walking, cycling, driving (cabs), in addition to public transports, bike users might more informed about bikes when they use it in addition to public transport.

Bike + Transit

Guerilla Research

I performed a quick question interview to learn about the desirability of the feature.

What kind of public transport do you use and do you take your bike into the public transports?
What do you find most annoying when you want to take your bike onto public transport ?
How do you mostly purchase a ticket for your bike?
If you have a chance to see bike options (is there enough space on the train for your bike) on the home page when you filter your search, will it speed up your decision-making time?

Then I followed the 5-why protocol to dig deeper.

After concept test I decided to continue through the adding bike filtering feature.

Problem Statement

Users who want to bring their bicycle onto the train, need to be informed about busy hours for bikes, because they want find the correct transport with their bike.

Hypothesis Statement

We believe that adding information about the busy hours, will help users to find the correct transport. We’ll know we’re right when the users prefer to use this app to see the info about their bikes.

Jobs To Be Done

When I am bringing my bicycle onto the train or metro, I want to see busy hours for bikes so that I can learn if I am able to take my bicycle onto the train/metro.

User Persona

Feature

My new feature is adding a bike icon to the public transport routes (train and metro) so this feature allows the user to access information about rush hours.

Site Map with new Feature

Prototypes

The low-fi prototype helped to check the screens needed. It was also the moment to think about where to add the feature on the screens app.

UI Inventory

Before starting the hi-fi wireframe, I defined the Citymapper’s UI Content like brand colors, fonts, icons, buttons and forms.

Hi Fi Prototype

I added a bike filter to Suggested transport page and the filter shows which transport is available with bike. Also there is an info about the rush hours, to show user rush hours.

Test

During the design process, I tested this screens with 5people and I made sure to get feedback from friends. When they failed, I did changes and simplified my design until I got to a result that satisfies me.

The most important feedback was about warning. Users(testers) wanted to be informed about the icons that I used in the schedule. So I add a “Bike Rules” screen as a warning. Also bicycles are not permitted in Bus and Tram. So users mentioned to add a warning about it. So I add this info to the warning page.

Conclusion

I tried to be organized and manage the time efficiently during project. I had a little difficulty but really enjoyed doing an individual project and adding a new feature to an existing app.