Improving an existing mobile app experience

My team and I were given the freedom to choose an existing mobile app to improve its user experience. It was great and we were all feeling excited. We listed out apps off our minds, app we were familiar with and random low rating apps from the app store. We ended up with tons of apps on the list and had no idea which to work on.

At last we settled for Skyscanner for a few reasons (however, bad is not one of them).

1. It is well known to many, good reputation.

2. It has been widely used by many travellers.

3. More people start to use online medium to plan and book their travel, which means more potential users.

4. We love Skyscanner and travelling (at least I can say so myself)

5. We believe there is no perfect app in this world thus there is always room for improvement even though it’s pretty awesome already! (it’s a bold move, I know!)

Project Planning

One of the most challenging issues we faced is time constraint. As it is a 2-week design sprint, there is no time for us to work on every single feature. The first thing we did was to sit everyone down and write a project plan together. This is to make sure everyone in the team is on the same page and works towards a common goal, which is to solve users’ problems and benefit the business.

User Research

We first identified our target users; anyone who has used travel mobile apps (preferably Skyscanner app users) to make travel plans. We found out most of them were aged between 18 to 45 years old. We then divided them into 3 smaller groups, 18–25, 26–35 and 36–45 years old and conducted user interview with each group consisting of a balanced gender ratio.

In our interview, we covered 3 major points:

1. When, how and why users use travel apps (to identify users’ context and motivation in using travel apps)

2. Uncover pain points in travel app usage (to identify opportunities to improve the experience and delight users)

3. Usability testing (to find out what is the current flow of activities and if users encountered any major obstacles in the process)

We did a total of 11 user interviews including 5 males and 6 females. After the interviews, we collated our findings and did an analysis of the result using affinity diagram.

Affinity Diagramming

Persona Creation

We spotted a few common patterns from users of the same behaviour. Although there were some overlapping goals and needs, we were able to see 2 distinctive characters. With these information, we created “Jason” and “Mandy” to represent the 2 groups of users. We validated our personas by crosschecking the characteristics of all the users we have interviewed. We tried our best to make sure our personas’ bio match the actual users as closely as possible. Other than the demographics, we focused on their frequency of use as well as preferred devices.

Jason & Mandy

Customer Journey Mapping

The best way to understand our users’ behaviour is to put ourselves in their shoes, by doing so we can then empathise them better and design useful, usable and desirable solutions catering to their needs. We created a CJM by picturing ourselves as the persona, Jason using Skyscanner app to make travel booking for himself and his girlfriend.

Our CJM has 4 stages — Plan, Research & Discover, Review and Booking Process. Each stage consists of 5 sub stages:

1. Activities (the steps required)

2. Feelings (how users feel when doing it)

3. Key Concerns (users’ needs)

4. Opportunities (what can we do for the users)

5. Solutions (how to implement it)

During the process, we discovered many interesting factors that we did not think of during our group discussions. One interesting example is, there is no way to implement a “Book Flight” plus “Book Hotel” feature together because both features direct users out to a different 3rd party website instead of pull 3rd party deals into its website. However, this is Skyscanner’s business model which we cannot change. Thus, we ideated and came out with another solution that can solve the users’ needs, benefits its lesser-used hotel feature and at the same time inline with the company’s business model.

Customer Journey Mapping
CJM Digitised and Refined

With the CJM and the findings we got from our user interviews, we can confirm our users’ needs and what solutions we can design for them. Concurrently, we also did a comparative analysis and user flows to measure Skyscanner’s strength and weaknesses against its competitors.

Feature Prioritisation

With limited time and resources, we were unable to implement every single feature that is useful to our users. We made a decision to focus on the needs of our primary persona and prioritise each feature based on the level of its importance, with the consideration of business and users’ goals.

Feature Prioritisation

After we have prioritised the features, we began to visualise all the proposed key features and its flow through rough sketches. This is to ensure everyone in the team knows and agrees on the visual and interaction design before going into high fidelity mock up and prototype.

Sketching & discussion in progress

Interface Design and Brand Guidelines

Our most important step before proceeding to interface design is to check out Skyscanner’s brand guidelines. It is very important because the design will not be accepted if it is not based on the guidelines as it will affects the company’s brand identity and consistency. To make sure we are doing it right, we spent some time to study and understand Skyscanner’s branding elements, colour palette, typography, graphic symbols, different versions of logo design and how to use each of them.

With the brand guidelines in mind, we started designing the proposed key features. For features that were not part of the existing design, we had to design from scratch and it was challenging because other than the brand guidelines, we had to include the principles of interface design. Every design element needs to be useful and helpful to the users otherwise it should not be created. I have learnt that it is best to keep the design simple and easy to understand. An overly cluttered design will only make the product unusable even if it is useful.

Usability Testing and Iteration of Prototype

We conducted 5 usability testing sessions on both existing and proposed Skyscanner app to find out if the users are able to complete the given tasks successfully in a shorter time. All 5 users were given 5 similar scenarios for the 5 proposed features. We measured the results based on quantitative analysis (task success & task time) and qualitative analysis (user feedback & quotes).

The scenarios given were:

You are a 32 years old manager and you are planning to take time off work next month to go on a short vacation with your girlfriend.

1. Due to time constraints, you intend to make both flight and hotel bookings via mobile phone.

· You want to go to Tokyo with your girlfriend between 26th and 31st of October

· You want to find the lowest airfare

· You want to stay at the Radisson Hotel Narita

· Can you show me how you would do this?

2. Suppose you have entered the earlier travel details, now you don’t mind travelling 3 days earlier or later if you can find a better deal. Additionally, you also want to have the shortest flight possible as well as the lowest price. Can you show me how you would do this?

3. $1000 for return flights from Tokyo is a bit too expensive for you. You want to be alerted whenever the price drops below $1000. Can you show me how you would do this?

4. You were about to explore more about the Radisson Hotel Narita at work but you were interrupted. How would you create a way to return to the Radisson Hotel Narita at a later date?

5. Because of previous bad experience in booking a hotel, you want to see what other people have to say about the Radisson Hotel Narita before booking. Can you show me how you would do this?

Our summary of results showed that the average task success of the proposed app is 92% and the average time taken to complete each task is approximately 1 minute or less. Although it turned out to be quite positive, there were also areas where the users got confused. We began our design iteration based on the users’ feedback and improved it. Our next step is to improve the mobile-web integration experience where account preferences, searches and flight saves can be synced across both platforms.

I had a great time working with this team. As much as the process was tedious, I have learnt a lot from this project, especially UX process and teamwork. One key takeaway is the acknowledgement of everyone’s strength, weaknesses and how each of us can compliment each other. As long as each member is giving his or her best to ensure the team works towards a common goal, all the hard work will definitely payoff.

Here is the link to our presentation slide:

And our final interactive prototype: