Jarritos
A ground-up, responsive redesign, rebuild and relaunch of the Jarritos.com website.
Jarritos’ previous .com brand site was much-lauded for its immersive, discovery-based interface and its quirky use of playful illustrations, sound and video to convey their “We’re Not From Here” message. However, the Flash-based site and extremely basic mobile companion were conceived before the era of the iPad, HTML5 and the widespread adoption of the mobile web.
Rather than take the existing Flash site and retrofit it for an iOS-friendly world, we chose to rebuild the site from the ground up, making heavy use of Jarritos’ strong brand, message and street-style Day of the Dead imagery. I performed Information Architecture and User Experience duties to imagine the Jarritos story being told as a deep-scrolling experience, with the user first learning about the product range and placing their colorful glass bottles front and centre. From there, the experience includes bold, full-width videos that introduce the story of brand, a moderated gallery of user-generated photos drawn from Instagram, “Fuerte Vision” video content channels, a moderated selection of user-generated Vine videos and an interactive store locator with HTML5 location-sensing.
Building on solid art direction from Matt Barker that weaves the established “We’re Not From Here” message with recent sugar-skull and Day of the Dead imagery from other Jarritos campaigns, the visual design was put together in beautiful, color-rich grungy tones by Simon Walker. Interaction design and implementation using hand-coded HTML5/SASS/CSS3 animation was completed by myself. Partnering with me on the JavaScript to handle the heavy lifting was Levi McCallum who implemented an efficient build system based around Grunt and RequireJS.
Eager not to treat the mobile experience as a second class citizen, the site was designed from the beginning to be responsive, enabling users to experience a highly-similar experience on mobile devices, including the ability to find nearby stores that stock Jarritos soda, either manually using embedded mapping or via location autodetection, implemented using the HTML5 location API.
Despite the team being very proud of the work done on the redesign and rebuild, there were a few of issues around final live build and optimisation that we were unable to fully resolve due to compressed timelines. As a result, despite best efforts at PNG optimization, code minification and concatenation, the initial pageload-weight is unfortunately still quite large and is most accutely felt on mobile devices using data connections.
Credits
Agency: GSD&M
Art Direction: Matt Barker
Copywriting: Phil Davies
Visual Design: Simon Walker
Producer: Paul Gallardo
IA, UX, Interaction Design: Joel Parr
Development (HTML, CSS, JS): Joel Parr
Development (JS): Levi McCallum
Misc
AAF Addys 2014: Gold—Websites, Consumer Products
SiteInspire: Showcased