Skip to content
Noor
  • Work
  • About
  • Contact
EN ES
Work About Contact
EN ES
© 2026 — NOOR v.1 MX · REMOTE
  • Product Design
  • Design Systems
  • Design Systems Engineering
  • Mobile-first

enVoz

2026 · Product Designer / Design Technologist

Sections
  1. 00 Context
  2. 01 The Challenge
  3. 02 Product Direction
  4. 03 UX Flows & Strategy
  5. 04 Design System & Tokenization
  6. 05 Implementation & Deployment
  7. 06 Key Takeaways
00 · Context

enVoz is a news platform designed for continuous consumption, where audio is the core of the user experience.

The navigation flow draws inspiration from the agility of modern feeds, enabling organic transitions between news 'skimming' and deep content immersion.

01 · The Challenge

Conventional news interfaces prioritize reading, relegating audio to a secondary functionality or a mere 'add-on'.

The challenge was to subvert this visual hierarchy to create a flow centered on listening rhythm, without sacrificing legibility or interface clarity.

02 · Product Direction

I defined a sequential navigation model based on a dynamic card feed, where audio and text coexist as integrated layers.

This information architecture enables three consumption states: quick scanning, active listening, and on-demand deep reading.

- Optimized gestural navigation (gestures & micro-interactions)
- Real-time hybrid synchronization of audio and text
- Seamless transitions via 'shared element transitions' to expanded views
- Mobile-first architecture with adaptive scalability for desktop

03 · UX Flows & Strategy

I analyzed interaction patterns in high-engagement products to define the platform's sequence, rhythm, and retention principles.

I translated these insights into optimized user flows and a high-fidelity UI that served as the 'single source of truth' for stakeholder and investor alignment.

- User Research applied to product interaction principles
- Flow architecture for exploration, playback, and reading
- High-fidelity prototyping for business and technical validation

04 · Design System & Tokenization

I designed and documented a component system based on Design Tokens, ensuring visual consistency and technical efficiency across mobile and web parity.

I implemented an atomic methodology to scale complex patterns (cards, playlists, player) that ensure a cohesive brand experience.

- Design Tokens architecture (color, typography, elevation, spacing)
- Atomic component logic and composite patterns
- System designed under visual hierarchy and cognitive rhythm principles

05 · Implementation & Deployment

I led the technical integration of design into the frontend, bridging the gap between design and code through the direct use of tokens in the implementation.

The resulting system has served as the foundational infrastructure for product evolution by multidisciplinary teams.

- Technical hand-off directly linked to code variables
- Reusable and scalable component library
- Product launched and operational in production environments

06 · Key Takeaways

This project reinforced my ability to operate at the intersection of design and engineering, proving that a robust system is the best enabler for growth.

Adopting a 'System-first' approach allowed for reduced development friction and established a solid foundation for future product iterations.

01 · The Challenge
02 · Product Direction
03 · UX Flows & Strategy
04 · Design System & Tokenization
05 · Implementation & Deployment
06 · Key Takeaways
Noor
Work About Contact
© 2026 — NOOR v.1 Privacy Torreón, MX · REMOTE