FromAtoB

FromAtoB is a travel search engine with a price comparison option, that lets you find the cheapest means of transportation- be it a flight, train or bus and get from A to B.

My role was to help redesign the iOS mobile app, as well as assist in designing new features and improving the User Experience. I worked together with NewForest Berlin, who assigned me as the Lead UX/UI Designer of this project.

Below you can find some examples of new or improved features that I was working on, over the course of about 6 months.

 

The Challenge

The Problem. One of the core features of the mobile app is the price comparison feature. You can compare several types of transportation: train, bus, flights, car sharing. Tracking user behavior had shown, that users were not able to understand how to add new ride filter options to their price comparison. By default, all possible vehicle options are listed in the price comparison overview.

The Task. The task consisted in crafting a UI that is self-explanatory. The user must understand that by clicking on any of the filter options, a new vehicle option is added to the filter. The Client expressed a wish to keep the connection count in the filter at all times. Challenge: How to visually communicate when a certain type of vehicle is not available.

UI Solutions. First of all, the vehicle filter should be placed below the title indicating the trip (example: Outbound or Return trip). Also, picking a color that is more distinct is crucial to drawing the user’s attention to the filter.

Each of the travel options – car, bus, train etc. needs to have a count color that pops up (as per client’s wish) so that it’s immediately clear how many travel options exist for each vehicle type. When zero options of are available for the selected dates, then either 0 is being displayed, or the icon blends out.

Creating a User Profile

The Problem. You can book several trips and log in with your fromAtoB account, however every time you want to book a train ticket, a user needs to manually insert the type of discount card he or she has.

The Task. Add a new functionality to the User Profile feature. Users should be able to add discount cards, edit their name and age. Also, multiple users can be created. Users should also be able to delete profiles.

 Wireframes

User Interface

Once the wireframes were approved, I created the final, polished version of the user interface. Although there were some constraints, due to the existing Style Guide, I managed to deliver simple, clean mobile designs.