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.
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*).
Video: We approached our optimized multimedia experience with a "theatre-style" design concept: fully curated news journies (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.
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. :(
Analysis documents, wireframes, user interface designs, and style guide
Design sprints (waterfall) co-created with off-site client product team
A classic western-themed music video; art directed, edited, and musically composed by me.
Music: I participate in a Music Writing Day, with some fellow musician friends. The purpose of the day is to write and record 20 original songs in a single day. I've always loved Westerns and film scores, so this is my loving homage to that vibrant and turbulent genre. It took me roughly three hours make.
Video: I created a narrative arc around my film score, splicing classic Westerns scenes and characters together to showcase the land, town, hero, villain, love interest, battle, and the inevitable victory over "the bad guy."
Asian-market handset manufacturer, TCL, had been making internal progress on a new driver assistance mobile Android app for the US market but needed some expertise from our research, design, and testing team to speed production, increase quality, and bring it to market.
The goal was to integrate bespoke driving services (maps, music, phone, messaging, and parking in phase 1) into a seamless and safe driving assistance mobile app. We structured the project where the design and engineering teams would work nearly in parallel to maximize our speed and learning.
1. Competitive product analysis: TCL asian-market app, internal versions of the US market app (v1 + v2), and competition: navigation, music, communications, and parking apps.
2. Feature requirements created from competitive analysis insights, co-authored product goals, and TCL business goals.
3. Design sprints (two-week) with weekly user testing to validate our exploration: one day to digest previous week's learnings and plan, two days to design, one day to prototype, and one day to user-test and highlight insights.
4. User interface design and voice interaction UX began after two sprints (four weeks), which fed into and evolved the wireframe prototype's fidelity and interactions.
5. Package and hand off wireframes, UI designs, and prototypes to the offsite engineering team to build and test...
OutcomeAfter almost getting our first engineered build, our team's involvement with the project stopped. The client built out an internal team under new management, who opted to scrap much of our work in favor of pursuing new project goals. :(
Market research, wireframes, user interface designs, interactive prototypes, and user testing reports
Agile design sprints with weekly user testing
June 20 is International Refugee Day. AJ Plus and Al Jazeera’s Digital Design Team co-authored a 360º VR experience to tell six current day refugee stories.
The project challenge was that 360º content wasn’t available until days before the launch, so most of our time was spent designing a framework that could accomodate expected content but which was flexible enough to support unforseen content variables. The result is a fully responsive and media-rich profile piece concieved, designed, and launched in 10 days.
Al Jazeera was launching their new brand, AJ+, devoted to engaging viewers with easily digestible and relevant content anytime, anywhere. But that wasn’t all, they needed a flexible editorial tool that would also allow content to be modified to tell evolving stories at the lightning fast pace of news.
The AJ+ mobile application uses a modular card sequencing system, wherein each content type is represented by distinct card design, which is sequenced and reshuffled to tell the story. The app also breaks down the wall between editorial team and reader, allowing users to follow and connect directly with the AJ+ team.
As a species, we believe that we have control over what we think and how we experience the world; unfortunately, the science doesn’t support that. This presentation explores the space where logic and emotion meet, where the outer world becomes the interior mind, and where nature inspires human products and processes.
The Digitalist video presents vignettes of excellent customer experiences and sets the tone for Helsinki, Finland's 2016 Digitalist Conference. The goal of the video is to introduce and position Ixonos as a thought leader and trusted moderator for this conference – not an easy task for a small team and a single week. The variety of video content was extensive, needing a unifying visual and editing system to ease viewer comprehension and breath life into each story. The answer was simple: Brady Bunch grid! The modular grid system organizes each of vignette with Ixonos' brand guidelines as the vibrant visual backbone. The camera loosely floats between modules, allowing the viewer to sneak a peak at off-camera content while inside each module, a floating block system stylishly slides content about the screen. The video ends with a slow pan out shot revealing even more stories that Ixonos has yet to tell.
A change of editor, content, and future objectives fueled Juxtapoz magazines 2013 redesign to be friendlier and more engaging. I used urban retro art deco typefaces and graphics, a warmer and more playful color palette, full bleed images, and dynamic and adjustable layouts to give Juxtapoz a style that appeals to our hip, urban readership.
Collected album artwork and live show promotional pieces from my wacky, heavy, and somewhat confusing San Francisco rock band, Two Headed Spy. We had no illusions or intentions of "making it," so the work was always motivated by our own convoluted comedy.
A thought leadership summit including heavy-hitters like John Maeda and Yves Behar, discussing the crossroads of experience and technology, and held at the San Francisco Autodesk gallery inspired a design vision where dynamic angles and soft focus inspire and enliven attendees and followers.