Beauty & Cosmetics D2C Storefront
Eleven screens moving a marketplace seller onto its own brand.
A direct-to-consumer storefront built to move a high-volume marketplace cosmetics seller onto its own brand, benchmarked against a leading Brazilian cosmetics retailer. I designed eleven responsive screens across desktop and mobile — home, products, product detail, cart, payment and mobile checkout — with the e-commerce utility layer: navbar, search, top banner, shopping bag, wishlist and a help and live-chat entry point. Sole website UI designer; identity and the WooCommerce build were other people's.
- Role
- Sole website UI designer
- Timeframe
- Sept 2023 – Sept 2023
- Stack
- Figma
- Evidence
- Design file
Sole Website UI Designer for Click da Beleza, a high-volume cosmetics, beauty, and personal care online retail store transitioning from marketplace operations (2,500+ monthly sales milestone) to a standalone Direct-to-Consumer (D2C) brand. Designed 11 responsive screens on the primary Design page across desktop and mobile devices (Página Inicial, Produtos, Compra, Carrinho, Pagamento, Checkout - Mobile, and mobile views) supported by a 27-node Style Guide specifying e-commerce utility components (NavBar, SearchBox, TopBanner, Sacola bag, Favoritos wishlist, Ajuda chat) in Figma (file key tQvGNS1f5VAefdMxHHKtZe).
Agency employment at Sagitta delivering from September 13, 2023 to September 26, 2023. Juan served as sole website UI designer within the agency team: Kelvin Bezerra created the brand identity and logo, Juan designed the complete D2C cosmetics e-commerce storefront and purchasing funnel in Figma, and an external no-code developer implemented and published the store on WordPress using WooCommerce and Elementor. Scoped by Ramon.
Marketplace-to-D2C migration UX: establishing brand independence
- 11
- responsive commerce screens on the primary Design page
- 27
- e-commerce utility components and design tokens in Style Guide
- 175 KB
- verified historical Elementor build on Wayback Machine
- 13 days
- from design kickoff to final implementation handoff
Sellers operating exclusively on major marketplaces (Mercado Livre, Shopee, Amazon) face high commission take-rates and zero customer retention. Click da Beleza had reached substantial commercial traction—over 2,500 monthly marketplace orders—and sought to transition into a standalone D2C brand. The challenge was building an e-commerce storefront that provided the same sense of purchasing security, delivery reliability, and instant customer support that shoppers expect from institutional marketplaces.
Cosmetics catalog and purchasing funnel across 11 screens
On the primary Design page (node 1:15), I designed the full retail shopping experience, benchmarking market leaders like Beleza na Web:
- Commercial Storefront (Página Inicial) — Promotional header ticker (TopBanner), daily flash sales ('Ofertas do Dia'), category highlights (hair care, skincare, perfumes, makeup), and customer trust badges.
- Product Catalog Discovery (Produtos & Produtos - Mobile) — Structured grid with brand filters, price brackets, hair/skin type selectors, and instant wishlist heart toggles (Favoritos).
- Product Detail View (Compra & Compra - Mobile) — Clear presentation of product volume, formula benefits, customer reviews, and integrated freight estimator.
- Frictionless Bag & Checkout (Carrinho, Pagamento & Checkout - Mobile) — Slide-out shopping bag (Sacola), transparent installment payment options (Pix, credit card), and mobile-optimized one-step checkout.
- Utility Header Suite — Engineered high-utility navigation bar containing search bar (SearchBox), account login, wishlist counter, and instant customer service widget (Ajuda).
The 2,500+ monthly orders figure is the client's pre-existing marketplace volume from the briefing notes on the moodboard page: never present it as a result of this design, and never as a metric Juan moved. And never call the Beleza na Web screens competitive research: they were visual benchmark references kept in the moodboard.
Style guide tokens and retail micro-interactions
The 27-node Style Guide page (node 1:16) standardized Kelvin Bezerra's brand identity: clean feminine pink and gold accent palettes, search bar component states, promo banner typography, cart bag indicators, and customer support triggers.
What this project is and is not
- Not brand identity or logo design. Kelvin Bezerra created the Click da Beleza logo and brand styling.
- Not WordPress or WooCommerce development. Implementation was handled by an external no-code developer.
- Not the current live website. The site serving clickdabeleza.com.br currently online represents a complete rebuild created from the ground up by a different firm; historical shipping is proven via the 2024-09-29 Wayback capture.
- Not responsible for the 2,500+ monthly orders. That was the client's pre-existing marketplace baseline before hiring the agency.
- Not supported by D2C conversion metrics. No revenue or order volume metrics were retained.
The value of brand independence in e-commerce
Click da Beleza illustrates the UX requirements for migrating marketplace merchants to standalone D2C operations. By establishing institutional credibility, prominent product search, and streamlined checkout, the design provided a viable foundation for proprietary customer acquisition.
Evidence
The e-commerce storefront was implemented and published to production. The website serving clickdabeleza.com.br today was later redesigned and rebuilt from scratch by another company, with only scattered original assets surviving. Historical delivery is verified via an era Wayback Machine archive (2024-09-29, 175 KB using the Hello Elementor theme, showing 311 Elementor references) in which the page structure and 'Ofertas do Dia' catalog align with the audited Figma file. No commercial conversion metrics exist. This case study documents marketplace-to-D2C e-commerce migration UX, product discovery, and promotional mechanics.