MAC Cosmetics

May - Jun 2024

Redesigning MAC Cosmetics’ Hong Kong-based e-commerce website

Completed in pursuit of Google UX Design Professional Certificate

Tool Used: Adobe XD

The Problem

Through a detailed review of MAC Cosmetic’s current e-commerce site, there are a few user pain points and areas to improve for the site’s UI, including:

  1. A pop up search bar which is inconsistent in functionality

  2. Header sections with too many categories which may be hard for users to navigate through

  3. An overall harsh colour scheme of mainly black and white, which when paired with an all caps font, may seem overwhelming for users

  4. Product pages are sometimes unresponsive and misaligned, which can be disorienting and disorganised for users

  5. Individual product pages don’t fit properly on the screen, making it difficult for users to view information about the product at one glance

The Solution

  • Simplicity and Navigability

    A priority when redesigning MAC’s page is to make it’s user flow more intuitive and smooth.

    This is addressed by decluttering header categories, sectioning the home page, and designing clear call-to-action buttons.

  • Brand Image Development

    MAC is known for their bold colour scheme of black, white and red. However, with the main theme being black and paired with a bold, all caps font, the lack of white space and overall harshness may overwhelm users.

    This is addressed by retaining MAC's current colour scheme, while redesigning how white space, typography and font sizes are used to improve the overall site's image as clean and organized, while retaining the brand's core identity.

  • Consistency and Organisation

    The current site often misaligns individual products when displaying them, which can disturb the user flow and also come off as disorganized.

    This is addressed by sectioning each page off, such that information of the same category are formatted consistently, while still keeping the overall page visually engaging.

Low Fidelity Designs

Example CheckOut Process
Example Shopping Cart
Example Post Checkout Page
Example About Us Page
Example Individual Products Page

Low Fidelity Prototype

All content in these designs are existing information taken directly from MAC’s official website.

The Final Results

Going from low fidelity to high fidelity, some of the key things I focused on are:

- Reorganising real content from MAC’s e-commerce site into digestible and meaningful spaces (e.g. separating their About Us page into 3 categories: their overall mission, MAC initiatives and MAC ingredients)

- Ensuring the main colour scheme of black and white are retained consistently throughout the site to retain MAC’s core brand identity

- Adjusting font sizes and image sizes to yield a smoother and more intuitive user experience, specifically using bolding and capitalization for call-to-action buttons and enlarging areas meant to draw user’s attention (e.g. landing page model or product title and descriptions)

- Decluttering and using white space effectively to avoid overwhelming users, ensuring there is enough space in between content so there is no information overload on the users’ part

Click here to view the final frames

Thank you for reading!

All content in these designs are existing information taken directly from MAC’s official website.