A project developed for the professional diploma course in UX design at the UX Design institute.
Task: Create a better flow for the booking process of the imaginary airline "Fly UX".
Concentrate on the process from searching flights throught to seat selection.
Goal: Get well acquainted with the methods and tools most commonly used in UX design processes, and learn from the experience.
Step 1: Research
Learning from the best
I compared the booking processes from Norwegian, KLM, Lufthansa and Vy - competitors in the same and in similar industries.
- Learn industry standards and conventions.
- Compare the funtion of various flows and features.
- Learn from pain points and gain inspiration.
- The time and effort that goes into well-conducted comparisons.
- The advantage of a structured approach, even in seemingly simple excercises such as this.
Getting a sense of where to start
Using my network to gain insight to user's goals, behaviours and contexts.
- Practice formulating solid, open-ended questions.
- Avoid biases as much as possible.
- Learn about user's context and most frequent use-cases.
- I chose to work on Fly UX with a desktop design. This was based on an assumption that most people use their computer/laptop to book flights. This survey presented a great opportunity to either validate or negate this assumption. Unfortunately, I thought of this after the survey had been send out. The lesson I take with me going on as a UX professional is to remember to always question my own assumptions. Especially in an early research stage.
Mastering an underappreciated art
As a trained anthropologist I do not take note taking lightly. Note taking is the first step in processing your interview data and a lot of insight is generated in this process - if done well.
- Take notes to two prerecorded interviews and usability tests.
- Learn about the users experience: goals, behaviours, pain points, mental models and contextual information.
- Create structured, concise, but detailed notes.
- Though note taking does not seem fancy or flashy, it brings a lot of value to the research process.
Feedback from project supervisor:
"Your note taking project is brilliant! Really easy to read and follow, if this were in a team setting, it would really benefit those who didn't partake in the research. The use of different colours to colour code your points in your note taking project is really effective. It makes the document really easy to scan through and you can find what you're looking for really easily. Well done!"
Understanding user behaviour
For this part of the research stage we were ask to conduct a usability test of two already existing airline websites.
- Write an interview/test script
- Conduct a digital usability test
- Draw insights to user's contexts, goals, and behaviours.
- The test took longer than planned. This is perhaps the result of putting two social anthropologists who love to discuss in a usability-test-setting. In future projects I ought to be less afraid to move the test along, even if it means interrupting the candidate sometimes.
Further research methods learned in this phase
Step 2: Analysis
Creating an affinity diagram is an intense experience. My colleague and I: Reviewed the data, noted down every aspect of the research data that stood out to us, structured the notes, found patterns, and restructured. We grouped issues and challenges creating categories based on most frequent user flow.
- Learn how to put structure on qualitative research data.
- Learn the power of collaborative analysis.
- The importance of getting some other pairs of eyes on the data - what people pick up on and where they find patterns varies greatly. There is strength in collaboration.
Customer journey map
Structuring qualitative data
Based on the research and affinity map I created a customer journey map for the most frequent flow - a vacation-related booking for adults. First defining high-level steps, then documenting goals, behaviours, pain points and suggested changes for each step. I also added a quote from users here and there to make the document more lively.
- Learn how to translate research data into a structured document.
- I actively tried to keep my map concise and to the point (as was the task), as I am used to getting feedback on being TOO elaborate and detailed. However, for this method I was told that greater detail is beneficial. In the future I can thus restrain myself less and really get into those fantastic nitty gritty details.
Other tools introduced in this phase
Customer value curve
Step 3: Concept
Working out the issues
My aim here was to ﬁx all the issues uncovered during research.
I defined the high level flow for our primary use case. Sketching first by hand, later on figma, every screen and interaction in this process.
- Deﬁne the high level ﬂow for booking ﬂights.
- Address all the issues highlighted in your customer journey map.
- Prepare for designing screen details.
- The attention to detail necessary to create good design includes conscious choices about every click, every button, every piece of information presented. Meticulous work, but it delivers results.
Switching to solution mode
Building on the ﬂow diagram I sketched the screens and screen states for users ﬂowing through the Fly UX desktop app.
- Address all the issues and user goals identiﬁed.
- Use sketching as a tool for problem solving, before prototyping or digital wireframing.
- I was surprised to learn that our project managers were not at all concerned with the aesthetic qualities of our sketches. Sketching is a tool for problem solving, not for showing off one's drawing skills. Nice-looking sketches are great, but it is the quality of the solutions that counts.
Step 4: Design
Creating a solution
- Create a medium ﬁdelity prototype for the desktop application.
- Add detail in the form of interactivity.
- Learn powerful design tools along the way.
- This was my first time using Figma - using any proper design software really. So the list of lessons learned during this project is pretty much endless. Getting better acquainted with the functions and terminology in Figma along the way, I see in hindsight how I could have designed the prototype even better from the get-go.
Yet, keeping in my that this is my very first prototype ever, I'm pleased with the results.
You can try the prototype yourself by clicking the illustration of it!
..you've done a really good job with your solution, I love the use of progressive disclosure, where ever it can be used. It gives the whole process a bit of something. It works well for the initial stages of this process. I think you've designed a really nice flow..
Communicating the details
- Create wireframes for your prototype from the homepage up and to seat selection.
- Make sure the wireframes contain all the necessary detail a developer would need to build the application accurately.
- Gaining more knowledge of the possibilities within Figma.
- Learning how to communicate with other professionals and developers, and using their vocabulary.
The slideshow below features a selection of the wireframes I created.
Control of: Miro and Figma.
Awareness of my skills and strengths in qualitative research,
and how to apply these in a UX process.