Editorial product · Front-end
Vinería
An interactive guide that makes wine approachable with search, filters, and progressive profiles. Editorial UX focused on clarity, discovery, and enjoyment.
- Contribution
- Editorial direction, product design, content modeling, and front-end implementation.
- Focus
- React 19 · TypeScript · Vite 8
01 / The challenge
Understand the business before designing the solution.
Vinería is a self-initiated product for people who want to understand varieties, regions, aromas, and pairings without facing an encyclopedia.
Turn extensive research into a clear, visual, and enjoyable experience for people beginning to explore the subject.
02 / The approach
A clear direction for product, experience, and operations.
- 01
Prioritize real user questions over an academic taxonomy.
- 02
Use concise search and filters to lower the initial cognitive load.
- 03
Reveal depth progressively through profiles, map, glossary, and pairings.
03 / What I delivered
From product judgment to a solution the team can use.
- Typed catalog of twenty-four varieties.
- Explorer with search, filters, and profiles in a native dialog.
- Origin map, pairing modules, glossary, and editorial research log.
04 / The product
The experience in context.
05 / Outcome
What the project put in place.
- An educational experience balancing orientation, depth, and visual enjoyment.
- A content model designed to grow without losing consistency.
Principles applied
- Clarity for beginners.
- Progressive depth.
- Content and navigation as one system.
06 / Technology
A stack selected for the solution.
- ReactReact 19
- TypeScriptTypeScript
- ViteVite 8
- VitestVitest
- Testing LibraryTesting Library
- CSSCSS
- Google FontsFraunces
- Google FontsManrope
07 / Repos and links
Where to review the project.
Next step