Process

1. Research

Competitive analysis

The first step was performing a competitive analysis to get some insight into what our competitors were doing right and wrong, how they solved the same problems we were trying to solve and what are some conventions to follow to provide a better experience for our users.

Surveys

The goal of this survey was to gather relevant data that would later on help me make informed design decisions. I set out to find out how often survey participants traveled and used travel related websites or apps, which one did they prefer and which device they preferred for that purpose. 

I also wanted to discover the purpose of their web/app visits, whether they were successful or not, which obstacles they encountered, and what they preferred about their interaction with the website/app. 

Main findings: 

Users were frustrated by a lack of info about the flight itself, hidden costs and having no reminders for their flights. Some of them mentioned they were worried about tracking cookies that raise the price on flights on subsequent visits to entice the customer to “buy now” before the price goes up again. They also noted how they would have preferred to have the price signifiers like the one on Skyscanner.

Things they enjoyed having were:

•  A clear overview of available options,

•  Simple navigation and lack of distracting clutter

• Pictograms that further clear up any confusions regarding the price and what is included in it

• They appreciated having the option to choose any destination and see prices for the whole month, by days, weeks and months

• Having cheap flights clearly marked

• Some apps they used had links for appropriate plane and bus rides, and room availability, that helped them plan out the trip to the detail

Usability testing of competitor apps

The next part of the design process was user testing. I performed a usability test with 3 participants on my own and observed 2 more usability tests as a notetaker.

The users in all usability tests had the same task: booking return flights with certain dates using two different airline companies. Through this I was able to note where the users were frustrated and how it affected their experience, and also what parts of the experience they liked and had no issues with. 

I was able to learn a lot about what to avoid or use within our app, and some of the main things that users preferred were:

• Apps that were not cluttered and riddled with irrelevant ads

• Fare prices and options being clear early in the process

• Having clear information on the flight itself, i.e. if the flight is direct or not, not showing unavailable flights

• App remembering their info in case they go back in the process

• App showing flights, dates and prices all on the same screen

2. Analyze

Affinity diagram 

Using affinity diagrams as a tool helped me sort out large volumes of information and get to the core of my findings. I reviewed and structured all the qualitative data gathered through usability testing, surveys and competitive analysis.

Journey Map

I built on the work done in the affinity diagram and created a journey map, to help me visualize pain points and opportunities, and also to bring structure to the analysis of my research data.

Flow diagram

The main objective here was to define a high level flow for the mobile, to fix the issues uncovered during my research and lay the groundwork on which I will build the design for the app itself. 

3. Design

Sketching 

This phase was all about getting concepts and ideas down on paper, addressing all the issues and user goals identified in the research and analysis before going into wireframing and prototyping.

4. Wireframe

Next, I worked on wireframes to establish the basic structure of a page before adding visual design and content.

5. Prototype

Mockups 

Using all the gathered data, this was the last step in the process before building a prototype. This is where all the content and visual design was added to form a functional app.

High-fidelity prototype

6. Validate

Challenges and key takeaways

This was my first UX project ever and my first dive into UX and UI design. 

To be honest, everything was a challenge on this project, especially trying to transfer ideas into real design using Figma, but it was an amazing learning experience that accelerated my development as a UX designer.

Since some of my ideas were a bit too complex, I had to work on simplifying them for the benefit of the user. 

The "complex" ideas included some animations for the loading screen, which were too advanced for me at that stage, and from the functional side, I wanted the app to include some features that users mentioned they found useful in the beginning stages of the research, such as rides, accommodation etc. I decided that for the first iteration I would go with optimising the basic functionalities and expand from there.

Upon finishing the app, I ran another round of usability tests and results indicated that the app was a success. Users had no issues navigating the app, they managed to finish their task with 100% success rate.

Since this first iteration included an idealistic, smooth user journey, for my next iteration I would focus more on unhappy path, to figure out all the ways users can get frustrated within the app, run into unexpected obstacles, and see how I can fix it. 

All in all, I learned how to use empathy and really listen to the users and observe carefully how they respond to everything within the app. I learned how to use these findings to fix the frustration points and design an app that will provide a frictionless, enjoyable experience that will allow users to finish their task successfully and without any roadblocks.