Redesigning Univision.com

Univision is the number-one Spanish language channel network in the world. Aimed at Hispanic Americans in the US, our programming mainly focuses on telenovelas, variety shows, and sports.

In 2015, we completely redesigned Univision.com. The last time it’d been redesigned was 2011, and we knew that it was time to fix the site’s complicated navigation and inconsistent styles—and also finally make it a responsive site. Read on for a glimpse into our process.

Problems to tackle in the redesign

Complicated navigation

Our biggest struggle was—and still is—the site’s navigation. How do people traverse Univision.com, and what are they looking for? Since the 2011 redesign, the site has struggled with its identity (is it a network or is it a portal?)—and the navigation has had more and more pieces piled upon it over the last 4 years.

This becomes an issue for anyone new to the site, as our daily Univision visitors know the exact path to find what they’re looking for, like horoscopes, gossip, and news stories.

Inconsistent template styles

Inconsistent template styles resulted in a collection of broken experiences over the years. Smaller teams within our organization tried to brand themselves, and each publishing team added navigation as needed to help users find content. Because of that, there were 3 navigations on a page with up to 11 items in each nav.

In the end, everything was considered important, so nothing was easy to find. And because everything was hard to find, it needed to be either at the top level or repeated 2 or 3 times.

For example, the entertainment section of the site had:

• 9 navigation items
• 4 sub navigation headers
• 16 additional links

The site wasn’t responsive

80% of users view Univision.com on a mobile device. For years, the publishers and editors at Univision were required to create content for the desktop experience and then publish that content again for the mobile experience in a separate workflow. Or, they could decide that certain content shouldn’t be published to the “simplified experience” of mobile, which deprived most of our audience from the full experience.

The oversimplified navigation was another hinderance:

We tackled global and secondary navigation, along with the building of our content pages (articles, videos, and slideshows), first.

Our design process

We worked in weekly sprints in tandem with the team that, in addition to building the experience, was building a whole new CMS from scratch.

“If you wait for your design to be perfect, you’ll never move forward.”

This process wasn’t easy to keep up with. It included daily design reviews with the smaller teams, daily iterations of complex interactions and responsive templates, stakeholder reviews that could require last-minute revisions and specifications written all in one week.

The only good thing about this was that our team made decisions quickly and moved forward without wasting time trying to make things perfect.

Tools

Using Sketch and InVision made our process go much more smoothly.

Design handoffs

At the end of each week, we delivered a folder in Dropbox to the development team with final files and spec pages that would be added to the style guide for reference.

Final files included the Sketch document for design elements and visual reference and an Omnigraffle file with visual explanation of how the layouts change at different breakpoints. With the initial handoffs, we had a review of the delivered files and we answered any questions the development team had.

“Handoffs are easier when designers are readily available to answer questions.”

Since then, working in a more regular 2-week sprint structure, we’ve delivered files by creating stories in JIRA to assign tasks.

We reviewed, we logged, we tested.

Improvements

• Simpler 7-item global navigation: one universal navigation across all Univision properties, narrowing the dropdowns and simplifying how users find content
• Responsive mobile navigation: desktop and mobile experiences are the same, allowing users to find content in the same place on any device
• Spaces in dropdowns that allow for special event promotions: being able to promote events in a space that users could easily find and get to repeatedly while the event is on live TV
• Breadcrumb navigation that assists the user: due to the deep levels of navigation (in the sports section, specifically), our users needed a way to jump back a few levels to see other teams and leagues

Learnings

• Más icon not clear: in mobile navigation, we tried utilizing this label to assist the user to show more nav items. Users did not understand the label.
• Some of the functionality couldn’t be built as designed (header banners and breadcrumbs): because of template limitations, full-bleed, full-browser-width images didn’t work. Breadcrumbs needed more time to implement based on how the pages were structured in hierarchy.
• Editors weren’t utilizing the menu as planned: editors and publishers used very long labels that didn’t follow the character limits and utilized the furthest left navigation item as a home link, which got confusing when the navigation translated to mobile

In addition to looking at how our navigation fared, we stepped back and looked at what was and wasn’t working in our process:

• A flat InDesign style guide became a 189-page monster. We realized that editing and updating this file was confusing to us, stakeholders, dev, and QA.
• Specs were too vague, leading to a product that wasn’t as designed
• Flat design deliverables weren’t ideal  
• File and knowledge transfer didn’t communicate intent

So we iterated on our process as well as our product.

Post-redesign thoughts

We’ve launched, but we’re still improving the site. Our new process now involves monthly testing, integration with development sprints, and living style guides. We work in staggered 2-week sprints alongside the teams and deliver not only visual designs (still in Sketch) and spec files (via Frontify), but prototypes to the developer as well.

It took a few design sprints with stakeholders reviewing a responsive prototype, but we came up with an updated navigation to test with our users.

Improvements to our navigation:

• We minimized its height so it takes up less space
• We utilized breadcrumbs as a navigational element as initially designed
• We surfaced more navigation to the user in mobile while removing the “more” label
• We replaced the branding banners with a cleaner and more universal logo element

While testing provided valuable feedback, it showed us we still have some work to do—mainly more testing and designing. It’s already a success in how far we’ve come in design and in process, bringing a global audience and a large corporation along with us. I think that’s an achievement in itself. Stayed tuned for its next evolution, happening on March 1.