OVERVIEW

Project

Kylie Cosmetics has four separate brands aim to combine under a single global shopping cart.

Timeline

3 months

Target Demographic

Young adults aged 15-30 who are interested in famous people, spend most of their time on mobile phones, and frequently use social media like Instagram or TikTok.

The header, footer, and navigation guide the website's style. It's important to help users easily see where they are on the site, especially if they are coming from another website.

Users rely on navigation to:

• Understand the scope of the products offered

• Understand relationships between information

• Quickly and intuitively find information

Reasons for our choice?

• Lower nav bars are the new trend focused on “thumb-ready” navigation

• Product category-driven navigation is the most used navigation in most competitors

Good examples:

Sephora, Instagram, Nordstrom App

Changes for MVP version:

• Focused on a simple, clean header with a lower navigation

• Mapped out category navigation for all three brands

• Wrapped in a visual-driven navigation for Looks & Collections

• Added a Cosmetics-driven navigation flow

looks

Looks featured on cosmetics websites can vary in appearance, ranging from compact to robust designs, which largely depend on the volume of content included. It is common to find that many Looks sections on these platforms predominantly offer a Product Listing Page (PLP) experience with minimal details or supplementary information. This typically results in customers expressing difficulties in locating the specific "Kylie Look" they desire, especially if it was recently featured or newly posted on the site.

Good examples: Nordstrom, Charlotte Tilbury, Amazon bundles

Why did we do it like this?

• Providing a quick Add to Cart from within the landing page makes it easy to buy right away.

• The template can be reused as a possible solutions for other pages.

• By including more than just a picture and product list, you do something others are not while increasing SEO and giving customers more content and connection.

Changes for MVP version:

• Added price to the product cards within the expanded view

• Updated the Add to Cart to accommodate choosing all items or just a couple of things

Shop All, Category & product listing pages

Personalization should be the top priority for these pages.

Why did we choose this approach?

• 79% scan content instead of reading it, being brief along with using headers and filters promotes scannability and browsing.

• 98% of all sites do not allow their users to sort a list, for example, hard drives by “storage capacity” despite users regularly looking for the option during testing allowing both filtering and category sorting.

Good examples:

• Target, Honest Company

Changes for MVP version:

• Included a bottom navigation to help show the features interact with the navigation

• Included a Feature Content area and In-Line Marketing Cards, as well as a Featured Products carousel, to better help emphasize key stories and enable more personalization opportunities

• Focused on Brand Level browsing on the Shop All listing page to help guide the customer to the right product and reduce information overload

error page

Best Practices for Error States:

• Direct Users Quickly: Guide users to where they need to go as soon as possible, minimizing frustration and helping them resolve issues efficiently.

• Provide a Restart Option: Offer a clear way for users to start over or reset their actions, allowing them to easily correct mistakes or try again.

• Be Human: Use friendly, empathetic language to communicate errors, making the experience feel more personal and less mechanical.

Why did we choose this approach?

• Promote the feel of a connection with Kylie and keep users engaged by including an opportunity to craft messaging and imagery in the brand voice

• Give users an opportunity to keep exploring or start over, rather than a dead end, by providing additional links through Popular Searches

Good examples: ModCloth, Amazon

Changes for MVP version:

• Created an error page that can be used to highlight the brand using imagery and voice

• Can be set as default when needed

• Allow users to find an alternate path using Popular Searches