Meeples

Performed a UX audit on Meeples e-commercer site based on Baymard Institute’s research guidelines and redesigned the website.

UX Audit + Redesign

E-Commerece

2022

About

Meeples is a Malaysian board game cafe and e-commerce store selling board & card games.

Objectives & Goals

The objective of this project is to perform UX audit on Meeples e-commerce store based on Baymard Institute’s research guidelines and redesign the website based on issues identifed.

UX Audit Focus Areas

Product Lists and Filtering

Product list audit
  1. Missing Total Number of Items

    Not displaying number of items in the product list results in users not being able to judge the relevance (i.e. whether the list is too large, too small, or seems about right) of a product list.

    ✅  Recommendation: Show the total number of items in the product list — both above and below the list.
  2. Pagination Is Generally Perceived to Be Slow

    In general, users tend to browse much less of the total product list when pagination as it requires multiple page reloads. Additionally, when products are separated into separate pages, users can’t compare products in different parts of the list without navigating between pages.

    ✅  Recommendation: Use “Load More” instead as it allows easier comparison since all products can be viewed in a single page.
  3. Adjusting “Items per Page” Is Excessive

    Options to adjust “items per page” can potentially distract users from the site’s pagination links and introduces needles complexity.

    ✅  Recommendation: Don’t confuse users with options to adjust the number of items shown per page and instead dynamically load products.
  4. Applying Filters Is Time-Consuming

    Users can’t quickly apply multiple flter options as they have to click “Show matched games” to apply selected filters, resulting in delayed product finding.

    ✅  Recommendation: Consider live-updating product list as user selects filter(s) and remove “Show matched games” button on desktop.
  5. Product List Item Information Is Incomplete

    Essential information such as price, product type and ratings are missing from the product list item.

    ✅  Recommendation: Make sure each list item includes price, product type and ratings in addition to product thumbnail and name.
  6. Some Products Don’t Have Thumbnails

    A list tem with thumbnail placeholder can cause users to assume that a product is unavailable or incomplete and users may end up developing a negative perception of the site.

    ✅  Recommendation: Always provide thumbnails for all list items.
  7. No Number of Matches for Filter Options

    Users can’t know the effect of applying the filters from beforehand as the number of matches for filter options aren't shown.

    ✅  Recommendation: Show the number of matches for each filtering option, and live update the numbers as filters are applied or deselected.
  8. Unconventional Plus Icons for Filter Options

    In the absence of checkboxes, users may have doubts about whether flter options from the same filter type can be combined.

    ✅  Recommendation: Each filter option should always be accompanied by a checkbox.
  9. Important Filter Types Are Absent

    As “Price” filter is a common filter type, abscence of it will confuse and disorient users. According to Baymard's mobile testing sessions, 80% of subjects tried to filter product lists by price.1

    Without “User Ratings” filters, users are unable to narrow the product list to items that other users have rated highly.

    A lack of “Product Status” filters often results in the presence of unsuitable items (e.g. "Out of Stock" items) cluttering the product list, slowing down the process of finding both suitable and available products.

    Without “Sales” filter type, nonsale items in the product list can clutter product list for users looking to only find products on sale.

    Without “New Arrivals” filter type, users interested in latest items only will have scroll through a long list of general products.

    ✅  Recommendation: Allow filtering by “Price”, “User Ratings”, “Product Status”, “Sales” and “New Arrivals”. For “Price” filter type, provide price range options and also allow users to to define their own price ranges. “New Arrivals” should be implemented as a top-level filter type that’s visible by default in the filtering interface.

Product Page

Product page audit
  1. “Hierarchy” and “History” Breadcrumbs Are Missing

    Without breadcrumbs on the product details page, users have understanding the site hierarchy, and returning to previous pages.

    ✅  Recommendation: Always provide “Hierarchy” breadcrumbs so that users can uderstand the site hierarchy and easily navigate between pages. Additionaly, provide “History” breadcrumbs so that users, for instance, can return to search results or product list with any of their applied filters and sorting adjustments intact.
  2. Product Pricing Is Confusing

    Member price, which is not applicable to majority of users, is given more prominence than normal price making it difficult for users to evaluate a critical aspect of the product.

    ✅  Recommendation: Increase the normal price's visibility by using a large font size (similar in size to the product headline), bold text style, or eye-catching color.
  3. Insufficent Number of Product Images

    Without a variety of product images, users will have difficulty evaluating products and decide whether a product matches what they are seeking.

    ✅  Recommendation: Always provide no fewer than 3–5 images for all products. As Meeples has a vast product catalogs, they could focus more on providing sufficient images for the most important, most popular, and best-selling products.
  4. “Free Shipping” Information Can Be Easily Overlooked

    “Free Shipping” information is only available in sitewide banner. Since most users still associate banners with ads, they will often ignore information provided to them in sitewide elements like banners.

    ✅  Recommendation: While “free shipping” information can always be included in sitewide elements, such as a header or a banner, it should always be duplicated in or near the “Buy” section. Placement in or near the “Buy” section also clarifies to users that this product specifically qualifies for “free shipping” and isn’t just a generic promotion.
  5. Non-essential Information in the “Buy” Section

    Including too much information (e.g. product specifications in Meeples' case) in the “Buy” section can overwhelm users and distract them from adding products to their cart.

    ✅  Recommendation: Generally avoid including extraneous options and information in the “Buy” section and consider moving the product specifications to a dedicated section below it.
  6. Quantity Fields Can Be Distracting

    For items where users most often purchase a quantity of one, presenting quantity fields near the "Add to Cart" button serves more frequently as clutter and distraction rather than a helpful shortcut for adding multiples to the cart.

    ✅  Recommendation: Hide the quantity field as board games are often bought in single quantities rather than in bulk, which negates the need of a quantity field in the product page.
  7. Missing Estimated Delivery Date

    Many users don’t want to wait until checkout to know when they’ll receive their order.

    ✅  Recommendation: Provide a delivery date estimate or range, near the “Buy” section. Consider embedding a delivery date estimator tool (where users can enter their address information) to allow for a more accurate delivery date estimate.
  8. “Find in Store” Information Is Missing

    Meeples is an omnichannel site whereby they have both physical and online stores. Many users prefer browsing online and making the final purchase at the physical store. For these uses, missing “Find in Store” information can make it more difficult to locate a nearby retail store where they can evaluate potential purchases in person.

    ✅  Recommendation: Provide “Find in Store” information near the “Buy” section.
  9. ‘Horizontal Tabs’ are easily overlooked

    Product details page sections in horizontal tabs are prone to be overlooked by a significant number of users. Additionally, number of tabs that can be fit horizontally is limited.

    ✅  Recommendation: Avoid horizontally tabbed interfaces to prevent users from overlooking crucial product sections. Instead, opt for “Vertically Collapsed Sections” or “‘One Long Page’ with a ‘Sticky TOC’” for the layout.
  10. Difficult to Refind Recently Viewed Items

    Without a list of recently viewed items, refinding a previously visited product can be needlessly difficult as users have to rely on either the native browser “Back” button, navigating categories or submitting search query.

    ✅  Recommendation: Provide a history-based recently viewed items list for all users (including those who aren’t signed in).
  11. Supplementary Products Are Missing

    Without a list of supplementary products, users have difficulty locating products that are supplementary to the currently viewed product.

    ✅  Recommendation: Provide a separate cross-sell section that suggests only supplementary products such as accessories.

Cart and Checkout

Cart audit Guest checkout audit
  1. Cart Link Is Difficult to Locate

    When cart link is not placed in the upper right corner of the interface, it makes it unneccessarily difficult for users to find it.

    Recommendation: Place the link to the cart in the upper-right-hand corner of the site-wide page header, use a clear icon or button with sufficient size, color, contrast, and surrounding white space, and avoid text-only links.
  2. Standalone Quantity Text Fields Are Prone to Error

    Open text fields introduce risk of input errors and require "Update" confirmation which can slow users’ process of updating their cart.

    Recommendation: Use buttons or a “button/text field hybrid” for updating cart quantities.
  3. No Way to Save Cart Items for Later

    Without a "Save" feature, users are unable retain cart items that are of interest but they don't want to purchase right away.

    Recommendation: Allow users to "Save" cart items, but don’t autoscroll users to the section when they click “Save”.
  4. Difficult to Update Cart Quantity

    When users have to click an "Update" button to save quantity changes, a subgroup of users will either not understand that they have to “tell the site twice” by clicking “Update” after changing the quantity, or will simply overlook the “Update” button.

    Recommendation: Autoupdate changes to the quantity field as soon as a new value is typed or selected, and allow users to remove products by selecting or typing “0” (in addition to the “Remove” link).
  5. Too Many Distractions at Checkout

    Dominant non-checkout elements such as the main site navigation can be distracting to users in the checkout process.

    Recommendation: Use an “Enclosed Checkout” by removing the main site navigation and other non-checkout navigational elements from all steps after the cart step and until the order review step.
  6. Missing Process Checkout Steps

    Users become confused or lost if they aren’t able to check their progress in the checkout flow.

    Recommendation: Include process steps for and ensure that they are a one-to-one match with the actual steps in the checkout flow. Consider including the cart, account selection and order confirmation steps.
  7. Insufficient Order Summary

    Without sufficent information regarding an order, users may feel discouraged from completing the checkout process.

    Recommendation: Always provide an order summary during checkout with basic product details, a complete breakdown of pricing information, and delivery details.
  8. Two "Name" Fields Is Unnecessary

    Users think of their name as a single entity, and therefore often write their full name in the "First Name" field.

    Recommendation: Have a single "Full Name" feld, instead of using separate "Last Name" field.
  9. No Explanation for Required Phone Number Field

    Some users are reluctant to provide seemingly unnecessary personal information, especially when there's no explanation for why it's required, while others will abandon rather than provide the information.

    Recommendation: Explain why the phone number is required and how it’s used to alleviate users’ privacy concerns.
  10. Optional Field Can Be Mistaken for Required Fields

    Optional felds can be misinterpreted as required unless both types are explicitly indicated — causing severe form-filling friction.

    Recommendation: Always label both optional and required fields on forms.
  11. Too Many Form Fields

    Users are intimidated when seeing a large amount of form fields.

    Recommendation: Remove any unnecessary felds from the checkout flow. Use smart form field features and designs to collapse, preselect, or otherwise minimize optional fields.
  12. “Address Line 2” Can Be Disruptive

    “Address Line 2” breaks some users’ typing flow, and makes them question if their initial “Address Line 1” input is correct.

    Recommendation: Hide “Address Line 2” behind a link, unless order logs show a high valid usage of the field.
  13. “City” and “State” Field Needlessly Increase Number of Form Fields

    Typing generally fatigues users and they will occasionally make typos, even for well-known inputs.

    Recommendation: Autodetect city and state values after users have entered the last digit in their postal code, but be sure to always allow users to override the autodetected values.
  14. Primary Button Is Too Subtle

    Users often don’t read button microcopy and rely purely on visual cues to determine what is the primary button — which can be problematic if the button’s visual design doesn’t match the importance of its function.

    Recommendation: Make the primary button (for proceeding) noticeably more prominent than the other buttons by giving it a bespoke design, using consistent placement, and using (dynamic) microcopy that clarifies the unique path or action the primary button represents.