Vivelon.
Um e-commerce de suplementos pensado do catálogo à fidelidade — Home, página de produto, conta e o programa ViveStars. A supplements e-commerce designed from catalog to loyalty — Home, product page, account and the ViveStars program.
- Meu papelMy role
- UX/UI Designer
- PeríodoTimeline
- 2025 · em andamento2025 · ongoing
- PlataformaPlatform
- Web · mobile first
- FerramentasTools
- Figma
Vender confiança num mercado saturado e regulado.Selling trust in a saturated, regulated market.
A Vivelon precisava de uma loja que transmitisse credibilidade num setor de suplementos disputado e cheio de regras. O catálogo era extenso, a página de produto tinha de deixar claro composição, dosagem e uso, e faltava um motivo concreto para o cliente voltar a comprar. Vivelon needed a store that conveyed credibility in a crowded, tightly-regulated supplements sector. The catalog was large, the product page had to make composition, dosage and usage crystal clear, and there was no concrete reason for customers to buy again.
O objetivo: uma experiência calorosa e confiável que organizasse o catálogo, tornasse a PDP fácil de entender e criasse fidelidade real com o programa ViveStars. The goal: a warm, trustworthy experience that organized the catalog, made the PDP easy to understand and built real loyalty through the ViveStars program.
UX/UI de ponta a ponta.End-to-end UX/UI.
Cuidei da experiência do problema à tela final: arquitetura de informação, fluxos de compra e de conta, wireframes e telas em alta fidelidade. Desenhei Home, página de produto (PDP), login/registo, área de conta e o programa de fidelidade ViveStars. I owned the experience from problem to final screen: information architecture, purchase and account flows, wireframes and high-fidelity screens. I designed the Home, product page (PDP), login/registration, account area and the ViveStars loyalty program.
Também organizei os componentes num pequeno design system, para manter consistência e facilitar o handoff para desenvolvimento. I also organized the components into a small design system, to keep consistency and ease the handoff to development.
Do mercado ao handoff.From market to handoff.
DescobertaDiscovery
Entender o mercado português, a concorrência e as regras de rotulagem que afetam como o produto é descrito.Understanding the Portuguese market, competitors and the labeling rules that shape how products are described.
Arquitetura & fluxosArchitecture & flows
Mapear o catálogo, a jornada de compra, a criação de conta e a mecânica de fidelidade.Mapping the catalog, purchase journey, account creation and the loyalty mechanic.
Wireframes
Estruturar Home, PDP, checkout e conta em baixa fidelidade antes de decidir o visual.Structuring Home, PDP, checkout and account in low fidelity before deciding the visuals.
UI & Design SystemUI & Design System
Telas em alta fidelidade com tokens e componentes reutilizáveis, prontas para escalar.High-fidelity screens with reusable tokens and components, ready to scale.
As telas principais.The key screens.
Tokens e componentes que escalam.Tokens and components that scale.
Para manter consistência e facilitar o handoff, organizei cores, tipografia e componentes num sistema reutilizável — o que aparece na tela vem sempre das mesmas peças.To keep consistency and ease handoff, I organized colors, typography and components into a reusable system — what shows on screen always comes from the same building blocks.
CoresColor
TipografiaTypography
ComponentesComponents
Uma loja coerente, do catálogo à recompra.A coherent store, from catalog to repurchase.
O resultado foi uma experiência consistente e fácil de manter: uma PDP que responde às dúvidas de composição e uso, uma área de conta clara e um programa de fidelidade que dá ao cliente um motivo para voltar. The result was a consistent, easy-to-maintain experience: a PDP that answers composition and usage questions, a clear account area and a loyalty program that gives customers a reason to return.