Aesthetics Clinic — Portal & Dermocosmetics Commerce
Two purpose-separated navigations: one for the clinic, one for the shop.
A combined clinical portal and commerce site for a multidisciplinary aesthetics clinic: treatment presentation, a dermocosmetics store, cart and checkout. I designed 25 responsive nodes across desktop and mobile, including two purpose-separated navigation bars — one for the clinic portal, one for the shop — plus the product card components and the products, purchase, cart, payment and mobile checkout screens. A design credit only: no production URL was recovered, so nothing here says this shipped.
- Role
- Sole website UI designer
- Timeframe
- Jan 2024 – Feb 2024
- Stack
- Figma
- Evidence
- Design file
Sole website UI designer for a multidisciplinary health, facial aesthetics, weight-loss, and detox SPA clinic. Designed 25 responsive nodes across desktop and mobile in Figma, architecting dual purpose-separated navigations (clinic portal vs aesthetic dermocosmetics shop), treatment menus, product showcase (Produtos), shopping cart (Carrinho), and mobile checkout flow (Pagamento, Checkout - Mobile).
Agency engagement at Sagitta between January 9 and February 9, 2024. Executed as sole website UI designer within a collaborative delivery team: Kelvin Bezerra designed the brand identity and logo mark; Juan designed the website and commerce interfaces; a no-code developer implemented and shipped the site on WordPress / WooCommerce.
Hybrid digital clinic: healthcare services and dermocosmetics commerce
- 25
- responsive canvas nodes across desktop and mobile
- 2
- purpose-separated navigation systems (Clinic Portal vs. Shop)
- 5
- pages in the complete e-commerce purchasing sequence
- Woo
- downstream WordPress / WooCommerce deployment
Premium aesthetic and wellness clinics face a specific information architecture tension: they must present clinical credibility and medical credentials for invasive procedures (facial treatments, clinical peels, detox SPA protocols) while operating a commercial storefront for dermatologist-recommended skincare and dermocosmetics.
Dual navigation architecture: separating consultation from commerce
To prevent commercial retail from undermining medical authority, I designed two purpose-separated navigation systems: a primary medical navigation (NavBar) for clinic services, medical staff bios, and treatment protocols, and a specialized secondary retail header (Menu Item NavBar Black Loja) that activates when patients enter the dermocosmetics catalog. This structural separation preserved clinical authority while providing standard e-commerce affordances.
The e-commerce funnel: catalog discovery to mobile checkout
The commercial section was structured as an integrated purchasing sequence across desktop and mobile viewports:
- Dermocosmetics Catalog (Produtos) — Product showcases featuring clinical ingredient summaries, dermatologist recommendations, and skin-type filtering.
- Product Details (Compra) — High-conversion product pages highlighting application instructions, clinical benefits, and dosage guidelines.
- Cart and Order Review (Carrinho) — Transparent order summary with volume discounts and shipping calculation.
- Payment and Mobile Checkout (Pagamento / Checkout - Mobile) — Streamlined checkout flow optimized for mobile payment completion.
Cross-functional agency collaboration
Clínica Castelo exemplifies disciplined agency teamwork: Kelvin Bezerra developed the brand identity, color palette, and typography; I translated those visual foundations into an interactive, multi-viewport digital experience; and a no-code developer deployed the resulting screens to WordPress and WooCommerce. Reusing shared component hierarchies ensured that the final production site matched the design without friction.
Evidence
Delivered to development and shipped to production. The client business subsequently ceased commercial operations and closed, and the domain clinicacastelo.clinic is defunct. No business metrics exist; this project stands as verified evidence of dual-navigation clinic/e-commerce digital architecture.