Pegasus Airlines is an Istanbul-based low-cost carrier providing services to a total of 30 million travelers per year. In 2017, the company approached us to redesign their mobile apps and reponsive website.

 

The Challenge

Before the project began, we had been working with Pegasus on their previous mobile app for years. As a part of Commencis, I worked with the company on different occasions including new features and design improvements.

In the beginning of the redesign project, we ran a collaborative exploratory workshop with Pegasus product managers to understand the challenges. We discussed key business metrics, looked at customer feedback from multiple sources, and created proto-personas to drive the process forward.

As growth was their top priority, A/B tests and other forms of optimization experiments were the core of their product design and development processes. They also saw design as a means of product differentiation. In our initial meetings, they asked us to design the products to be noticably simpler, quicker, clearer than their competitors. One example of how we tackled that is the route selection. Here, when you select the departure, it automatically moves to arrival, improving the interaction to be quicker, simpler, and smarter.

 

The Team

The team was composed of 19 people. I worked with another UX designer and 2 visual designers. We divided our tasks in terms of user flows. We reviewed each other’s work frequently and gave feedback.

The Process

The usual design process was comprised of quick iterations of ideation, prototyping, and testing. We initially collected all data that can be relevant from different sources. Data helped us form hypotheses and questions about potentially problematic areas and what we could do about them.  We then started drafting, testing, and iterating on the designs with sketches prototypes in different levels of fidelity. We refined the designs through critique sessions with the design team and user tests. We composed test scenarios and selected participants based on the user data (such as Hotjar recordings and analytics) provided by product managers. Getting early user feedback with prototypes helped us identify potential user reactions and communicate our design decisions more clearly.

We communicated the designs to the product owners as they developed. This helped them understand the rationale behind each design decision. So they could be more included in the design process, give us timely feedback about it, and communicate it to other stakeholders within the company.

As we refined the concepts, we held development reviews where we discussed design decisions in terms of their implemention and crafting details like screen transitions and animations. For example, below is the seat selection screen from the Android app where the animation is crafted in collaboration with a developer.

 

Designing the Mobile App Home Screen

Here is how I designed the navigation and the home screen in the native app as a more detailed example of this process. Before we started, we knew the following based on past research:

  1. People used it almost exclusively for booking a flight. The check-in was the second most commonly used function. The difference between the two was more than ten-fold.
  2. Campaigns were important. The conversion rates were 4 times higher among users who booked using a campaign. And when we displayed campaigns on the front screen, the conversion rate went up.
  3. Being a low-cost carrier, Pegasus charged extra for selecting a seat, getting an on-board meal, or extra baggage allowance. Extra services were very important sources of income. But the number of people who bought ancillaries outside of the booking and check-in flows was extremely low.
  4. With the launch of the new app, Pegasus was implementing a new loyalty program which was going to be an important part of their advertising efforts. We also knew that showing existing points/miles on home screen increased the rate of booking with points.

With these in mind, I started sketching alternative solutions (some of which you can see below) and discussed them with both the product and the design team.

 

At the end of this process, 3 alternatives emerged.

 

Validation

Then we tested these 3 ideas to get an understanding of which one is clearer and more efficient. We did 2 things:

  1. 5-second tests to understand the first impressions and the memorability of the interface. Here, we asked participants questions like “what type of app is this,” “what functions does it have,” or “what campaigns are there” after they looked at the home screen for 5 seconds.
  2. Also, we asked the participants to carry out a few tasks where they needed to find 3 primary and 2 secondary features of the app. As benchmarking metrics, we measured the time-to-complete as well as major and minor errors for each design. This helped us get a clear picture of efficiency and clarity of navigation.

 

As a result, there was a clear winner.

 

We noticed that more people started looking at campaigns and scrolling through the slides. Also, because there was a clear visual hierarchy, it was easier and faster for people to find stuff. The main functions were there, and when we asked for something else, they would automatically go to the bottom of the screen. In addition, we came up with ideas about how to sell more services and improve the business. We came up with ideas about how we could address the users more smartly.

 

Below you can see the finalized UI:

 

This is how the screen transitions look like:

 

 

Outcomes

As of January 2019, the app is rated 4.0 in Google Playstore and 4.6 in Appstore. It was also shortlisted in Altin Orumcek Web Awards in late 2017. The website was recognized as the best website of the year by 16th Altin Orumcek Awards.