Role

Led UX transformation for a Fortune 500 weather media’s ad products. Through collaboration with stakeholders and clients, designed custom ad experiences for over 200 domestic and international brands. Key innovations include the creation of branded experiences being seamlessly woven into the user interface of the mobile app, tv programming, and web experiences. In result, created a host of multi-million dollar ad product offerings. Additionally, on-boarded and mentored supporting designers and was sought out by clients to work directly with them.



Branded Content Site - Weather.com


Research: We completed some initial background research and learned we would need to appeal to the weather enthusiasts in order for a content website to be successful with ads. We also found that the majority of the weather enthusiasts don’t particularly like the busy nature of weather.com or the abundance of intrusive non-relevant ads, for example 1-800 Call Me. They are more attracted to a simplistic story-telling with big visuals, interesting locations, factual weather content, and are ok with a few interesting and relevant ads. As we began laying out the user experience, we worked to make sure the layout was actionable, simple, and had strong visual space for the content while integrating space for advertisements. Ultimately we went with a one-page web and mobile site design with navigation that takes you down the page. The layout is bulleted below.

Initial page: Sticky header - TWC logo, Advertiser Logo, Social Media Icons
Big Background visual with logo, article description, and CTA that leads you to the interactive map

Interactive Map: Contains exotic locations that are clickable and will lead you to the specific article page

Advertiser Video: If the user decides to scroll past the interactive map, they will land on the advertiser video next. The video autoplays after a few seconds and is relevant to the content. For example, the website is about how epic Earth and its various geographies are. Toyota’s campaign is all about exploring different places and experiencing unique situations with the Camry. The video will only autoplay once. The user will have to initiate the video after.

Article Nav: If the user scrolled past the interactive map and video…no worries. We incorporated an Article Nav page that will take the user to the article of their choosing. We also integrated a content ad article into the nav and highlighted it to be in compliance of good ad practices. The nav moves right and left as the user uses the arrows on the sides (not pictured) like a carousel effect.

Article Page: Article Page starts with a default. If user clicks on a location on the map or an article nav button, the appropriate article will appear in that space. The page consists of a header, content, integrated ad, CTA, and a big visual image of the location. The CTA could lead to various pages like an outside article or video. It can also send you back to the article nav (most common).

Footer: We incorporated an IAB standard ad position right on top of the footer to ensure more visibility for the advertiser as the user explores the bottom of the website. The footer is necessary in order to be compliant with company policy.

Once we had a pretty solid idea on the user experience and layout, we focused on the user interface. We chose a mix of bold and subtle colors that will push the bold colors forward in an elegant way and kept the graphics fairly clean to make sure we captured the simplistic nature the user likes to experience. The interactive map was designed to be whimsical to relate to Toyota’s campaign. The font choice is a mix of serif and san-serif fonts adding a nice contrast for the logo, headers, and content. We incorporated subtle animation throughout the site to create interest and entertain the user. For example, the nav circles are nested short videos and cinemagraphs.

Ultimately this execution fit into exactly what Toyota was interested in, something outside the box and not just a standard user and ad experience. We were able to use the user experience base and create a similar experience for Columbia Sportswear. Check it out.



Jim Cantore's Truck


I was approached by a different team due to me being dubbed the “Toyota designer” to design Jim Cantore’s truck, sponsored by Toyota. Not knowing much about weather graphics, I collaborated with a few teams to get an idea of what weather graphics look like and the overall color scheme TWC was working with at the time. We had a project manager set up the print vendor who unfortunately didn’t have a template for us. We did some research and found a template online and from there communicated with the vendor once we had final approval from internal teams and Toyota. As I was designing this concept, I had to be conscience of common tv angles they like to use, size of the graphics, and Toyota’s request to add more logos to the Toyota Tundra to emphasize the partnership. A considerable amount of finessing was needed due to expectations and angles. Ultimately, everyone was very pleased with the outcome and they even did a photoshoot (see pic below).