VivaAir - UX Audit

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