FLORENCIA LOPEZ
VIVA AIR UX AUDIT
PROJECT BACKGROUND
RE-BRIEFING
Viva Air is a low cost commercial airline based in Colombia and Peru, immerse in a transformation to continue providing low prices in Latin America.
WHAT WOULD I DO:
• Evaluate the buying process of a ticket • Identify pain points users have while booking • Analyze the competitors to identify the
However, VIVAAIR.COM needs to increase one of its KPIs for
approach of other on similar issues
ticket sales through its website, because they are having abandonment of ticket purchases when selecting additional
• Generate a list of recommendations and
services.
suggestions • Propose and ideate solutions for the proposed opportunities
UX AUDIT | JANUARY, 2019
2
PROJECT BACKGROUND
THE METHOD This custom and simple framework will allow me to fit into a traditional and agile processes to bring tangible results.
VIVA AIR UX DESIGN PROCESS
UX AUDIT | JANUARY, 2019
3
USER FEEDBACK
ABOUT USER REVIEWS
Against the impossibility of having actual user
And while reviews do tend to be rather
interviews, it’s still possible to listen what they have to say through the reviews they leave on the internet.
partisan, users are most likely to leave feedback when motivated by an emotional reaction to the product.
In fact, Baymard Institute did a research and found out that 95% of users relied on reviews to
Emotionally-driven reviews—whether positive or negative—tend to be outliers on
learn more about products and services.
the experience.
A simple online review might be more powerful than a huge amount of copy trying to convince you
The key, in terms of user research, is to focus on the substance of what the user is saying,
that a product is good.
and not exclusively on the rating
UX AUDIT | JANUARY, 2019
4
USER FEEDBACK
Users that have clear notion of how the additional services are charged have positive feedback
This user finds value on the original buying experience and not on the additional services
Reviews of Trip Advisor from 2018 UX AUDIT | JANUARY, 2019
5
USER FEEDBACK
Those who don’t finish to understand the additional services express mistrust
Not clear which is the e-ticket Reviews of Trip Advisor from 2018 UX AUDIT | JANUARY, 2019
Issues with the website 6
”
INITIAL HYPOTHESIS Users don’t fully understand what are the additional services and how are they charged, ending up in: - Having negative expectations between the service they expect and the services provided at the airport. - Leaving the page when they have those additional services are presented
UX AUDIT | JANUARY, 2019
7
USER FLOWS
FROM THE HOMEPAGE TO FILL PERSONAL INFORMATION Full resolution
If a experience different from the first flight is selected, the experience of the first flight is changed to the new one.
UX AUDIT | JANUARY, 2019
8
USER FLOWS
EXPERIENCES TYPE What’s included in each type of ticket experience. The price varies from one to other.
1
VIVA Personal item of 10kg
2
VIVASUPER Personal item of 10kg
3
VIVAMAX Personal item of 10kg
Luggage of 15 kg in warehouse
Luggage of 12 kg in cabin + boarding priority
Fast row
Luggage in warehouse of 20kg Seat assignment Fast row Check-in at airport Change of date, time or route without penalty
UX AUDIT | JANUARY, 2019
9
USER FLOWS
FROM THE HOMEPAGE TO FILL PERSONAL INFORMATION Full resolution
The services missing are the ones included when the experience type was selected.
UX AUDIT | JANUARY, 2019
10
VIVAAIR TECHNICAL EXERCISE
The expert review is a common technique to walk through a website in the shoes of a typical user when budgets and timescales don’t allow for user research. This section presents an analysis of the VIVAAIR website
EXPERT REVIEW
focused on the steps to reserve a flight. The analysis is based on usability principles and best practices and the goals are to: ●
Highlight aspects that affect user productivity, perception and satisfaction.
●
Recommend solutions to be considered in a UX redesign process.
UX AUDIT | JANUARY, 2019
11
EXPERT REVIEW
1.
2. 3. 4.
UX AUDIT | JANUARY, 2019
12
EXPERT REVIEW
5.
6.
UX AUDIT | JANUARY, 2019
13
EXPERT REVIEW
SUMMARY OF MOST IMPORTANT ISSUES
1.
2.
3.
Outdated look and feel. The website has outdated UI
4. Lack of consistency. There are different types of CTA’s,
elements and image treatments, as well as complex
different treatments to the links, different fonts and things
iconography.
displayed vary from one type of ticket experience to the other.
Content. There is an overload of content throughout all the
5.
Responsive layout. The website is not adapting correctly to the
sections. The general look and feel is confusing and cluttered
different monitor sizes. The top navigation bar elements are
and it is not giving the feeling of up to date content.
disperse, the price detail overlaps with the rest of the content and some modules display different content than the desktop
Lack of clear hierarchies. The information hierarchy is not
version
clear and the visual interface is not attractive. Also, there’re lots of elements and alerts competing for the user’s attention.
6. Use of red color. Red color is used in excess for different types of content (error messages, informative messages, etc.), so there isn't a clear hierarchy of the content.
UX AUDIT | JANUARY, 2019
14
EXPERT REVIEW
1. 4. 2. 3.
UX AUDIT | JANUARY, 2019
15
EXPERT REVIEW
Lack of consistency. Although the first
1
one is underlined… is not a link. The second object is a button for a collapsible when in the same page
2
something else is used:
The third element is another additional service, although is a very important item, it’s almost invisible and contains a link that does not follow the standard recognized look
3 UX AUDIT | JANUARY, 2019
16
EXPERT REVIEW
About the overuse of notifications messages. UX AUDIT | JANUARY, 2019
17
EXPERT REVIEW
SEVERITY RATINGS
EXPERT REVIEW
USABILITY ISSUES Based on the most important heuristic rules, here’re the most relevant issues related to the usability of the site.
Navigation
The ability of navigation and easily discover content. The additional services are found later on the flow and there’s no “continue” elements on the selection of the flight.
Readability
Is the content easy, understandable and comprehensible enough for the user? Does it speak the user’s language? The different experiences are not correctly explained, as well as the charges of the additional services are not clear.
Findability
Is the information easily discoverable, and are main actions highlighted and identifiable. There’re lots of information on the same page, and some elements are not clearly recognizable as clickable.
Consistency
Does the user feel that he is in two different sites when navigating to inner sections? Although the UI provides a sense of consistency, there’re different types of CTAs and the additional services vary in a way not controlled by the user
References Not at all usable
Not so usable
UX AUDIT | JANUARY, 2019
Somewhat usable
Usable
19
EXPERT REVIEW
USABILITY ISSUES Based on the most important heuristic rules, here’re the most relevant issues related to the usability of the site.
Credibility
Overall credibility of the brand, and if the site makes the user feel sure about purchasing in it. The users manifested being unsure of what’s being charged for and to have caution on the checking out process
Flexibility of use
Does the system allow users to tailor frequent actions, or provide any shortcuts, accelerators for advanced users? They do have tools to change the date and flight, but the overload of information makes it hard to find them
Error prevention
Does the system help users recognize, diagnose, and recover from errors? Sometimes the error messages are at the top of the page, sometimes there’s one big message with all the errors, sometimes the error is highlighted on site.
References Not at all usable
Not so usable
UX AUDIT | JANUARY, 2019
Somewhat usable
Usable
20
EXPERT REVIEW
DESIGN ISSUES Based on the most important heuristic rules, here’re the most relevant issues related to the GUI of the site.
Color Palette
The color scheme ensures readability, cohesiveness, and beauty in the final product?
Fonts
Font weight, sizes and visual treatment denote different hierarchies?
Iconography
Icons provide a common visual language which effectively bridges language gaps?
Hierarchy
The hierarchy of the elements and content, help increase the desirability, usefulness and usability of the site?
UI elements
UI elements of the user interface.
Brand image
Does the system transmit the brand’s image and message throughout the digital journey?
Overall look & feel
Overall appearance of the digital site.
References Not at all usable
Not so usable
UX AUDIT | JANUARY, 2019
Somewhat usable
Usable
21
BENCHMARK
CONTENT
DESIGN
USABILITY
FUNCTIONALITY
CROSS-CHANNEL
Information Architecture
Atmosphere
Navigation
Innovative features
Social media integration
Focus content
Layout / Structure
User tasks
Search box
Responsive adaptation
Tonality / Language
Consistency
User control
Easy filters
Structure
Data visualization
Follow platform
Links
Means of contact
Look n feel
conventions
Support of user goals
Call to actions
Aesthetically pleasing
User guidance
Forms & data entry
Labels
Hierarchies
Error prevention
Call to actions
Clear message
Trust & Credibility
Help & documentation
Interaction design
Concept
Minimal design
Performance
Relevant/Current content
Micro-Interactions
Broken pages
Fonts & Legibility
Transitions
Margins & Spaces Organization
UX AUDIT | JANUARY, 2019
22
BENCHMARK
UX AUDIT | JANUARY, 2019
23
BENCHMARK
EASYFLY LIKE
DISLIKE
• Use of colors to highlight what’s selected
• Everything is huge, it’s overwhelming
• Let me choose a different experience independent of the
• Outdated look and feel
previous selection
• Lack of consistency. The home page is much more cleaner.
• Micro interactions while the content is loading
• No clear way to go back. Closed loop.
• The continue button is always visible, so I know there’s
• No error prevention. The errors are shown on a popup, not in
another step (even though it should be disabled)
place. • Difficult legibility • Does not transmit trust or credibility. Looks like it’s going to crash on next step
UX AUDIT | JANUARY, 2019
24
BENCHMARK
CONTENT
DESIGN
USABILITY
FUNCTIONALITY
CROSS-CHANNEL
Information Architecture
Atmosphere
Navigation
Innovative features
Social media integration
Focus content
Layout / Structure
User tasks
Search box
Responsive adaptation
Tonality / Language
Consistency
User control
Easy filters
Structure
Data visualization
Follow platform
Links
Means of contact
Look n feel
conventions
Support of user goals
Call to actions
Aesthetically pleasing
User guidance
Forms & data entry
Labels
Hierarchies
Error prevention
Call to actions
Clear message
Trust & Credibility
Help & documentation
Interaction design
Concept
Minimal design
Performance
Relevant/Current content
Micro-Interactions
Broken pages
Fonts & Legibility
Transitions
Margins & Spaces Organization
UX AUDIT | JANUARY, 2019
25
BENCHMARK
UX AUDIT | JANUARY, 2019
26
BENCHMARK
UX AUDIT | JANUARY, 2019
27
BENCHMARK
WINGO LIKE
• Modern UI • Breadcrumb on the top helps me see all the remaining steps • Back and continue buttons • Clear & easy to read • Micro interactions while the content is loading & transitions when changing the site
DISLIKE
• Don’t know why, a new window with hotel offers opens, and this page doesn’t follow the nice look & feel of the others. • Almost all the fields have error on place, except for birthday date and you don’t realize what’s wrong with the form
• Pregnancy, use of brand colors, specially the purple
• Session expires but there’s no indicator of it
• Collapsible modules for the additional services. Not invasive, user has the control to see them or not
• An invasive popup appears when selecting my seats, makes me feel like something went wrong.
• Condensed details of the rate • Step by step: the decisions had been divided in several steps to not overwhelm the user
UX AUDIT | JANUARY, 2019
28
28
FINDINGS AND RECOMMENDATIONS
RECOMMENDATIONS BASED ON THE RESEARCH
1.
Update look & feel. Aesthetically pleasing interfaces are
5.
Make them look and behave the same in the whole site.
perceived as easier to use.
2.
Content. Information should be well-categorized and follow a
6. Navigation. Pages should be well-organized with a clear guidance about where he/she is in the site so they can easily
logical order. Every bit of information should have a defined
browse through the different sections of your site.
and specific place in the new structure.
3.
Clear hierarchy. Ensure the value proposition is clear at first glance. Visual hierarchy entails arranging and organizing website elements so that visitors naturally gravitate toward the most important elements first.
4.
Keep it simple. By increasing the number of choices, the decision time is also increased. Offer the information to the user step by step, make their choices simple and once at the time
UX AUDIT | JANUARY, 2019
Consistency. Follow the standards rules for the components.
7.
Responsive layout. People will access your website using a wide variety of devices – from smartphones to desktop computers. Therefore, it is important that your website displays correctly on different screen sizes.
8. Credibility. Be clear and honest about the product/service you're selling on the site. Don't pre-select options or make things difficult to find, dedicate some real space to explaining the value behind what you offer. 29
WIREFRAMES
WHAT CHANGED?
1.
Nav. Bar. Will be focused on the checkout process, so will
5.
clearer and modern.
incorporate a breadcrumb guiding the user
2.
Step by step. We no longer display all the information on one
6. Additional services modules. Each additional will have a collapsible module to display in detail the value.
long page, the process has been divided into: Select flight | Add-ons | Choose seat | Enter personal info. | Payment
3.
Charge details. Will be on a sticky menu, that will also let the user quickly change the flight and when unfolded, explains in detail the charges.
4.
Flights. There’s 2 options. Both allows the user to have a quick comparison and evaluate the value of the other options.
UX AUDIT | JANUARY, 2019
More clear. The hierarchies and the overall look and feel is
7.
Mobile first design. The choice of this kind of modules make it really easy and smooth the optimization for different resolutions without anything overlapping over the content.
8. No more dropdowns for add-ons. The selection of add-ons was very complicated with multiple dropdowns. Now the content is clearly displayed in a simple and easy way.
30
WIREFRAMES
BOOK A FLIGHT
V1
Full resolution
Full resolution
1 WIREFRAMES
2
1 Breadcrumb header
Focus on the checkout process. Enumerates the steps to completion User can click backwards
3
4
2 Sticky bar
Always on top Destination, type of flight and how many people CTA to change (displays fields as dropdown) Dropdown with price
3 Week displayed
Destination on top Days of the week and their starting price Current day highlighted Clear CTAs to move through the week Sort by price, departure time, arrival time, journey duration
4 Flight card - Collapsed
Departure time & airport Information of the flight (details on click) Departure time & airport Button > “Starting from…” unfold different experiences
UX AUDIT | JANUARY, 2019
34
WIREFRAMES
5 Flight unfolded
Displays the 3 experiences with their benefits Easy comparison between what one has and the other hasn’t Radio button to chose
5
6 Pagination
By default we display 5 flights, click here for more Destination, type of flight and how many people
7 Returning flights
6
Same structure with week and filters Also, 5 by default
8 Legal disclaimer
The two yellow warning messages had been grouped. The links are clearly recognizable
7
9 Continue button
Won’t be enabled until the return flight has been selected
8 9
UX AUDIT | JANUARY, 2019
35
WIREFRAMES
1 Expanded sticky Always fixed on top of the page Details of the current balance Divided by the same steps (flight, add-ons, seats) Details of the flight
1
Full resolution UX AUDIT | JANUARY, 2019
36
WIREFRAMES
BOOK A FLIGHT
V2
Full resolution
WIREFRAMES
1 Flight unfolded The three prices are displayed at first sight The different experiences are specified on top When clicked, displays the benefits of the selection Offers an upgrade with the list of the most relevant benefits and the difference on the price. Quick way to engage, “just a little bit more”
1
UX AUDIT | JANUARY, 2019
39
WIREFRAMES
ADDITIONAL SERVICES
Full resolution
Full resolution
WIREFRAMES
1 Baggage in cabin
The only that will be opened by default More details displays more info expanding the card a little bit A plus button will be presented under each flight When clicked, the charge changes on the bottom
1
2 Luggage in hold
When displayed, one suitcase will be displayed for each flight. Under it, there will be + and - buttons to select how many will be added The price changes below.
2
3 Check in at airport
A plus button will be presented under each flight When clicked, the charge changes on the bottom
3
UX AUDIT | JANUARY, 2019
43
WIREFRAMES
4
4 Fast row
A plus button will be presented under each flight When clicked, the charge changes on the bottom
5 5 Easy cancel
Won’t function as a expandable module The “more details” will still expand a little bit the card The button to add it will directly be displayed beside the description
6
6 Special luggage
The three types of special luggage will be listed with an icon to quick recognition Clicking on the plus will display the buttons “On board/On cellar” with different prices. First will be selected by default. Pets only have on board To remove, there’s a (x) on top of the icon
UX AUDIT | JANUARY, 2019
44
WIREFRAMES
7 Travel insurance program
Instead of a checkbox almost invisible, now it has its own space and it’s more visible.
8 Previous & continue buttons
Allows the user to go back or to the next page even without having selected any add on. In case the user hasn’t selected anything, the current pop up will be displayed.
7
8
UX AUDIT | JANUARY, 2019
45
APPENDIX
WHAT WOULD HAVE BEEN NICE TO HAVE/MAKE...
1.
User interviews. To truly understand the users and their pain
5.
areas to improve.
points.
2.
Usability testing. To see how they use the platform and
6. Micro interactions. Detail wireframing of the micro interactions, transitions and small components.
corroborate that with the interviews.
3.
Journey map. That reflects the findings of the user research
KPIs & site analytics. To have a better hypothesis and spot other
7.
Hi-Fi mockups. With a proposal of a new branding.
with their feelings and thoughts.
4.
Affinity maps. To generate an optimal organization of the
8. Prototypes. To test and better explain the functionality
elements based on the user criteria.
UX AUDIT | JANUARY, 2019
46