FlyUX
As part of my diploma in User Experience, I was required to carry out a complete UX exercise for a hypothetical airline company, from conducting user research to creating prototypes and wireframes that could be handed to developers. Thanks to these practical assignments, I gained a very good understanding of and hands-on experience with the full UX cycle.
View full project at: https://www.alessandroboaretto.com/FlyUX.html
User Surveys
To start gathering user data, I put together a 6-question survey about people's online booking needs, preferences, and behaviours.
Benchmarking
To get a clear idea of the conventions adopted by other travel companies, I conducted a competitive benchmark analysis of 3 other direct competitors apps, and one aggregator: Virgin Atlantic, Alitalia, Easyjet and Kiwi.com.
At each screen/stage of the booking process, I pinpointed positive points as well as roadblocks, and took note of similar traits and conventions used. At the end I collected some of these points to give a clear summary of the experience of each solution, to use the information going into my design.
Note taking and Usability tests
To obtain more qualitative data, I set up two usability tests for both website (see video on the right) and mobile, in addition to the ones provided by the client. My role included both note taking and moderating the sessions. The task they had to perform was to autonomously book return flights for them and a companion.
The results confirmed that users are generally frustrated by ads and extras, there was confusion over cabin benefits and language used (Avios points for example) and the need to learn new conventions. Stopovers weren't always clearly labelled.
Affinity diagram
Once collected enough data (is it ever enough?) I reviewed the material and proceed to organise it in cards following the K-J method.
As I went through each document I looked for pain points, mental models, positive features, user primary and secondary goals and context. I wrote a single detailed observation per sticky note and grouped them together.
Thanks to online tools like Miro, it was easy to organise my notes into color-coded groups:
- Flexibility
- Choice
- Trust
- Flow and Progress
- User input
- Motivations (goals)
For each group I also split the cards in positive and negatives.
Customer Journey Map
After creating the affinity diagram, the next step was to build on the findings by compiling a customer journey map where all the data gathered until this point, is mapped against the user flow (from let's go on a trip, to payment and review).
For each stage I isolated goals, behaviours, mental models and context, alongside positive and negative points (roadblocks).
Flow Diagram
Time to put all the data gathered to work. Before designing any screens, I laid down the main flow (from booking to seat allocation). I had to consider each step the user would take and design each screen, state and interactions. This exercise was done for both desktop and mobile.
Interaction design for Desktop
After finalising the main flow and Architecture information, I moved forward to sketching the main screen states. I collected all the research findings and poured them into my sketches to solve the users issues.
My goal was to ensure that every step would aid users in achieving their goal of easily finding, selecting and purchasing low-cost flight tickets.
Mid-fidelity prototype
Once any potential issues were identified from the low-fidelity prototype, I developed a more detailed prototype using Adobe XD. A reduced colour palette allowed me to focus even more on the structure and architecture of the screens. Have a decent amount of details meant that during the testing phase users were able to navigate through the flow as they would on a live website.
Open prototype in full screen
Wireframes
For th final step in the UX process, I described all the actions and rules that define the interactions into wireframes. This is essential to avoid any misunderstanding and to share all the necessary information with the developers.
Creating the final wireframes was particularly interesting as all the pieces came together with all research insights in mind and nothing was left to chance.
Download wireframes
