This chart is only the User Emotion portion of the Customer Journey Map
Jesse Richardson
UX designer
Airline Website Case Study
A Project with the UX Design Institute
A little more information:
This project was completed for the purposes of learning, understanding and using the design process. The main goal was to take research findings, analyze and conceptualize them, and design an airline website that created a better experience for users. Of course, this project was all done essentially in a vacuum, meaning that the work was done by myself with little collaboration from anyone else. This constraint was noticeable, and I thoroughly believe the final product would have been a much different and a better solution to the problems found during research.
Research
Surveys
As a first step, a short survey was used to begin our understanding of the user.
Survey Characteristics
6 questions
Online
Less than 2 minutes to complete
Created using Survey Monkey
Limitations:
Free survey builder, Survey Monkey, offered limited features and response types
Only 8 responses
Survey pool was not diverse
"Airline Website Improvements" is a leading title and was a poor choice
Results:
I learned how to write a brief survey
Resulting data was not very useful
User Interview and Testing
In order to truly understand the user, I completed 3 interviews directly followed by a usability test of 2 competing airline websites.
Purpose: Understand the user in order to empathize with their use experience
Circumstances
Setting: Remote Moderation
Two of the three users were provided by the UX Institute, the third was a friend
All users were fairly frequent-flyers, which may have skewed findings
Websites used for testing: Aer Lingus, Euro Wings, Southwest, Frontier
Findings
Users will use aggregator sites for comparison and will visit airline websites when ready to book
Brand loyalty is prevalent; Users will download native apps from their favorite airlines
A clear flow is important in order to convert a user into a customer
Fare-Levels was a common negative point that users encounter
Each user has a slightly different hierarchy of what information they find most important - this could be an area that is further researched.
Analysis
Affinity Diagram
I used affinity diagraming to breakdown my research findings and compile it into understandable and usable groupings.
Circumstances
This exercise was completed in-person by myself and one other person
The other person read through my research notes and had only a general understanding
Findings
The exercise pointed towards general areas of the website that would need attention in order to produce a good experience for the users.
The groupings allowed me to see the context in which users had positive and negative experiences
The data-entry form turned out to be a major factor in the whole experience.
This form would need to be fine-tuned for optimal results
More contributors would have increased the value of this exercise immensely
Customer Journey Map
The Customer Journey Map allowed me to add structure, flow, and emotion tracking to my findings from the Affinity Diagraming exercise.
Process
My first step was to break down the most common use case into defined steps
Next, I took all of my findings up to this point and applied them to a corresponding step
Finally, I took into account the user's emotion at each step and plotted that along a line graph
Findings
This exercise was a great precursor to defining the user flow
Pain points were broken down into each step, making it much easier to start thinking of possible alleviations.
The Customer Journey Map could change drastically with a different use case or even based on the user's reason for travel
Users typically have a better experience during the data-entry portion of the journey and have a less than optimal experience when encountering larger amount of information that must be interpreted in order to book a flight
Concept
User Flow
I mapped out the users’ steps to see how I could simplify their journey to help them reach their most important goals with the website. The theme was simplicity.
Findings
This exercise was helpful in understanding the most important use cases
The Flow Diagram was pivotal when developing a rough sketch
The steps follow a user through the flight booking process
It was at this point that I decided to exclude fare-levels and instead allow users to select only options that they want/need
In a collaborative effort with a product team, I have to imagine this would get quite a bit of push-back from the sales team
Made using Miro
Design
Sketches
Sketching gave me a visual on the user's experience. My goal was to focus on a clear presentation and flow.
Focus Items from the Research Phase
"Less clicks = Better"
"Avoid Redundancies"
"Clarity is key"
"Keep fare-levels simple"
Findings
Many iterations were needed in order to iron out specific portions of the website
I realized flaws in my user flow and made changes accordingly
Displaying a large amount of information all with near-equal importance can be tricky
Nearly every choice was a result of my research findings
This is a desktop-optimized version, and I would not recommend this as a mobile or dynamic website. Most of the interactions would work, but the layout would need to change to accommodate a mobile display
As a visual learner, the sketches helped me visualize the user flow and overall experience in order to make impactful changes.
Prototype
The next step after sketching was to create a medium-fidelity prototype.
Process
Using Draw, I created each screen and screen state
Once complete, I uploaded the files into Invision
Invision allowed me to create the prototype and ultimately test out the flow
I realized many mistakes with each screen once uploaded into Invision and had to re-upload each screen at least once
Findings
Invision is a powerful yet simple tool to create a prototype quickly
This process allowed me to hone in on key attributes that I was aiming for, such as reducing the number of clicks required to complete a task
Example: When a user selects a Departure Date, the Return Date calendar will open automatically
Wireframes
At this point, I had worked out most issues with the flow and now I was determined to define my design exactly as I had envisioned it.
Process
My goal was to break-down each element completely, leaving no question unanswered.
On my first pass, I focused on each item individually
Next, I went through and checked to ensure that each element would work and flow with the other elements on the page
I used Draw (essentially a free form of Sketch) for this process.
Findings
I realized how many decisions I had not defined up until this point
The decisions I made here had a huge impact on the integrity of the user experience as a whole
The interaction of website elements can severely change the flow of a site
There are many different functionalities of simple website elements, so a clear description was vital
Details are very important at this stage
What have I learned from this project?
This project served as an amazing learning experience during my dive into UX design.
Struggles
The Concept phase was tough because I am a self-proclaimed visual learner
Admittedly, I drew up a very rough sketch prior to creating the flow diagram because I needed a visual basis to start with
Working in a vacuum (alone) did not produce a truly authentic result. Collaboration would have changed the outcome immensely.
New software always has a learning curve; The "Free" versions are not always great
Takeaways
I learned the design process and its many tools at each step
UX design work is better done in a collaborative setting
Also, if I was working with a product team, I would have had to make more compromises in order to satisfy members of the team
Richer research gives you better results
It is hard to say if my results have much weight because I based most of the project off the research findings from only 3 individuals who were all frequent-flyers.
If I completed this project again, I would use at least 5 individuals with more diverse use-backgrounds