Drive Hispanics to discover unique content created to connect with their culture and identity
Univision.com, is a mix of content verticals: TV, News, Sports, and Radio, looking for a modern approach to content display. For the past 5 years, I'm leading the conceptualization of the design principles, the design system, and cross-platform product architecture. Looking for increasing user engagement, consumption and retention.
· Uniques from 25MUU 02/18 to 54MUU 03/20
Design team : Oscar Lozada, Andrés Góngora, Manuela Pineda, Catalina Henao
CREATIVE PROCESS
The design concept is a result of audience and user patterns analysis, a clear knowledge of the technical platform capabilities, and a multi-disciplinary ideation process to model the system balanced and flexible.
Concept images ↓
User profiles vs verticals & daily journey
Page structure ideation workshops with editorial teams
Cards structure and functionality flexible across platforms
Verticals visual tone vs purpose definition
CARDS FOUNDATION
Cross-platform set of cards created for a purpose, each card represents a specific content format. Design prioritizes content, interaction and visual tone. A user can recognize visual variations when promoting a story, video, slideshow, recipe … e.t.c while scrolling a page.
Scroll down to discover card types ↓
Card sizes: A card type is adaptable to 4 sizes, making them flexible for big screens. Medium and small formats work for all screens.
Card Types: (left to right) Video cards with previews, Story cards, Slideshow cards showing first 3 images, Recipe card exposing meta-data related to duration and difficulty.
Card Types: (left to right) Podcast episode triggers collapsed player, Local weather, Persona cards and Horoscope card.
DESIGN SYSTEM
In 2017 when we moved to Univision Web-app, we released our POC of the Design System documented into a Google Site. During 2019 we finally launched UCI DSM, build with Invision DSM integrating all the cards framework as the cross-platform design foundation.
Check some screenshots ↓
Global components like cross-platform navigation
Grid: explaining in detail atom to component responsiveness through viewports.
Colors: documents the theming variation by vertical, in addition to the global palette.
Buttons: transversal for web and apps, include variations for touch screens vs mouse buttons.
Cards: general experience requirements and size variations documented.
DESIGN ITERATIONS
Months after launch, we iterate and evolve some components, based on user interaction metrics and editorial feedback. We changed our opening widget and card sizes.
See metrics & design iteration ↓
WHAT’S NEXT?