Amore Pacific

UI/UX audit

Branding   |    UI / UX Design    |    Wireframes    |     User Personas

A comprehensive mobile usability audit & corrections for this global skincare brand’s e-commerce site.

Introduction

Shown here is a sampling of the usability and design audit I conducted for Amore Pacific’s mobile version of their website. Also shown here are design mockups which correct the concerns.

MENU – Simplify menu icon to 3 rows (standard) – Relocate this button to the top right corner. This is where most users will naturally look for menus and answers to usability studies indicating most users interact with their screens using their right thumb or index finger, this being a more natural and comfortable location.
ACCOUNT ARROW – Not necessary as this behaves visually the same as shopping cart with a slide down drawer of information. – Move ‘my account’ to the right of ‘shopping cart’
STORE LOCATOR LOCATION – Move store locator into the expandable “hamburger” menu and into the footer.
SEARCH (GLOBAL) – The height of all search fields, although they work, feels tight and uncomfortable to interact with. Height should be between 47-57px in height. We recommend 50px in height.
MOBILE IMAGES – On mobile banner images should have an alternate image which suites mobile proportions. Larger type, larger detail images, less open space.
Arrow Color Visibility – Reccomend arrow color is either a color which will stand out even on white backgrounds or perhaps contained on a background to ensure visibility no matter which image is used.
USER SCROLLING VS. AUTO – Automatically scrolling banners/text are negative usability interactions as they rotate without a user’s consent. During mid read or when just about to click the banner could change causing frustration. We recommend a tap to scroll vs automatic.
TEXT BREAK -There is an incorrect break in the text on this screen.
GLOBAL BUTTON STYLE – Current buttons have too many variations of active and click states. There should be 1 primary style for all buttons. Recommend that all buttons be a brighter shade of green or other color that stands out to call a user’s attention.
EMPHASIS ON 10% OFF – Place more emphasis on ‘10% off’.
FORM FIELDS – The height of all fields, although they work, feels tight and uncomfortable to interact with. Height should be between 47-57px in height. We recommend 50px in height to account for human finger tip active areas.
POP-UP TIMING Current time until pop up displays is too long. Looking for a time that gives a users time to see the site before it shows up but not too long.
MENU CLOSE BUTTON – The menu icon needs to change to a close state or “X”.
MENU WIDTH – We recommend spanning the entire width of the phone for the menu. The menu should also expand from the top right corner vs the left side. This will visually align how the menu options and header options work and is more accepted in terms of usability.
SELECTED ITEM – The selected state is low in contrast. Recommend we redesign the selected area by providing a higher contrast option.
ACTIVE AREA SIZE – The height of active, click-able areas should be between 47-57px in height. We recommend 50px in height. This also allows for larger +/- icons.
SWIPE TO CLOSE OPTION – If the menu does not expand full width, a user should be able to swipe the menu closed.
SIGNUP IN MENU – Possibly add ‘signup’ CTA into the menu.
MY CART – “my cart” title needed. – Visually tie this dropdown to the ‘My Cart’ selection made in the header toolbar.
LARGER CLOSE ICON – Icon needs to be larger for easy clicking. 30x30px minimum.
WIDTH – Span section across full width of device.
WHITE SPACE – With a full width dropdown we can afford more white space around CTAs such as ‘Checkout’
LANGUAGE – Use language that is easier to understand and differentiates from ‘checkout’. Such as; “View all items in cart”.
LARGER QTY FIELD – Enlarge this field. 50x50px is recommended.
LINK VS. TITLE – Globally links need to be addressed. We recommend a global link color which will not be confused with other styles. – Currently the links and titles are treated too similarly and links are visually lost. Users scan for relevant information or Calls to Action and this current setup makes that challenging.
LINK VS. TITLE – Globally links need to be addressed. We recommend a global link color which will not be confused with other styles. – Currently the links and titles are treated too similarly and links are visually lost. Users scan for relevant information or Calls to Action and this current setup makes that challenging.

Here are some examples from the audit document: