Overview
The internet was alive with talk about Bravo shows and stars, but their site was outdated and unable to benefit from this growth opportunity. Additionally, 6 years of unstructured additions had created an experience that was confusing for visitors and cumbersome for producers to maintain. My job was to redesign the architecture and UX for BravoTV.com, modernizing the platform and integrating social traffic generation. The result was a site that joined the conversation.
This project is a good example of how I think about organizing content around relevant user needs, building template systems, and working with other team members, all in the context of a strategic framework.
Role
Led UX, with input from specialists in SEO, traffic generation, and usability testing.
Provided support during visual design & development.
Reported and presented to the Bravo Digital SVP, Editor in Chief, Creative Director, and Tech Director.
Contract via The Hired Guns in NYC.
Project
Full web redesign of BravoTV.com.
10,000+ assets with 4MM uniques/mo before the redesign.
Represented the number 11 ranked cable channel.
"What an incredibly smooth launch -- and what a huge improvement to the site on every level."
Michael Small, Digital Managing Director, Bravo TV
Process
A strategist established the opportunity represented by the explosive growth of online talk about Bravo shows and cast members. My work followed, figuring out how to take advantage of this opportunity with a complete redesign of the site.
1) Discovery & Research
2) Information Architecture
3) UX Design
4) Continuity through Visual Design & Development
5) Looking Back
1) Discovery & Research
Getting to know Bravo Fans
With the strategy work complete, I had a solid foundation of resources for starting to understand existing and hoped-for site visitors. This included the strategy report itself, think tank proceedings with broadcast industry influencers, focus groups with fans, Nielsen audience & segmentation reports (better than personas!), and the Bravo brand lens.
I built on this foundation with additional investigations of my own, including spending time with stakeholders & editorial staff, performing search and traffic analytics in Omniture, and competitively reviewing other TV and celebrity culture properties.
Finally, I watched a lot of Bravo and gossiped about Top Chef for the duration of the project. I’m not much of a TV watcher or celebrity follower so I wanted to get into the mind of the audience.
2) Information Architecture
Defining Identity & Structure
The new BravoTV.com architecture needed to address several fundamental needs:
New strategic direction dictated elevating content subject to social buzz.
Six years of organic growth required consolidating a proliferation of loosely related sections and templates.
Cluttered inconsistent navigation needed to be simplified.
Site map for the new site, including multi-homed assets.
When thinking about information architecture, I also consider three adjacent issues:
• How a user will experience the structure through navigation?
• What pages and templates will I need to design (and how does scope limit these)?
• Where will existing content fit in the new structure?
Navigation
Bravo is Shows, People, and Videos.
I believe that navigation needs to quickly tell the story of a site. I already knew shows info and videos were top wants. People came from research that identified a strong desire for Bravolebrities, cast members who become phenomena unto themselves.
I wanted the navigation to tell a succinct story about the site, which can be told in this case by turning the navigation into two simple sentences.
Migration
Reducing nav items (and confusion) by 50%
The old site had 18 top-level sections. These had accumulated over 6 years of content growth because the architecture was too rigid to provide clean integration points. The result was a confusing user experience and a challenge for the producers to manage.
Of the sections that did not fit into Shows, People, or Videos, some were of secondary interest to visitors and others did not align with strategic direction, making them secondary priority. A few I eliminated after stakeholder discussions. Finally, several were seasonal or sponsored sections that came and went. The solution was to be flexible to avoid the problem that had produced this profusion of links:
• Add flexible slots for secondary nav items that could easily be changed.
• Create contextual promotional slots to provide additional visibility when necessary.
Template Inventory
Establishing design scope & schedule
Identifying content types and other repeating layouts was part of my Information Architecture process. I also considered how much I could address within my budgeted hours. The result was a set of 35 core templates, plus a similar number of variations, and several unique pages.
This inventory was a major planning document. I used it to schedule what I would work on and when I would review it with the team. I also planned which templates would be developed into comps, with a goal of reducing the number required to establish the design system. Finally, I used this inventory to track which templates would be a part of usability testing.
Wireframing started with planning the sequence and grouping of what I would work on together.
3) UX Design
Building a template system that balanced consistency with flexibility
Building the system
One of my core skills is building template systems for large complex properties such as BravoTV.com. The UX design system for Bravo included everything from fine-grained details of metadata and title formats, to large media experiences and full-page templates. Here, it was particularly important to create a consistent user experience that could be easily maintained to accommodate the sort of site growth that had created a dissonant profusion of sections and templates.
Bravo's producers were saddled with the need to create multiple title variations for a single asset. A goal of mine was to simplify this task by establishing a unified format for media tiles and list items, so they would only ever need to write one title. The process for doing this started with inventorying content and writing standardized metadata definitions and ended with designing content tiles with contextual display rules.
Growing traffic through social engagement
Much of Bravo’s success as a network has come from high fan engagement. The strategic goal of the redesign was to harness this enthusiasm to drive web traffic, time on site, and build promotional capabilities. This meant kicking off a lot of experiments with social navigation, bite-size polls, sentiment tagging, and more.
One of the fun aspects of this project was experimenting with ways to get fans to interactively engage with Bravo. Some of our ideas worked, some washed out in testing, and some were backburnered due to technical constraints.
UX Design Outcomes
The new system had several immediate benefits. The quantitative results were a 25% increase in traffic post-launch and a 60% reduction in time required to post new content (a new CMS helped a lot here.) Qualitative results were content experiences that let Bravo’s high-quality original assets shine, and simplification of the process for creating ad packages and sponsorships.
4) Continuity
Visual Design, Testing & Development Support
I strongly believe a benefit of good UX is the soup-to-nuts continuity it brings to a project lifecycle. I stayed engaged through to the end.
Visual Design
I coordinated the selection of templates for visual design, provided ongoing feedback to our designer, and actively participated in client reviews of comps. And when things changed during visual design, I updated the wireframes.
Usability Testing
A dedicated contractor provided testing services. I contributed questions collected during design reviews, participated in script development, and observed during testing. And when testing the identified issues, I updated the wireframes and passed on the changes to our visual designer.
Development & QA
I answered developer questions when needed. I also actively participated in QA, making sure that the final work matched the intent of the designs, and confirming that no unexpected usability issues had arisen.
5) Looking Back
So much has changed. This work aged quickly because of the rapid shift to mobile-first design and the growth of content distribution via social media channels rather than websites and blogs. BravoTV.com’s bite-size buzz-worthy content was particularly suited toward this shift, and the site is now a much simpler version than what it was post-redesign.
Taking on this project today would generate very different results:
Much cleaner, more open layout that’s friendly to all breakpoints. While the one I wireframed was clean for the era, it is extremely busy by today’s standards.
Even bigger media experiences, particularly now that streaming HD video is common.
Quick prototyping & online testing would enable rapid iteration of the various social engagement tactics I tried. With the resources available at the time, we had time for only a single cycle of wireframe-design-prototype-test-iterate.
Online collaboration would have saved me many trips to 30 Rock, though these couldn’t have comfortably replaced the high-bandwidth information sharing during the first meetings.
Side question:
Has video streaming changed the web?
Just about every research activity revealed a strong desire for free access to full episodes. Streaming content may be available by web and app, but it is still a walled garden requiring a subscription.
More Case Studies
