Simple is Good!

redBus_Blog
redbus India Blog
Published in
4 min readApr 1, 2016

The redBus iOS revamp journey

We recently launched a revamped version of the redBus iOS app, and thought of putting together a small behind the scenes pieceright from the initial approach to the learnings from the project.

Why a revamp ?

What problems were we trying to solve? How a revamp is beyond just colors, fonts, and graphics.

Previously, the entire iOS app experience was imagined as an extension of the web experience, which meant that there were multiple buttons, steps, and various pages for the user to complete a booking. We also had to be cognizant about international markets, as we had a diverse set of audience using the app from the time we forayed into the international markets early last year.

The Process

Some principles we consistently adhered to throughout the redesign were Speed, Simplicity, and Delight

The main question we were trying to answer was: How do you design an experience to optimize the workflow, to help users make the right decision without confusing them with too much information?

The process was a bit exploratory in the beginning, since we were trying to address several pain-points at one go. So, we decided to focus on a few important issues and let go of a lot of our ambitious ideas and experiments. Finding a good starting point of ‘Keeping It Simple’ , further set the tone for the rest of the app.

We tried to vocalize the reasoning of our choices and decisions during the process, in the next few paragraphs.

1. Less is More

The home screen became the main point of discussion, as it addressed the key function of getting users to find the right bus/route of their choice immediately. But, it lacked the depth in addressing other areas of interest like viewing an existing booking, search history , offers or helping them explore places nearby.

With every iteration, we realized that the home screen seemed busy with a diverse set of information. The solution was to go back to the drawing board and focus on keeping it simple. We wanted to help user focus on one task at a given point and let them stumble upon other content categories which are just a swipe away.

Home Screen on IOS

This soon became the design philosophy that we started to adopt across the app.

2. Layering Information

A fairly straightforward task of booking a journey seemed like a long process of combing through multiple screens and buttons. The redesign brought the task down to 4 steps, by layering content that helped users stay in the context of the task, providing just enough data points in the foreground to help make an informed decision.

An example of how information was layered on the home page is clearly demonstrated by the source & destination selection.

Source & Destination Selection

Key differentiators like reviews, ratings, and policies are made accessible at the seat layout, which allows users to compare the quality of service. We sought to make things contextual, even predictable at times.

Layering content & showing it contextually — Reviews & Cancellation Policy on seat layout

3. Attention to Detail

As we started to build out the overall structure, it was imperative that we start focusing on every detail like elements and transitions on each screen. Having a fixed UI element anchored on all screens minimized the content area, allowing the chrome to shine over content.

It was also an opportunity to take advantage of subtle transitions to help communicate feedback and optimize the real estate. We used animation to convey progress and to explain to the user the changes in arrangement of elements on the screen.

Use of animations to convey the next logical step

We consciously tried experimenting with micro interactions to simplify data input forms. Several finer details like taking away the need of an extra tap to bring up the QWERTY to input, minimizing the card details, to make space for the next set of details optimized the real estate for displaying a summary at each step of booking funnel.

Use of transitions to aid filling passenger information

4. Playfulness

We worked hard to infuse some playfulness in the app as the funnel pages are very functional when compared to any other e-commerce platform. The introduction of bold colors to differentiate the bus services on the master header, quirky error pages, were a few wins from a UI design standpoint.

Illustrations on Error Screens

What next?

It’s been a great journey over the last 6 months and we plan to take some of these learnings forward , onto our other projects on different platforms like the web & Android.

Our ideal vision is to have a cohesive and consistent experience, irrespective of the device you’re on.

Keep watching this space for more!

Also, find us on -

Youtube | Facebook

--

--