UWI Cosmetics
Build-your-own cosmetics, told like an editorial.
- For
- Design Republik
- Role
- Designer and lead developer at the agency
- When
- 2020 to 2021
- Sector
- Retail
- Stack
- WordPress, SCSS, PHP, CSS, JavaScript, WooCommerce, conditional product builder, SEO
The shop is offline now. This is its full homepage from Design Republik's case study, recorded in January 2021.
The brief
UWI was one of the few create-your-own cosmetics shops in Ecuador. Customers design a product before they order it, so the shop had to guide a long chain of choices without feeling like a form, and still look like a beauty brand.
What I did
I designed the shop and led its WordPress and WooCommerce development at Design Republik. Customers pick the ingredients for a face mask or another product, conditional logic guides each choice, and the price is calculated automatically once every ingredient is chosen. Design Republik's case study counts more than 1,000 possible products.
Visual concept
Roboto sets the headings and Lato the text: two clean sans serifs, chosen so the type stays precise while the portraits and the colour carry the emotion. A product builder is a sequence of decisions, and clear, neutral type keeps ingredients, steps and prices easy to compare. The menu runs in spaced capitals for a quieter, editorial feel.
Dusty rose (#debbc1) is the warmth of skin and the brand's signature, black (#000000) gives it a luxury edge and the contrast the builder needs, mauve (#815a62) marks the actions, and white leaves room around the photography.
Palette
- Dusty rose#debbc1
- Black#000000
- Mauve#815a62
- White#ffffff
Type
Display
Roboto
Neo-grotesque sans
Text
UWI was one of the few create-your-own cosmetics shops in Ecuador. Customers design a product before they order it, so the shop had to guide a long chain of choices without feeling like a form, and still look like a beauty brand.
Lato
Humanist sans
The homepage, section by section
- A split hero: a portrait on one side, ¡Vive la experiencia UWI! and a single Crea tu producto button on the other, under a menu in spaced capitals.
- UWI Cosmética Ancestral: the brand story on dusty rose, beside a black card to buy from home.
- Favoritos UWI: four best sellers, each framed in a thin gold square.
- Productos UWI: Facial, Corporal, Capilar and Hombre as portrait tiles.
- Tratamientos UWI: the in-store spa, then a #UWILover sign-up and the newsletter.
- Blog UWI on a rose gradient, an Instagram grid, secure payments and a black footer.
2 questions about UWI Cosmetics, answered
What was Arvind's role on UWI Cosmetics?
Designer and lead developer at the agency (2020 to 2021).
What did the work on UWI Cosmetics cover?
WordPress, SCSS, PHP, CSS, JavaScript, WooCommerce, conditional product builder and SEO.
