OVERVIEW

Project

Kylie Cosmetics has four different brand would like to build it under one umbrella for a global shopping cart.

Timeline

3 months

Target Demographic

15-30 year olds who are into celebrities, 90% of time on their mobile devices and constantly on platforms such as Instagram or TikTok.

The header, footer, and navigation area set the tone for the entire website. It is critical to ensure users to know where they currently are in the site hierarchy, especially coming from off-site.

Users rely on navigation to:

• Understand the scope of the products offered

• Understand relationships between information

• Quickly and intuitively find information

Why we did it this way?

• 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 can be compact or robust, depending on the amount of content. Most Looks areas on cosmetics sites include a PLP experience with little information or supporting content. Customers often say they can’t find the “Kylie Look’ they want or that was just posted.

Good examples: Nordstrom, Charlotte Tilbury, Amazon bundles

Why we did it this way?

• Providing a quick Add to Cart from within the ladning 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 expnded view

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

Shop All, Category & product listing pages

Personalization needs be at the forefront for these pages.

Why we did it this way?

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

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

Good exmaples:

• 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 state: Direct users to they want ASAP.

Give them a away to start over

Be human

Why we did it this way?

• Promote the feel of a connection with Kylie and keep users engaged by including an opportunity to craft messaing 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