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.
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.
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