rare-beauty-website-concept-design-banner.jpg

Rare Beauty by Selena Gomez Website

 

Rare Beauty by Selena Gomez Website: Concept design

Mega-influencer Selena Gomez needed to have a best-in-class digital experience for her beauty brand. Rare Beauty is a brand-defining commerce and content experience built on the belief that beauty should be attainable and authentic; spotlighting Selena’s commitment to mental health advocacy and to building a community that celebrates the rare beauty in everyone. This brand challenges unrealistic standards of perfection. This makeup is made to feel good in, without hiding what makes you feel unique.


My Role

Product Design Direction and oversight, UX/UI Design, Digital Strategy, Rapid Interactive Prototyping, and Information Architecture.

I served as a lead creative on the eCommerce Design Team for this project, taking on both hands-on design and oversight responsibilities. Three design concepts were developed, and this case study focuses on the specific one I designed. Although this concept wasn't chosen for the final launch, many of its elements were carried forward. You can dive deeper into the design process below, and a more detailed case study is also available.

Client

Rare Beauty / Agency: Case

 
 
 

Creating The Essential Rare Beauty Experience

I focused on positioning the site as the primary touchpoint for consumers to experience the brand identity and voice. Creating a consistent consumer experience from discovery to checkout while providing a platform where Rare Beauty’s products, philosophies, and community can evolve and grow over time was a primary digital goal.

The digital strategy pillars for the site revolved around creating the essential Rare Beauty experience by seamlessly blending commerce, content and community. Designing a useful and engaging shade finder experience and designing a bullet-proof site for launch that’s scalable for growth. The brand is giving fans the opportunity to join a community call—an invitation to share their stories in what makes them “rare”—bringing together a selection of people to join the mission of the brand, getting early access to product, more importantly building a community.

Visual Tone of Voice & The Brand Pillars

In this concept, the treatment of product photography shot on top of smooshes that break outside of a perfect circle was inspired by the Japanese philosophy of Wabi-sabi, which focuses on discovering the beauty in imperfection. Rare Beauty aims to find beauty in what society considers imperfect—celebrating individualism and highlighting what makes each of us unique.

The idea is to have Rare Beauty own the “imperfect circle” as a design element. Using these imperfect swatches throughout to represent the beauty in life’s imperfections. With rounded edges and soft curves throughout the designs, inspiration was taken from Selena’s humility and femininity.

 

 

HOMEPAGE: Desktop & Mobile

 
rare-beauty-website-concept-design-hp-m-d.jpg

 

Designing a site framework that’s bullet-proof for launch and scaleable for growth

Keeping the front-end engaging but technically light and nimble in terms of coding was a goal while I was worked through the concept and design phases and being able to identify critical features for launch (such as: shoppable social).

 
mobile-frontal-mockup-rare-beauty-website-concept-design-left.jpg
mobile-frontal-mockup-rare-beauty-website-concept-design-right.jpg

 
 

MOBILE HOMEPAGE

The homepage in this concept leads in with a rotating carousel of campaign photography mixed with video and product shots. As the user scrolls throughout, the “imperfect circle” as a design is used and tap states of macro photography of the actual product.

 

 
 

MOBILE PRODUCT DETAIL PAGE (PDP)

The product is shot on top of a smoosh breaking outside of a perfect circle to keep in line with the Wabi-sabi brand ethos that celebrates individualism and uniqueness. This page educates the user on the benefits on the product while having many opportunities to explore community and social through various entry points.

 

 
sg-rarebeauty.jpg
 

Product Detail Page (PDP): DESKTOP & MOBILE

rare-beauty-website-concept-design-pdp-m-d.jpg

ABOUT PAGE: DESKTOP & MOBILE

rare-beauty-website-concept-design-about-m-d.jpg

Ecommerce Photography Concept and Direction for the Smoosh

Cropped-in and macro

rare-beauty-smoosh-cropped-in.jpg

Grouped, large smoosh on tone

rare-beauty-smoosh-grouped.jpg

The individual smoosh

rare-beauty-smoosh-single.jpg

The imperfect circle smoosh, Wabi-sabi inspired, product breaking out of a perfect circle

rare-beauty-smoosh-circle.jpg

Interactions

Prototypes showing some of the interactions on the homepage and the product detail page


Site Map Exploration

OPTION 1


OPTION 2


OPTION 3


OPTION 4


Wireframes

Lo-fi wireframes: Homepage & Product Detail Page: DESKTOP & MOBILE

 
rare-beauty-wireframe-hp-d-m.jpg
rare-beauty-wireframe-pdp-d-m.jpg