A Heuristic Evaluation of the Current Louis Vuitton App with a Design Proposal for Improvements.

HEURISTIC EVALUATION  |  APP REDESIGN

With over 2 Million downloads, the Louis Vuitton App provides users with the ability to immerse themselves into the world of 'The Maison'.

We believe it has the potential to grow a larger audience. Evaluating the current User Flow Experience we will determine opportunities for improvement in Usability.

AT A GLANCE

The Kick-Off

Project Type:
Heuristic Evaluation / App Redesign

Role:

UX/UI Designer

Timeline:
One week

Tools:

Figma, Photoshop

Platform:

iOS Mobile App

Working alongside a team of 3 other UX designers, we were tasked with evaluating the usability of an existing app together and redesigning the user experience based on a heuristic evaluation.

 

We chose to evaluate the Louis Vuitton App in order to uncover usability issues, implement design improvements and produce a redesigned working prototype.

In Collaboration with Ameya Joshi, Jessica Fang and Xinting Fan

JAKOB NIELSON’S

Heuristic Evaluation

Why a Heuristic Evaluation? 

Heuristic evaluations are a method of finding usability problems in a user interface. They involve having evaluators examine the interface to determine how well a product complies to established usability principles. 

 

Created by Jakob Nielsen, these Heuristics are 10 general principles for interaction design. Helping to optimise usability by minimising design deficiencies. The process evaluates a chosen task and places it on a severity scale to determine the impact on usability.

DISCOVERY

The User Task Flow

Defining the scope of this project we chose to simulate a scenario that a potential new user would take in order to purchase a bag, we believe that this primary task flow was essential for ROI and customer retention.  Focusing on three main tasks for our user task flow:

Create an Account

Looking at Merchandise

Finalizing a Purchase

THE CRITERIA

Severity Scale

The Severity of each heuristic was based on the criteria recommended by Nielson.
Evaluated based on taking three main factors into consideration:

Frequency: Is it common or not?

Impact: Will it be easy or difficult for the users to overcome?

Persistence: Is it a one-time problem or a repeated one?

Based on these factors each heuristic encounter was then placed on a rating scale to prioritize and determine the impact each has on the users experience. This helped us communicate with stakeholders the impact and consequence of each heuristic.

Scale of severity from low of 0 to 4 severe

IDENTIFYING ISSUES & RECOMMENDATIONS

The Evaluation

Referencing Neilson Norman’s 10 principles of heuristic design throughout the task flow we identified 10 usability violations. Placing them on a prioritization matrix we were able to prioritize our design solutions by value and effort. These were the 8 issues that were the most important to be fixed along with our recommended design solutions.

 

We believe that by implementing these changes, Louis Vuitton will see a decrease in drop rates and better overall customer satisfaction, increasing sales and elevating the Maison experience.

Issue 1: Creating an Account

When creating an account , system shows ‘Access Denied’ with language that is not relatable to the user in the real world.

Recommendation

Writing the system error message in language that users are familiar with. Providing the users options to either try again or shop as a guest.

Severity Level 3

Major Usability Problem
Important to fix, so should be given high priority

Scale showing severity of 3

Heuristic Violations Identified

  • Match between system & real world.

Before
Example of the before Screen when Creating an Account
After
Example of the after screen with the app redesign.

Issue 2: Address Standards

When creating an account and adding an address to the address book, user are forced to input their address in two mandatory fields. In order to bypass the error message users may end up splitting their address in order to proceed. But this results in incorrect shipping labels which may lead to errors in delivery, delays and dissatisfaction.

Recommendation

Making the second address line optional instead of mandatory will allow users to correctly input their address.

Severity Level 3

Major Usability Problem
Important to fix, so should be given high priority

Scale showing severity of 3

Heuristic Violations Identified

  • Consistency & Standards

Before
Example of the before screen during address standards
After
Example of the 'after' screen with the address standards redesign

Issue 3: Lookbook Download

When selecting a collection to view, the system automatically downloads content without indicating how large the file size is and providing options to cancel or return.

Recommendation

Indicating how large a file is in advance and adding a back button that allows users to leave the downloading page, followed by a confirmation screen that provide users the ability to correct and recover from error.

Severity Level 3

Major Usability Problem
Important to fix, so should be given high priority

Scale showing severity of 3

Heuristic Violations Identified

  • User control and freedom

Before
Example showing the before screen during the lookbook download
After
Example of the 'lookbook download' screen with the redesign.

Issue 4: Filtered Search

Options to filter beyond colour and leather type aren’t currently available to an advanced user. However these options (price range, availability, new in store) are visible on the Louis Vuitton Website.

Recommendation

We added the filter options that are provided on the Louis Vuitton website for a consistent and efficient experience.

Severity Level 3

Major Usability Problem
Important to fix, so should be given high priority

Scale showing severity of 3

Heuristic Violations Identified

  • Flexibility and efficiency of use.

Before
Example of the before screen showing the filtered search options.
After
Example of the after screen with the redesigned filter sorting options

Issue 5: Product Availability

With the high demand of products, many items are out of stock. However, users can only see which ones are out of stock after selecting the item. This leads to repeated frustration of trial and error to find an item that is available.

Recommendation

Inclusion of “Out of stock” on the product helps users understand that the item is currently unavailable, leading to less frustration. Instead providing them with the option to immediately join the waitlist and continue browsing. They will be informed of restocks.

Severity Level 3

Major Usability Problem
Important to fix, so should be given high priority

Scale showing severity of 3

Heuristic Violations Identified

  • Visibility to system status

Before
Example of the before screen showing the product page for leather bags
After
Example of the product screen redesigned

Issue 6: Product Availability (Contd)

With savvy shoppers looking to purchase particular bags, allowing users to still learn about items that are sold out (online) and view product details is necessary. However, shoppers are left at a dead end when seeing an 'Item is unavailable' with no alternative route.

Recommendation

As previously recommended, the system should allow them to join the waitlist on the product page incase they were interested in the details without having to return to the results page in order to do so. To take this further, additional considerations could be made to view or contact stores for their product availability.

Severity Level 3

Major Usability Problem
Important to fix, so should be given high priority

Scale showing severity of 3

Heuristic Violations Identified

Before
An example of the before for the Product screen for the favorite handbag
After
An example of the favorite handbag product screen after the redesign
  • Visibility to system status

Issue 7: Shopping Dead End

Occasionally, when users add an item to their shopping bag they are stopped by an error message. With no indication on how to fix it they are only able to close the message and try again later.

Recommendation

This is a dead end for shoppers so providing a clear message on what occurred is imperative along with an explanation on how to troubleshoot, whether it's a refreshment issue or to restart the app.  

Severity Level 4

Usability Catastrophe
Imperative to fix this before product can be released

Scale showing severity of 4

Heuristic Violations Identified

  • Visibility of system status

  • Recognize, Diagnose & Recover from error

Before
An example of the error module before redesign
After
An example of the error module after the redesign

Issue 8: Autofill

In the 'check out' process, the system does not autofill the address saved in the profile's address book. Requiring the user to repeat the task.

Recommendation

The address is auto-filled for users so they do not have to enter it again. Users can also edit their address or add a new address when they tap on ‘change address’ which directs them to the ‘Address book’.

Severity Level 2

Minor Usability Problem
Fixing this should be given low priority.

Scale showing severity of 2

Heuristic Violations Identified

  • Recogniton vs. recall

Before
An example of the checkout page before the redesign
After
An example of the checkout screen after the redesign

CONCLUSION

Next Steps

Our next steps would be to implement our re-designs and measure success by the task completion rate and a decrease in drop rates and shipping errors. Additionally, we can compare how many users purchase items from waitlists to measure our conversion and ROI.

Key Learnings

1

Agency to Client Communication 

Through this project we got the opportunity to work from the mindset of an agency pitching to a client. Which was great in learning how to frame presentations within an ‘agency to client’ context, we learned to communicate with stakeholders the impact and consequence of our work.

2

Good Can Always be Better

There is always room for improvement. To evaluate such an esteemed and established company was daunting at first. However, if it is done with respect and in the pursuit for improvement, it ends up being an important lesson. To show us that all companies and products could benefit from an objective evaluation and audit. And in this case, the digital experience should match the world class customer service provided by 'the maison'.

3

Branding Constraints. 

This was a great experience in adopting an existing brand styles and UI library in a redesign.  It taught us to work within a visual constraint so that the final product is consistent and does not stand out among the rest.

Piqued your Interest?

Check out my other projects

linedivider_Linedivider.png
Read More
mockup1_edited.png

Radar Emergency
Alert App

UX/UI DESIGN  

Radar is the emergency alert IOS app that lets you know when someone nearby is reported missing.

Read More
previewed.png

National Gallery of

Canada

UX/UI DESIGN 

The National Gallery of Canada App celebrates and supports Canada’s Visual Arts Heritage.