CLEANSE WEBSITE
UX/UI DESIGN
OVERVIEW
BRIEF
Clease is a skincare website designed to provide a seamless and aesthetically pleasing user experience for individuals seeking high-quality, natural skincare products. The design focuses on simplicity, clarity, and user engagement, aligning with the brand’s commitment to clean beauty.
Font: Rubik is a sans serif typeface with slightly rounded corners that works well for lengthy blocks of text. Its modern humanist letterforms, variety of weights and readability at smaller sizes make the font a practical one.
SITE MAP
The site map for this website is meticulously structured to provide visitors with an intuitive and engaging experience centered around clean, natural skincare. The home page serves as the welcoming gateway, offering an introduction to the brand, featured products, and easy navigation through product categories, skincare routines, a dynamic blog, and essential information about the company. Under “Products,” users can explore specific product categories, view individual product details, and discover related items to build a personalized skincare routine.
FEATURES
HOME
Home page featuring an overview of the website, brand motto, awards, and a preview of the products that link to individual product pages.
OUR STORY
Showcases the values, mission, and journey of the Cleanse brand. This includes brands commitment to sustainability, statistics about brand ethics, certifications, and chemists.
OUR PRODUCTS
List of every product that the brand offers that link to individual product pages.
OUR ROUTINES
Provided morning and night skincare routine made up of the brand’s skincare products. Users can use the tab through the pages to see each product.
LOGIN
The login page allows the user to keep track of their purchase and their cart contents.
PRODUCT PAGE
Each product page includes a carasoul images, a list of benefits, a list of ingredients, packaging materials, and an offer at the end to buy complementary products.
PROCESS
HOME
A dynamic hero section dominates the upper part of the page, showcasing one of the most commonly used ingredients in the brand’s skincare; aloe vera.
A multimedia section showcases the brand’s best sellers. Upon clicking, the user can flip through the flavors of the product, and the background of the slider changes.
Further down, more of the brand’s ethos is displayed including information about harvesting processes and information about being cruelty-free. Below, a slider is provided for every product. Upon clicking, the user is directed to individual product pages.
BRAND STORY
Being a musician, Bowie’s discography is a huge component of the site. This meant showcasing his musical journey and contributions.
His album covers are provided from earliest to most recent on a timeline that follows his musical ‘eras.’ Upon selection of an album, a pop up of the album’s description and tracklist appears. (See right.)
PRODUCTS
Exploration of David Bowie’s impact on music, art, and culture, featuring articles, quotes, and testimonials from other artists.
SKINCARE ROUTINES
Detailed timeline and narrative of David Bowie’s life, from birth to legacy.
PRODUCT PAGE
For an individual product page on this skincare website, the design and content aim to provide a comprehensive and enticing overview of the skincare product. The primary goal is to educate and persuade potential customers about the benefits and features of the specific skincare item.
Upon opening the page, the user will see a product description, an interactive ingredient list, statistics on the effectiveness of the product, information about sustainable packaging, and suggestions to complete their skincare routine.
FINISHED PRODUCT
Multiple artboards within Figma were employed to design various sections of the website, each meticulously crafted to convey a sense of purity and transparency synonymous with clean skincare. The platform’s collaborative features facilitated ongoing discussions and feedback loops with team members, ensuring the design aligned with the brand’s identity.
SADEY HAVEL
GRAPHIC DESIGNER
