Drunk Elephant
UI Concept
Brand Discovery | Competitive Analysis | Wireframes + Prototypes | Design System | UI Design
Background
Drunk Elephant is committed to using only clean, biocompatible ingredients in its skincare products. Instead of skincare routines, they promote “skincare smoothies” – blending formulas that are easy to mix and switch up when you skin changes.
Insight
Drunk Elephant has a bright color palette and playful attitude, but the interface is busy with animations and bright color blocks – a contrast from their packaging with tons of white and clean lines.
Goals
- Create less eye strain through designing a cleaner interface.
- Adding a filter to results so the user can complete their task efficiently.
- De-clutter the PDP page to make product information easy to locate.
Moodboard + Brand Adjectives
- When searching for products, predictive text was used to assit the user to finding their product.
- When on the search results page, each result had a button to quickly add to your cart.
- Filtering categories ranged in quantity based on how big the product line was.
- PDP pages included a collapse-able menu to review details and upsell complementary products.
Using a content first approach to the design process, wireframes were created based on current website content and features that would work to get the best user experience based on the discovery phase.
Inspired by the Drunk Elephant packaging design, millennial, bold, pop-y were the core adjectives when creating brand elements.
- Typeface and typographic scale to create a friendly, modern experience
- A color palette that was inspired by core brand colors and packaging
- Simple icons to reduce clutter
- Pop-y graphics to add visual interest
- A button, grid and spacing system for consistency
UI Features
By using atomic design and a modular approach to content blocks, creating a clean look with pops of fun.
When re-flowing content for desktop, product cards are broken up with bigger features.
Product cards used full color photography and minimal design elements to create a fun shopping experience.
By adding most popular searches onto the search page and a predictive text feature buyers are able to complete their task faster than anticipated.
Creating a filter feature with a few categories since the product line is rather small. The focus of these filters are routine time and skin goals, which align with the Drunk Elephant customer.
Filtered search results show tags to easily cancel out filter categories.
Chunking content and creating collapse-able drawers de-clutters PDP content. Each drawer uses bright visuals and product cards to break up text.
Add to bag button and quantity button are adjacent to reduce steps. The overlay feature makes it quicker to checkout and complete the purchase!
