wayfair.com

Photo by Sarah Pflu on Burst – Shopify

Introduction

About:

Wayfair is an American online company that sells furniture and home goods, the store has a wide selection of design options, colors and materials.

Goal:

The goal of the evaluation is to find existing issues on wayfair.com by examining some evaluation criteria in the important areas of the website.

My role in this project was to take ownership of the heuristic evaluation: to evaluate the website and write the report.

How:

The research is conducted using The 10 Usability Heuristics for User Interface Design by The Nielsen Norman Group.

Metric system for this system: Each of the 10 evaluation criteria have 3 usability rules, measured by 4 indicators. Below are illustrated how findings are measured.

1.Visibility of system status

1.1. Is the user aware of their current position within the user journey?

There are indicators that show an open communication between the system and the user, allowing him to know what is happening and to feel in control.

• The “breadcrumb trail” makes the user aware of where he is within his journey on the website.
• Users receive immediate feedback, for example the color changes once the user has clicked on a button.
• The system displays notification when there are a few products left or when they are no longer available. If the products, from the wishlist, are no longer in stock, the user is notified of this, also he is announced and when they will be back in stock.
• Has a clean and clear checkout design, with minimum of fields to complete. 

1.2. Is the user notified about changes in their user journey?

When there’s a change in the user’s wishlist or cart, it is clearly noticeable.

If the products, from the wishlist, are no longer in stock, the user is notified, also he is informed when the products will be back in stock.

However, it does not show in any way if there are any products included in the wish list and how many of them are – as the icon of the shopping card.

The wish list icon looks the same, whether they are selected products or not.

1.3. Is the user aware of factors that can have a significant impact on their experience?

If the user wants to change the shipping address, from the checkout page, this can be done easily and the system does not allow you to place the order unless there are deliveries to the respective address.

But if the user changes the delivery address from the account, he is not informed by the system that the deliveries cannot be delivered to the new address, only when he has to checkout finds out.

2. Match between system and the real world

2.1. Are UI elements and interaction prompts easily recognisable?

There are many icons on the website, they are simple, helpful, expressive. The pictograms support the flow of human-computer interaction and make navigation much more intuitive.

                                                                 

2.2. Does the online experience replicate the familiarity of offline actions and behaviour?

The website has a clear design, makes interface objects familiar to the user and matches their natural actions.

The user can arrange the rooms according to his own taste.

He can also have some Room Ideas and when he wants to see them, can click on the products for more details, as if the user is in a store.

If the user knows exactly what kind of product he is looking for, he can use the “Search with Photo” field, which simplifies the search for products and makes it more natural.

When the customer has decided on a product, he can integrate it into a design, through “Style Items in Any Space”, to see more clearly what the final result might look like.

Wayfair.com brings the digital experience to real and makes it much more enjoyable.

     

2.3. Does the website make use of acronyms, technical terms or jargon that need an explanation? If acronyms are used, are they clearly explained?

The content is colloquial, it’s easy to understand across all the sections of the website.

3. User control and freedom

3.1. Is the user able to exit all states such as pop-ups and multimedia? Is the exit state consistent and clear?

All the exits are intuitive, some of them have the escape hatch and the exit message, sometimes they can have one or the other.

There are no intrusive, disruptive popups with no possibility to close them.

When the user goes on the website, he sees an entry popup. The styling is consistent, has a simple and effective content about promotions and a highlighted exit message.

                                                                      

                                                

3.2. Is the user able to use the core sections of the website without signing up?

The website doesn’t use login walls, the user can surf it without registration.

3.3. Does the user have control over their personal information?

The user can update his personal information. But he cannot delete his account, nowhere is any information about this action, which means that the user cannot fully control his personal information.

4. Consistency and standard

4.1. Is there a consistent design standard for all call to actions (CTA) on the website?

There is a consistent design standard for all CTAs on the wayfair.com website. They engage the user with the content, are descriptive and the user knows what he will get by clicking that button. 

The CTA have an expressive action-oriented verb, that reflects a benefit, an action that the audience ‘wants’ to complete (for example: Discover all of today’s best saving/ Trending Now – See Them All).

The position of the CTAs are easy to spot, the buttons are distinctive and in contrast with the background.

Also, the visual supports the message and makes it much easier to understand, is it relevant, has vibrant colors and is drawing attention.

                          

4.2. Is there a consistent design standard for form controls?

The website design is consistent, there are the same colors, layout and font-style on every page.

The graphic elements are placed in the common locations, such as: the logo on the top left, search field is placed saliently at the top of the page, exit icon on the top right etc.

The visual elements are in harmony and they feel consistent at every touch point.

4.3. Is there a consistent design standard for headings?

The headering and the subheadings are consistent and they are arranged in a structured manner.

5. Error prevention

5.1.  Is the user presented with forgiving formatting for information?

The website notifies the user when some errors happen.

E.g:

• If a user writes a wrong word in the search field, it is highlighted in red to get the user’s attention.
• In the search field, when writing the first letters of a word, contextual suggestions are offered. This is a good way to prevent many slips before the user has the opportunity to make them.
• When it comes to address, the wayfair.com site uses good default to reduce mistakes, therefore there is pre-selected information based on his geolocation data.

                         

5.2 Are there helpful constraints that prevent the user from making mistakes?

  The site does not provide constraints all the time:

• if the address is changed and the company does not make deliveries in that location, this is not announced in any way, the information is saved giving the impression that delivery is possible.
• when the address information is changed, it is not updated in the check out section.
• If the information entered is not contextually correct, it doesn’t appear as an error (for example: nonnumeric characters are allowed for only numeric fields). 

A good option would have been in-process feedback, before the user gets to save the information, it would be helpful to get immediate feedback telling him that the written information is incorrect – like a small error message that pops up next to the field – so that he can fill the forms out with valid data.

                    

6.3 Does the site have a confirmation message to prevent any irreversible actions?

If the user deletes a product from the “Shopping card” or from “My favorites”, he is not asked before the product is deleted if this is certainly the action he wants. A question such as “Are you sure you want to remove this item?” could prevent such errors.

6. Recognition rather than recall

6.1. Is the user presented with a list of recently viewed products or pages?

The user account is personalized, on the home page the customer can see a section of recently viewed products. Many customers don’t buy things right away and this feature makes shopping easier.

The search field shows recently searched products as well. 

                                                                 

6.2. Is the user presented with custom content based on previous actions?

After clicking on a product, the suggested sections below are relevant.

6.3 When the user returns to the site, is the home page personalized with suggestions by his browsing history and recommendations through his purchase history or on the last products seen?

When the user comes back to the site, he can find a collection of recommendations that are relevant options.

7.Flexibility and efficiency of use

7.1. Is the user able to tailor frequent actions?

The website is efficiently designed for both newbies and experienced users.

The audience can use accelerators to speed up the common actions, so that their workflow is smooth and efficient.

Such as keyboard shortcuts:

•  CTR + D (bookmarks)
• CTRL + Mousewheel
• CTRL + 0
• Ctrl + F
• CTRL + S etc.

Also, the logo is clickable and this can easily lead back to the homepage.

                       

                                                                   

7.2. Is the user presented with shortcuts to end goals?

Personal information is saved and every time the customer makes a new purchase his information can be retrieved with a single click, wayfair.com makes the checkout process easier.

In the main menu there are links to other furniture companies sites, which belong to the same companies, where the customer can shop.

7.3 Does the site provide a list of all shortcuts available in the system, accessible within the Help Center?

The wayfair.com site does not provide a list of shortcuts that the audience could use.

Experienced users should try on their own to see which keyboard shortcuts work and which don’t, and novices need to learn about them from other sources, which does not help to optimize the user’s workflow.

                                                    

8. Aesthetic and minimalist design

8.1. Is the user interface design simple and easy to understand?

The visual design is simple and professional. There are good uses of colors, shapes, motion and gestalt principles that guide the eye, the audience can simply find their desired actions.

                                                     

8.2. Is the user clear on what all the icons mean and why they’re included in the design?

The icons are well chosen for their digital context. They are recognizable, inform users about the functions or features behind the buttons and make navigation more natural.

                                                                   

8.3. Are all forms easy to understand and effortless to fill in?

The form fields have short, descriptive, autofill labels. Related information is grouped in blocks, therefore it is easy to fill them out.

Each field has a floating label, which once completed goes to the top of the field. If the user wants to change that information, the floating label doesn’t disappear, the user can still see what the field refers to.

However, the site does not have autofocus. The first field is not activated automatically, therefore the user has no hint where to start, he should find and activate the first field manually. 

                                

                      

9. Help users recognize, diagnose and recover from errors

9.1. Is the user presented with error messages (as opposed to no message) when adding incorrect information in a form control and offering useful information on how to rectify the problem?

The system speaks the users’ language when it comes to errors and gives useful feedback.

The error messages provide information about what happened, it helps users understand what they did to cause the error and also provides constructive advice on how to fix the problem, so that they can accomplish their task.

For example, when a product is not available, besides the error message “ out of stock”, the system notifies when it will be restocked and also there is a field where you can enter your email address to receive the notification.

                 

                 

9.2 Is the user presented with polite error messages that don’t blame the user for the error?

When the user performs an incorrect action, the error message is humble, it notifies him in a good way about his mistake.

                                             

9.3 Does the site use technical jargon in error messages?

Error messages use a simple language, accessible to all users, which does not contain technical terms.

 10. Help and documentation

10.1. Is the user presented with clear steps/guidelines to use the product service?

Shopping on wayfair.com is easy. The system notifies users when there are few products of the same kind in stock, how long it takes for delivery, and information on discounts. 

10.2. Does the user have access to documentation with relevant topics to help reach their goal?

There is documentation in the Help Center, but is not helpful.

The search field has suggestions, but those are topics, so the users have to click on them, to search and find the answer to their query. This is an undesirable action, requires effort from the user and increases interaction cost. It would have been helpful if they were phrased as questions (e.g. how do I return my items?/ how can I delete my account?).

Also, the search field has a 30-characters limit.

                                                    

10.3. Is the user presented with other channels of communication to enquire assistance to reach their goal?

The audience can come into contact with the personnel of the wayfair.com website, both offline and online.

Wayfair.com Heuristics Analysis Report

Conclusion

Evaluating the wayfair.com website by using Jakob Nielsen’s heuristics provides quick and significant feedback about the usability problems, which plays an important role in establishing current status and designing a good user experience.

Disclaimer: This is a case study to illustrate my personal approach in conducting a Heuristic Analysis of a website.​​​​​​​