Al Jazeera America website redesign
Overview
Gulf-Region-based news company Al Jazeera's American television network video content would be fully integrated into their site for the first time, which prompted a deeper look at the site's video experience, aging appearance, and bespoke product brands.
Strategy
Video: Video consumption data was non-existent, so instead we drew upon competitive trends in video-focused media, news, and social products along with stakeholder goals to guide our efforts. Al Jazeera America saw their new video content as a game-changing aspect of their site, so an optimized multimedia experience built on a flexible, curatorial content-management workflow became our team's north star.
UI Refresh: Site analytics showed growing mobile use in viewers age 18-34 and a 73% home page bounce rate. We prioritized optimizing the mobile the experience while focusing and refining the home page landing experience, paired with an enhanced content discovery system for phase 2.
Brand: Al Jazeera America's properties (television, mobile app, web) were developed apart from each other and shared very few experiential touch points. Our goal was to flex the mobile app and website brands towards the television brand (aka, mothership) with minimal brand redesign (and approval *wink*).
Process
Video: We approached our optimized multimedia experience with a "theatre-style" design concept: fully curated news journeys (Al Jazeera America's events of the day), video and image take center stage (dark interface with low-contrast UI elements), and a full-width, fully responsive video playlist, player, photo wall, and gallery viewer.
UI Refresh: Our editorial workshops identified flexibility as an update requirement, which we addressed with a home page multi-mode hero module, resizable gallery modules, and in-content variable image themes. Our site experience analysis also identified a lot of low-hanging fruit: mobile legibility problems, content hierarchy/density issues, bloated navigation, and an unrefined responsive system. We addressed these issues with a stricter mobile grid and legibility optimized typesetting. We extended our typographic functionally to contrast the site sections, organizational elements, and content from one another. We afforded more "breathing room" through increased white space and stronger grid adherence and added a "big screen" responsive breakpoint for stronger content impact.
Brand: We unstacked the Al Jazeera branding in our navigation and footer, making it more functional along with desaturating the deep blue achieving a more monochromatic theme, highlighting content above UI.
Deliverables
Analysis documents, wireframes, user interface designs, and style guide
Project Method
Design sprints (waterfall) co-created with off-site client product team
Outcome
The site redesign process finalized in four months with some early front-end engineering and stress-testing in the last month. Unfortunately, the engineering progress stagnated and Al Jazeera America closed their doors two weeks after we handed off our designs and style guide. We were never able to fully build and test our designs with an audience. :(