Meeples is an e-commerce store selling board & card games. A clear, simple and reassuring purchase process is vital to conversion which is an area Meeples is severely laking in.
The goal of this particular project was to improve the overall purchase process by conducting a UX audit based on Baymard institute’s research guidelines.
Nov 2022, 1 month
UX audit, Wireframes, High-fidelity prototypes
Figma, Adobe Illustrator
The first task was to review the existing purchasing process and collecting screenshots of all possible journeys. Then, I conducted a detailed audit primarily based on Baymard Institute’s research guidelines. The audit focus areas included the product lists and filtering, product details page and, cart and checkout. The audit allowed me to identify and prioritise areas of improvement.
Some general issues I noticed are that the website is not mobile responsive and has a dated look and feel. I have elaborated other issues in regards to Baymard guidelines in the following sections.
UX audit key takeaways
The use of novel plus icon in combination with the lack of number of matches for each filtering options will not only make users wonders if filters can be combined but also the usefuleness of each filter.
Arguably one of the most common e-commerce filter type, “Price”, is missing. Additionaly, “User Ratings”, “Product Status” and “Sales” filter type are also missing.
Essential product information such as price, user rating and product type is missing. Some product list items don’t have thumbnails which signifies to many users that a product is incomplete.
Pagination is generally perceived to be slow and users browse much less of the total product list as it requires multiple page reloads. It’s also difficult to compare products across multiple pages.
UX audit key takeaways
Each product has one image or none at all and, delivery related details such as esimated delivery date and free shipping information is missing.
Granular details such as product specficiations take up room in the “Buy” section. Additonally, quantity fields are nothing but clutter for items such as board games, which are usually bought in single quantity.
27%1 of users overlook the hidden content in horizontal tabs which may result in users assuming that the product information is incomplete.
Without breadcrumbs, users have trouble finding related products and understanding the site hierarchy.
UX audit key takeaways
Users will often overlook the "Update" button which is required to save quantity changes. Open text fields are prone to error and can slow users’ process of updating their cart.
If there are some items in the cart that users are ready to purchase, the items that they aren’t ready to purchase must be deleted if there’s no way to save them.
Text-only cart link which is not placed in the upper right corner of the interface is prone to be overlooked.
Users are only provided information regarding current step and not the following steps which may result in users becoming confused or lost.
Dominant non-checkout elements such as the main site navigation and filtering sidebar can be distracting to users in the checkout process.
Unnessary form fields such as seperate first and last name, multiple address lines and company can result in users feeling intimidated.
After defining the main issue areas with the help of the audit, I started off with the redesign process. I created an information architecture to properly structure the website followed by low-fidelity wireframes. For the look and feel of the website, I wanted it to be playful and retro. After picking out the fonts and color scheme of the website, I created the final prototype.
Redesign highlights
I replaced plus icon with checkboxes for filters so that users don’t have to wonder if filters are combinable. Additionally, number of results for each filter has also been appended so that users can know, preemptively, the effect of applying each filter.
Absent filter types such as user ratings, price, sale type and deals have been included for a comprehensive filtering experience.
Filter types with more than 15 filters also has a search feature for users ease of finding suitable filters quickly.
As for the logic of applying filter, multiple filter can be combined and product list is live updated as filters are applied on desktop while on mobile, users have to tap “Apply” to apply selected filters.
Redesign highlights
Essential product information such as price, user rating and product type has been added.
It’s recommended to include product thumbnails for all products or at the very least, have thumbnails for the most popular products.
Redesign highlights
To help users focus on adding a product to their cart, only essential information such as product name, price and ratings summary are included in the price section.
Instead of having member price upfront, which maybe confused as general discounted price, an optional membership upsell has been added to keep business needs in mind while reducing pricing ambiguity.
An image gallery with product thumbnails for navigation has also been added as opposed to just one image so that user can get sufficient visual information to make a purchasing decision.
Breadcrumbs have been added at the top of the product details page, so that users can instantly know where they are in the site hierarchy and access adjacent pages quickly.
Free shipping information has been added near the “Buy” section to enable users to claerly know about the total order cost.
Redesign highlights
Cart quantity is autoupdated as users clicks “+” or “-”. Open text field is done away with to avoid human errors.
Users can also conveniently save items that they don’t want to purchase right away. Saved for later section can be found below cart items along with options to move an item back to cart or remove it entirely.
Redesign highlights
An enclosed checkout design has been used by removing all the extraneous promotions on either side as well as simplifying the header . This allows users to focus better on the actual checkout process and prevents users from accidentally exiting the checkout.
Only essential form fields required for shipping address are shown by default. This is achieved by combining the first and last name field, collapsing address line 2 behind a link and only showing city and state field after postal code has been entered. As a result there’s almost a 60% reduction in form fields, making users feel more at ease when seeing the checkout form.
Checkout steps have been presented upfront so that users can know how far along they are in the checkout process and easily navigate between steps.