{ "projects": [ { "route": "tracing-art", "menutitle": "", "enabled": true, "featured": true, "globaltitle": "", "title": "Tracing Art", "description": "Tracing Art brings to life real stories of art provenance using dynamic visuals and rich data from the newly updated Getty Provenance Index, one of the world’s largest digital collections\nof archival records describing the ownership and market histories of artworks.", "client": "Getty", "date": "May, 2025", "role": "Strategy, Concept, Design, UX, UI, Creative Direction, Art Direction, Animation, Content Management, Development, Project Management", "platforms": "Desktop, Tablet, Mobile", "url": "https://www.getty.edu/tracingart/", "poster": "img/projects/tracing-art/desktop-poster.webp", "poster_m": "img/projects/tracing-art/mobile-poster.webp", "categories": [ "creative-strategy", "design", "development" ], "awards": [], "items": [ { "type": "image", "data": { "src": "img/projects/tracing-art/1.webp", "src_width": 1920, "src_height": 1081, "top_offset": 40 } }, { "type": "headline", "data": { "title": "The Challenge", "body": "Tracing the history of artwork ownership is vital for understanding culture, commerce, and ethics in the art world. Yet, this kind of research usually happens behind closed doors, far away from public view. Getty approached us to help make provenance research more accessible through their newly revamped Getty Provenance Index. Our challenge was to translate millions of archival records into a compelling digital experience that respected the\nrigor of the data while opening it to a broad audience.", "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "1132978959", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/1132978959/rendition/1080p/file.mp4?loc=external&log_user=0&signature=f6362969e8b7f8a75b143d94b3c4cfaa5984d213a199979511fb2c314c6ac7bf", "video_name": "Intro", "video_poster": "img/projects/tracing-art/2.webp", "src_width": 1512, "src_height": 1080, "top_offset": 40 } }, { "type": "text", "data": { "title": "Layers of Meaning", "body": "The creative process centered on turning archival data into human stories. We began with selected case studies before zooming out to find broader narratives across the centuries.We wanted every interaction to reveal new layers of meaning, so close collaboration with Getty scholars was essential to shaping a narrative that was both emotionally resonant and academically sound.", "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/tracing-art/3.webp", "src_width": 1240, "src_height": 930, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/tracing-art/4.webp", "src_width": 606, "src_height": 454, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/tracing-art/5.webp", "src_width": 1240, "src_height": 930, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/tracing-art/6.webp", "src_width": 1240, "src_height": 930, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/tracing-art/7.webp", "src_width": 1240, "src_height": 930, "top_offset": 40 } }, { "type": "headline", "data": { "title": "Elegant Design", "body": "Designing for both accessibility and depth meant walking a line between historical detail and visual clarity. We created a clean, uncluttered design language that echoed archival aesthetics and contemporary museum design. Bold typography paired with seamless transitions and an elegant user interface allows the story to shine without overwhelming the content.", "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/tracing-art/8.webp", "src_width": 1240, "src_height": 850, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/tracing-art/9.webp", "src_width": 1240, "src_height": 850, "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "1132978914", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/1132978914/rendition/1080p/file.mp4?loc=external&log_user=0&signature=4b4c7c67ac34b4db8e8c5385e5b0b85c6fd49026ad4f13536afee7a1353dea95", "video_name": "Icons", "video_poster": "img/projects/tracing-art/10.webp", "src_width": 1512, "src_height": 1080, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/tracing-art/11.webp", "src_width": 1240, "src_height": 850, "top_offset": 40 } }, { "type": "text", "data": { "title": "Seamless Performance", "body": "Careful coordination between the design and development teams allowed us to optimise the performance to handle thousands of visual assets while maintaining a seamless and responsive experience. For 3D moments, like a spinning globe made of hundreds of archival images, we used lightweight graphics techniques to ensure everything ran smoothly. Scroll-based animation and a smooth-scrolling effect make the experience feel fluid and natural.", "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "1132978936", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/1132978936/rendition/1080p/file.mp4?loc=external&log_user=0&signature=9111f8827004a6297a7a30e1955a0abbc8682cf7a764e9c8e0c3c023184bce87", "video_name": "Datavis", "video_poster": "img/projects/tracing-art/12.webp", "src_width": 1512, "src_height": 1080, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/tracing-art/13.webp", "src_width": 596, "src_height": 447, "top_offset": 40 } }, { "type": "headline", "data": { "title": "Result", "body": "Tracing Art is a visually captivating, culturally relevant project that helps bridge the gap between academic provenance research and public storytelling. Earning praise for both its accessibility and rigor, the project transforms what was once an inaccessible archive into an interactive storytelling experience. It stands as a powerful testament to how digital design can help educate and inspire meaningful connections to our collective cultural heritage.", "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "1132978905", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/1132978905/rendition/1080p/file.mp4?loc=external&log_user=0&signature=fc72610d39c23b27f1bd2ba3d7700e8b1e46d64fbbc9f745ebbe134843cf4652", "video_name": "Timeline", "video_poster": "img/projects/tracing-art/14.webp", "src_width": 1512, "src_height": 1080, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/tracing-art/15.webp", "src_width": 606, "src_height": 339, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/tracing-art/16.webp", "src_width": 606, "src_height": 339, "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "1132978921", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/1132978921/rendition/1080p/file.mp4%20%281080p%29.mp4?loc=external&log_user=0&signature=a613eae0264ba8a5b267d7f527e448be207cf1d14a21590e0f3e5b68a594c62b", "video_name": "Artists Carousel", "video_poster": "img/projects/tracing-art/17.webp", "src_width": 1990, "src_height": 1080, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/tracing-art/18.webp", "src_width": 1240, "src_height": 930, "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "1132978945", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/1132978945/rendition/1080p/file.mp4%20%281080p%29.mp4?loc=external&log_user=0&signature=eb719ceb37c84250093926b05210d569bde54cc21e8d636cf5d5e4b04a00925a", "video_name": "Icons Scale", "video_poster": "img/projects/tracing-art/19.webp", "src_width": 1620, "src_height": 1080, "top_offset": 40 } }, { "type": "text", "data": { "title": "Artwork Credits", "body": "All third-party artworks displayed in this case study are open-source assets featured in Tracing Art. These works are licensed under Creative Commons (CC0 and CC BY-NC) or Public Domain terms, with full citations and license details provided within the website.", "top_offset": 40 } } ] }, { "route": "savor", "menutitle": "", "enabled": true, "featured": true, "globaltitle": "", "title": "Savor", "description": "Savor is a pioneering food company that has developed a new way to create functional, versatile fats. With 30% of global emissions from food and a quarter of that tied to fat and oil production, Savor is committed to decarbonizing this essential macronutrient. Its new digital platform provides a strong storytelling framework and visual identity, giving Savor a confident voice in the future of food.", "client": "Savor", "date": "June 2025", "role": "Strategy, Brand, Concept, Design, UX, UI, Development, Creative Direction, Animation, Content Creation, Art Direction, Project Management", "platforms": "Desktop, Tablet, Mobile", "url": "https://www.savor.it/", "poster": "img/projects/savor/webp/poster@lg.webp", "poster_m": "img/projects/savor/webp/poster-mobile@lg.webp", "categories": [ "branding", "content", "creative-strategy", "design", "development" ], "awards": [], "items": [ { "type": "videoloop", "data": { "vimeo_id": "1107412724", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/1107412724/rendition/720p/file.mp4?loc=external&log_user=0&signature=e8f9dddc3f7978a8f5c8b96d302e23feebb3d51690eb18c184d8fb3769e347c7", "video_name": "Savor Case Study", "video_poster": "img/projects/savor/webp/video-poster@lg.webp", "src_width": 1240, "src_height": 691, "top_offset": 40 } }, { "type": "headline", "data": { "title": "The Challenge", "body": "Savor needed a platform where it could tell its story, establishing trust with different audiences, from global food producers and Michelin-starred chefs to partners and end consumers. The brand had to feel visionary yet grounded, striking a balance between science and emotion, innovation and familiarity. The goal was to lay a strong foundation for growth and position Savor as the trusted leader in a new global category.", "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/savor/webp/challenge-00@lg.webp", "src_width": 1320, "src_height": 743, "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "1107412771", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/1107412771/rendition/480p/file.mp4?loc=external&log_user=0&signature=0d175308da607c6249e68d9a8ac0217c26e522f166e26c6ac01fc93bc43f920e", "video_name": "Savor Image Wave", "video_poster": "img/projects/savor/webp/video-challenge-00@lg.webp", "src_width": 1200, "src_height": 676, "top_offset": 40 } }, { "type": "text", "data": { "title": "Connecting Emotion to Story", "body": "We crafted a simple but powerful brand narrative that tapped into the emotional connection we have with food. We celebrated the flavour and experience of Savor while emphasising key aspects like its inspiration from nature, sustainability, and exceptional quality. The story quietly transformed expectations about how food is made, seeding the idea that we can enjoy the same fats we love without compromising taste or the planet. ", "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/savor/webp/challenge-03-01@lg.webp", "src_width": 1222, "src_height": 1627, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/savor/webp/challenge-03-02@lg.webp", "src_width": 611, "src_height": 814, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/savor/webp/challenge-04@lg.webp", "src_width": 1240, "src_height": 827, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/savor/webp/challenge-05@lg.webp", "src_width": 1860, "src_height": 1240, "top_offset": 40 } }, { "type": "text", "data": { "title": "Lush, Tactile Design", "body": "We crafted a design language that elevated the product at every touchpoint. The distinctive visual aesthetic combined seamless motion and digital transitions that complemented the lush photography and film. The result is a rich, tactile experience shaped by warm tones, creamy textures, and organic motifs, reinforcing the sensory pleasure of delicious foods made from real fat.", "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/savor/webp/design-01@lg.webp", "src_width": 1869, "src_height": 1241, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/savor/webp/design-02@lg.webp", "src_width": 1860, "src_height": 1240, "top_offset": 40 } }, { "type": "text", "data": { "title": "Intelligent Content", "body": "Intuitive navigation, intelligent content structure, and adaptive storytelling elements created a user journey that was informative without being overwhelming. By treating the complex science with elegance and clarity, the platform elevates Savor's process as both a testament to human ingenuity and a homage to nature's design.", "top_offset": 40 } }, { "type": "headline", "data": { "title": "Redefining Indulgence", "body": "We partnered with Savor to help launch its first-ever consumer product: sustainable chocolate bonbons, made by ICC World Champion pastry chef Clément Goyffon of One65, San Francisco. The campaign marked a milestone for Savor, showcasing the brand to a wider network and letting consumers get their first taste of the future of fats, delivered right to their door.", "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/savor/webp/indulgence-00@lg.webp", "src_width": 1860, "src_height": 1240, "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "1107412798", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/1107412798/rendition/540p/file.mp4?loc=external&log_user=0&signature=bfe2a2abbe107bde00b16d46ab0b07cedcf2e79a387a32d9eaa94fa9c2ff80be", "video_name": "Savor Bonbon", "video_poster": "img/projects/savor/webp/video-indulgence-01@lg.webp", "src_width": 1200, "src_height": 676, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/savor/webp/indulgence-02-00@lg.webp", "src_width": 612, "src_height": 814, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/savor/webp/indulgence-02-01@lg.webp", "src_width": 612, "src_height": 814, "top_offset": 40 } }, { "type": "headline", "data": { "title": "Result", "body": "Savor's new website provides a singular destination for this world-changing innovation. The launch drew 140M+ media impressions, generated 44 media articles praising its sustainability and innovation, and tracked 85% positive sentiment. The storytelling framework and visual identity give it a strong, confident voice, positioning Savor as the clear leader in a new food category while setting the standard for the future of food innovation.", "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/savor/webp/result-00-00@lg.webp", "src_width": 612, "src_height": 814, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/savor/webp/result-00-01@lg.webp", "src_width": 611, "src_height": 814, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/savor/webp/result-01@lg.webp", "src_width": 1240, "src_height": 827, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/savor/webp/result-02-00@lg.webp", "src_width": 612, "src_height": 814, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/savor/webp/result-02-01@lg.webp", "src_width": 612, "src_height": 814, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/savor/webp/result-03@lg.webp", "src_width": 1860, "src_height": 1240, "top_offset": 40 } } ] }, { "route": "alpine-bio", "menutitle": "", "enabled": true, "featured": true, "globaltitle": "", "title": "Alpine Bio", "description": "Alpine Bio’s mission is to transform plants into the world’s most efficient biofactories for protein production. Their proprietary platform aims to support growers and promote a sustainable future of protein abundance. We created a visually layered website that provides comprehensive overview of Alpine Bio’s offering and technology.", "client": "Alpine Bio", "date": "January, 2025", "role": "Creative Direction, Art Direction, Design, Development, Concept, 2D/3D Animation, Illustration, UX/UI, Content Creation, Project Management, Strategy, Creative and Production Partner", "platforms": "Desktop, Tablet, Mobile", "url": "https://alpbio.com/", "poster": "img/projects/alpine-bio/Carousel-Desktop.jpg", "poster_m": "img/projects/alpine-bio/Carousel-Mobile.jpg", "categories": [ "creative-strategy", "design", "development" ], "awards": [], "items": [ { "type": "videoloop", "data": { "vimeo_id": "1070894796", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/1070894796/rendition/2160p/file.mp4?loc=external&log_user=0&signature=99388f30b805dc611126083eb0f5dbe67f306b682cb17462222e169dd675a489", "video_name": "Homepage-load", "video_poster": "img/projects/alpine-bio/1-Homepage-load.png", "src_width": 3840, "src_height": 2160, "top_offset": 0 } }, { "type": "headline", "data": { "title": "The Challenge", "body": "Alpine Bio needed a website that effectively communicated its innovative brand story and proprietary technology to growers and professionals in agriculture and biotech. Our challenge was to create a captivating user experience that was intuitively structured and easy to understand. To do this, we needed to ensure the site’s design was visually compelling, simple to navigate, and showcased Alpine Bio’s cutting-edge approach to plant-based protein production.", "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/alpine-bio/2-image-1.png", "src_width": 800, "src_height": 519, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/alpine-bio/3-image-2.png", "src_width": 800, "src_height": 514, "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "1071273003", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/1071273003/rendition/1440p/file.mp4?loc=external&log_user=0&signature=d3d32aaa028dac5c8be2caa5448d34bb701779b89f6dc40499a49c0e92443903", "video_name": "Homepage-load", "video_poster": "img/projects/alpine-bio/1-Homepage-load.png", "src_width": 2560, "src_height": 1440, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/alpine-bio/4-desktop-grid.png", "src_width": 1240, "src_height": 690, "top_offset": 40 } }, { "type": "text", "data": { "title": "Circling the Brand Identity", "body": "We began by exploring ways to leverage Alpine Bio’s brand identity—based around dots and circles—to design a rich user experience. We took this theme and layered in bright, contrasting colours, asymmetrical layouts, and overlapping elements to create a collage-driven aesthetic that reflected the company's identity, mission, and technology.", "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "1070894740", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/1070894740/rendition/1440p/file.mp4?loc=external&log_user=0&signature=06633b50144f3bb32e30a8dfa92466342de77a408881edd363b83d119bf98960", "video_name": "plant-growth", "video_poster": "img/projects/alpine-bio/5-plant-growth.png", "src_width": 2560, "src_height": 1440, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/alpine-bio/mobile-group.png", "src_width": 1444, "src_height": 827, "top_offset": 40 } }, { "type": "headline", "data": { "title": "Crafting the Experience", "body": "By carefully balancing dynamic imagery with strategic content, we crafted an experience informed by Alpine Bio’s commitment to innovation and sustainability. Well-defined content sections guide users effortlessly through the site while contrasting organic and scientific visual elements mirror the fusion of agriculture and technology. Scroll-triggered and scroll-driven animations enhance engagement and add depth to the experience.", "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/alpine-bio/6-grid-image.png", "src_width": 1240, "src_height": 930, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/alpine-bio/7-tiny-dots.png", "src_width": 1239, "src_height": 255, "top_offset": 40 } }, { "type": "text", "data": { "title": "Development Challenges", "body": "One of our biggest challenges was building the flexible circle masking system used across the site. After exploring different methods, we settled on two solutions: WebGL for the homepage, ensuring smooth performance for complex animations, and GPU-accelerated canvas drawing for the rest of the site, allowing for greater flexibility in content management. This approach balanced performance and adaptability across different sections of the site.", "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "1070894813", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/1070894813/rendition/1440p/file.mp4?loc=external&log_user=0&signature=a79e285d98778fe6ae1606769db74646ca4d1a74a1ef987b0f97ad657911fb15", "video_name": "Joint-agriculture", "video_poster": "img/projects/alpine-bio/joint-agriculture.png", "src_width": 2284, "src_height": 1440, "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "1070894773", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/1070894773/rendition/1440p/file.mp4?loc=external&log_user=0&signature=e8bfa725e650bf80d3df8cd7fb7d9510cf2e9563e2d37b84bb814fe8e6313fea", "video_name": "cls", "video_poster": "img/projects/alpine-bio/cls.png", "src_width": 2284, "src_height": 1440, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/alpine-bio/mobile-images.png", "src_width": 1240, "src_height": 710, "top_offset": 40 } }, { "type": "headline", "data": { "title": "The Final Result", "body": "The website successfully captures Alpine Bio’s unique identity and combines it with innovative aesthetics and captivating design. By maintaining a dynamic yet accessible user experience, the site effectively communicates Alpine Bio’s mission and positions it as a leader in the field of agriculture and biomanufacturing.", "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "1070894751", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/1070894751/rendition/1440p/file.mp4?loc=external&log_user=0&signature=a4a15a279ba3e13dbced8f390d242d90d69b9664576481d33daecd240f32b348", "video_name": "Gallery", "video_poster": "img/projects/alpine-bio/gallery.png", "src_width": 2284, "src_height": 1440, "top_offset": 40 } } ] }, { "route": "nvg8", "menutitle": "", "enabled": true, "featured": true, "globaltitle": "", "title": "Navigate", "description":"Navigate is gamifying and decentralising data collection, allowing users to take control of their own data in the process. We created an engaging, playful website, combining unique branding moments and lively motion design to introduce users to a brand new data ecosystem.", "client": "Navigate", "date": "July, 2024", "role": "Animation, Creative, Design, Development, Illustration, Web3", "platforms": "Desktop, Tablet, Mobile", "url": "https://nvg8.io/", "poster": "img/projects/nvg8/jpg/Carousel-Desktop-Navigate.jpg", "poster_m": "img/projects/nvg8/jpg/mobile-poster.jpg", "categories": [ "animation", "branding", "creative-strategy", "design", "development" ], "awards": [], "items": [ { "type": "videoloop", "data": { "vimeo_id": "918190464", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/1066983429/rendition/720p/file.mp4?loc=external&log_user=0&signature=38284ef306b357b1d65a99792555ef67659166b40c6d60b33384bca49f4d6ec0&user_id=2250773", "video_name": "Navigate", "video_poster": "img/projects/nvg8/webp/video-full.webp", "src_width": 1080, "src_height": 720, "width_columns": 8, "left_columns": 0, "top_offset": 100 } }, { "type": "headline", "data": { "title": "The Challenge", "body": "Navigate needed a website that could communicate its bold vision while simplifying the complex mechanics of gamified data collection and decentralised ownership. Our challenge was to design an experience that appealed to Web3 enthusiasts and newcomers alike. We had to ensure a seamless balance between engaging visuals and clarity of communication while optimising the design for user onboarding.", "top_offset": 100 } }, { "type": "image", "data": { "src": "img/projects/nvg8/webp/challenge-0.webp", "src_width": 1760, "src_height": 991, "width_columns": 8, "left_columns": 0, "top_offset": 100 } }, { "type": "image", "data": { "src": "img/projects/nvg8/webp/challenge-1.webp", "src_width": 1600, "src_height": 900, "width_columns": 8, "left_columns": 0, "top_offset": 18 } }, { "type": "text", "data": { "title": "Building a Visual Language", "body": "We started by crafting a brand identity that felt modern and accessible, incorporating bold colors and dynamic illustrations. We drew inspiration from the navigational elements of subway systems, partnering with custom icon designer Iconwerk to develop a custom icon set that reinforced this concept.", "top_offset": 100 } }, { "type": "image", "data": { "src": "img/projects/nvg8/webp/language-0-0.webp", "src_width": 1222, "src_height": 1624, "width_columns": 8, "left_columns": 0, "top_offset": 100 } }, { "type": "image", "data": { "src": "img/projects/nvg8/png/language-0-1.png", "src_width": 1222, "src_height": 1624, "width_columns": 8, "left_columns": 8, "top_offset": 18 } }, { "type": "image", "data": { "src": "img/projects/nvg8/webp/language-1.webp", "src_width": 2480, "src_height": 1653, "width_columns": 8, "left_columns": 0, "top_offset": 18 } }, { "type": "videoloop", "data": { "vimeo_id": "918190464", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/1066986190/rendition/720p/file.mp4?loc=external&log_user=0&signature=bc5eed73e5e746a0a76b306776633ab6efa6f9492758e870a6d0bf9b558d11da&user_id=2250773", "video_name": "Navigate", "video_poster": "img/projects/nvg8/webp/video-branding.webp", "src_width": 1080, "src_height": 720, "width_columns": 8, "left_columns": 0, "top_offset": 18 } }, { "type": "text", "data": { "title": "Bringing the Characters to Life", "body": "The \"Navigator\" characters act as user avatars, bringing a personalized element to the experience. These characters were designed in collaboration with animation studio LeCube and later with Navigate’s in-house illustrator to flesh out the different personas.", "top_offset": 100 } }, { "type": "image", "data": { "src": "img/projects/nvg8/png/characters-0.png", "src_width": 2480, "src_height": 1653, "width_columns": 8, "left_columns": 0, "top_offset": 100 } }, { "type": "image", "data": { "src": "img/projects/nvg8/webp/characters-1.webp", "src_width": 2478, "src_height": 1652, "width_columns": 8, "left_columns": 0, "top_offset": 18 } }, { "type": "image", "data": { "src": "img/projects/nvg8/png/characters-2.png", "src_width": 2480, "src_height": 1653, "width_columns": 8, "left_columns": 0, "top_offset": 18 } }, { "type": "headline", "data": { "title": "Interactive Storytelling", "body": "We wanted to explain Navigate’s platform with an engaging interactive story. Working with LeCube, we created an animated video that plays as the user scrolls. The story is designed with pauses at key reading points. To ensure these pauses felt natural, we created a looping video system with subtle animation to ensure a smooth and uninterrupted experience.", "top_offset": 100 } }, { "type": "videoloop", "data": { "vimeo_id": "918190464", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/1066986985/rendition/720p/file.mp4?loc=external&log_user=0&signature=a47237e7109d899d55665b55b180aedd8879cde12ba36b83a8f2d32ee139cfc2&user_id=2250773", "video_name": "Navigate", "video_poster": "img/projects/nvg8/webp/video-storytelling.webp", "src_width": 1080, "src_height": 720, "width_columns": 8, "left_columns": 0, "top_offset": 100 } }, { "type": "image", "data": { "src": "img/projects/nvg8/webp/storytelling-1.webp", "src_width": 2480, "src_height": 1653, "width_columns": 8, "left_columns": 0, "top_offset": 18 } }, { "type": "headline", "data": { "title": "The Final Result", "body": "The Navigate website successfully merges branding, interactivity, and storytelling to deliver an engaging user experience. Through dynamic animations and custom navigation elements, it simplifies complex concepts and makes onboarding users easy. Navigate moves forward with a bold visual identity and an intuitive platform that welcomes users into the future of decentralised data collection.", "top_offset": 100 } }, { "type": "image", "data": { "src": "img/projects/nvg8/webp/result-0-0.webp", "src_width": 1222, "src_height": 1624, "width_columns": 8, "left_columns": 0, "top_offset": 100 } }, { "type": "image", "data": { "src": "img/projects/nvg8/webp/result-0-1.webp", "src_width": 1222, "src_height": 1624, "width_columns": 8, "left_columns": 0, "top_offset": 18 } }, { "type": "image", "data": { "src": "img/projects/nvg8/webp/result-1-0.webp", "src_width": 1222, "src_height": 1624, "width_columns": 8, "left_columns": 0, "top_offset": 15 } }, { "type": "image", "data": { "src": "img/projects/nvg8/webp/result-1-1.webp", "src_width": 1222, "src_height": 1624, "width_columns": 8, "left_columns": 0, "top_offset": 18 } }, { "type": "image", "data": { "src": "img/projects/nvg8/webp/result-2-0.webp", "src_width": 1222, "src_height": 1624, "width_columns": 8, "left_columns": 0, "top_offset": 18 } }, { "type": "image", "data": { "src": "img/projects/nvg8/png/result-2-1.png", "src_width": 1222, "src_height": 1624, "width_columns": 8, "left_columns": 0, "top_offset": 18 } }, { "type": "image", "data": { "src": "img/projects/nvg8/webp/result-3.webp", "src_width": 2478, "src_height": 1652, "width_columns": 8, "left_columns": 0, "top_offset": 18 } } ] }, { "route": "zentry", "menutitle": "", "enabled": true, "featured": true, "globaltitle": "", "title": "Zentry", "description":"Zentry is a rich and evolving ecosystem of products brimming with activities, content, assets and opportunities. The website positions Zentry at the centre of a vibrant new universe of possibilities.", "client": "Zentry", "date": "May, 2024", "role": "Design, Development, Branding, Strategy, UX, UI, Animation, Content Creation", "platforms": "Desktop, Tablet, Mobile", "url": "https://zentry.com/", "poster":"img/projects/zentry/poster.webp", "poster_m": "img/projects/zentry/mobile/poster.webp", "categories": [ "animation", "branding", "content", "creative-strategy", "design", "development" ], "awards": [], "items": [ { "type": "videoloop", "data": { "vimeo_id": "918190464", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/1059599575/rendition/1080p/file.mp4?loc=external&log_user=0&signature=9e3c7b0948fbf0da7bd1a8e51c320b378b20e3034a0c4148d34eb2ebe1ffe101&user_id=2250773", "video_name": "Zentry Social Promo", "video_poster": "img/projects/zentry/video-social-promo.webp", "src_width": 1920, "src_height": 1080, "top_offset": 40 } }, { "type": "headline", "data": { "title": "The Challenge", "body": "Our challenge was to craft an engaging and dynamic web presence for Zentry. We envisioned a portal that would serve as the focal point for its interconnected products, while effectively conveying its open infrastructure, expansive IPs and specialised consumer apps for players and investors alike.", "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "925576491", "video_name": "Video Mockup", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/1059599419/rendition/540p/file.mp4?loc=external&log_user=0&signature=5c55f9bdc1616c12a79cc1f6f83a4016ece5a148368090b5b866f3a1d42cc546&user_id=2250773", "video_poster": "img/projects/zentry/video-mockup.webp", "src_width": 810, "src_height": 540, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/zentry/image-website-grid.webp", "src_width": 2480, "src_height": 1884, "top_offset": 40 } }, { "type": "headline", "data": { "title": "Unified Identity", "body": "We began by crafting a strategy and brand system that ensured a unified identity across every touchpoint. Our creative direction focused on dimensionality and juxtaposition with typography playing a central role. We adapted the FK Screamer typeface to include unique distortions and an elegant glyph system which became a core element of Zentry’s brand.", "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "925576491", "video_name": "Video Logo", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/1059599433/rendition/540p/file.mp4?loc=external&log_user=0&signature=68f77702224821d76d38b00f5099aed39b358c121e271be0cad533f07a89bcfa&user_id=2250773", "video_poster": "img/projects/zentry/video-logo.webp", "src_width": 810, "src_height": 540, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "925576491", "video_name": "Video Zentry", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/1059599407/rendition/540p/file.mp4?loc=external&log_user=0&signature=5a1ca81c556ad511d52bd75b1a2e147bc99ea223db2291fc2583e9e817e21143&user_id=2250773", "video_poster": "img/projects/zentry/video-zentry.webp", "src_width": 810, "src_height": 540, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/zentry/image-logo.webp", "src_width": 2483, "src_height": 1627, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "925576491", "video_name": "Video Letters", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/1059599537/rendition/540p/file.mp4?loc=external&log_user=0&signature=ff075b17d1a4f2a6ef584331ea7135aaf312567be356269d5481d064cf24bf04&user_id=2250773", "video_poster": "img/projects/zentry/video-letters.webp", "src_width": 540, "src_height": 720, "width_columns": 3.95, "left_columns": 0, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/zentry/image-alphabet.webp", "src_width": 1224, "src_height": 1629, "width_columns": 3.95, "left_columns": 4.05, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/zentry/image-guidelines-grid.webp", "src_width": 2480, "src_height": 1904, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "headline", "data": { "title": "Motion Design", "body": "Motion design was key to bringing Zentry’s bold identity to life, with movement embedded across the site. Everything from animation curves to layout reactions was meticulously crafted as part of a larger framework. The identity was built to be flashy, fast, and reactive—changing dimensions and perspectives throughout the user journey. ", "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "925576491", "video_name": "Video Poster", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/1059599639/rendition/540p/file.mp4?loc=external&log_user=0&signature=4c7c2e6768b4a8e2f15fc236df1a17c8c5f88b1890a13f9bbc02f2f848afb5bc&user_id=2250773", "video_poster": "img/projects/zentry/video-poster.webp", "src_width": 874, "src_height": 540, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "925576491", "video_name": "Video Gaming Evolved", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/1059599471/rendition/540p/file.mp4?loc=external&log_user=0&signature=588a065feb3bad7b0ce0adde8a22e1d7a0d41badac9c44edae06e521bc3be666&user_id=2250773", "video_poster": "img/projects/zentry/video-gaming-evolved.webp", "src_width": 540, "src_height": 720, "width_columns": 3.95, "left_columns": 0, "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "925576491", "video_name": "Video Symbols", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/1059599521/rendition/540p/file.mp4?loc=external&log_user=0&signature=87f7a2ea5abdac67eaf02cfbf4fc2e9b65bbd6c1b74ef6ae705b37ef3be18ba7&user_id=2250773", "video_poster": "img/projects/zentry/video-symbols.webp", "src_width": 540, "src_height": 720, "width_columns": 3.95, "left_columns": 4.05, "top_offset": 40 } }, { "type": "headline", "data": { "title": "3D Without WebGL", "body": "To deliver high performance without compromising the bold design approach, we explored ways to achieve 3D-like visual effects without relying on WebGL. While WebGL is a powerful tool, it can be resource-intensive, especially for projects requiring broad accessibility. Instead, we pushed the boundaries of DOM and CSS technologies to achieve a similar result. This approach optimised performance while allowing us to deliver a dynamic visual experience.", "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "925576491", "video_name": "Video Portal Frame", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/1059599394/rendition/540p/file.mp4?loc=external&log_user=0&signature=17629f350c10c1913da5c12a14dae8e05781342cad6c2d6a7be15858feb4ab2c&user_id=2250773", "video_poster": "img/projects/zentry/video-portal-frame.webp", "src_width": 540, "src_height": 540, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "headline", "data": { "title": "Immersive Soundtrack", "body": "We crafted an immersive soundtrack that evolves as users explore the site. Starting with an energetic score, it seamlessly settles into more subtle ambient tones. Sound effects were designed to complement the music, harmonising in the same key and balanced for clarity, enhancing the auditory experience without overwhelming the main track.", "top_offset": 40 } }, { "type": "mobilevideo", "data": { "vimeo_id": "918190464", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/1062337112/rendition/1080p/file.mp4?loc=external&log_user=0&signature=dddcda939706006fbeb24df165df795338713eec56c5a72be86b2ee7b77068c7&user_id=2250773", "video_name": "Zentry Soundtrack", "video_poster": "img/projects/zentry/video-soundtrack.webp", "src_width": 1920, "src_height": 1080, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "headline", "data": { "title": "A Compelling Journey", "body": "With its intuitive navigation, engaging interactions, and visually captivating design elements, Zentry’s website offers users a compelling journey into its interconnected universe. The site establishes a strong online identity for Zentry, building a solid foundation to elevate brand recognition and foster a deeper connection with its audience.", "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "925576491", "video_name": "Video Bento", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/1059599504/rendition/540p/file.mp4?loc=external&log_user=0&signature=0862a0a80ee549bbd2918c41fb15acae71a0594f5b507266e513578d079f9dac&user_id=2250773", "video_poster": "img/projects/zentry/video-bento.webp", "src_width": 810, "src_height": 540, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/zentry/image-social1.webp", "src_width": 1221, "src_height": 1629, "width_columns": 3.95, "left_columns": 0, "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "925576491", "video_name": "Video Portrait Bento", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/1059599556/rendition/540p/file.mp4?loc=external&log_user=0&signature=f2853aab068a3c8ab6925dde51a3fc2267544632686550232c7c9e2cfa69bbef&user_id=2250773", "video_poster": "img/projects/zentry/video-portrait-bento.webp", "src_width": 540, "src_height": 720, "width_columns": 3.95, "left_columns": 4.05, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/zentry/image-mobile.webp", "src_width": 2480, "src_height": 1861, "width_columns": 8, "left_columns": 0, "top_offset": 40 } } ] }, { "route": "sheer-cupidity", "menutitle": "", "enabled": true, "featured": true, "globaltitle": "", "title": "Sheer Cupidity", "description":"Sheer Cupidity is an AI-powered Valentine’s card creator. Launched for Valentine’s Day 2024, Sheer Cupidity demonstrates the potential for using AI to shape powerful and engaging user experiences.", "client": "Resn", "date": "Jan, 2024", "role": "Development, Design, Concept, Creative, Strategy, UX, UI, Creative Direction, Art Direction, Project Management", "platforms": "Desktop, Tablet, Mobile", "url": "https://love.resn.co.nz/", "poster":"img/projects/sheer-cupidity/hero-V4.png", "poster_m": "img/projects/sheer-cupidity/hero-mobile-V4.png", "categories": [ ], "awards": [], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "918190464", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/918190464/rendition/1080p/file.mp4?loc=external&log_user=0&signature=b8494241c85decd99074e1fded516167f25ef97bc0c2e935af4791fddafef9f2", "video_name": "Sheer Cupidity Case Video", "video_poster": "img/projects/sheer-cupidity/video-thumbnail.png", "src_width": 1920, "src_height": 1080, "top_offset": 40 } }, { "type": "headline", "data": { "title": "The Challenge", "body": "Valentine’s Day is a celebration of love—a time to express your feelings with heartfelt gestures, thoughtful gifts and sincere displays of affection. In other words, Valentine’s Day is hard! We wanted to take the struggle out of creating personalized and meaningful Valentine's greetings and put the fun back into the day of love.", "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "919859736", "video_name": "01-video", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/919859736/rendition/720p/file.mp4?loc=external&log_user=0&signature=ef09bcce0042bbf302a39e220f60e85f86fa7474a39d2b26fca53faf9380e5be", "src_width": 1282, "src_height": 720, "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "925576491", "video_name": "02-video-v4", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/925576491/rendition/1080p/file.mp4?loc=external&log_user=0&signature=8ad8b8ff793ce18dda158bad77cc40c9581b8cd9b234637a317bb2f268b4f4c4", "src_width": 1920, "src_height": 1060, "top_offset": 40 } }, { "type": "text", "data": { "title": "AI-Driven Creativity", "body": "Our objective was not simply to redefine the Valentine’s card experience using AI, but to demonstrate its potential in shaping creative digital experiences. To do this we employed a strategic blend of AI, creative design, and user-centric execution.", "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/sheer-cupidity/04-image.png", "src_width": 1088, "src_height": 993, "width_columns": 6, "left_columns": 1, "top_offset": 40 } }, { "type": "headline", "data": { "title": "Concepting", "body": "We began by conceptualizing the user journey, envisioning the experience as a platform where users could effortlessly create personalized Valentine's cards with the assistance of an AI Cupid. Our priority was to ensure that every step of the process was intuitive and enjoyable, from the initial engagement to the final result.", "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "919859824", "video_name": "06-GIF", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/919859824/rendition/1080p/file.mp4?loc=external&log_user=0&signature=bae1190019505ed6cbbd18e9a5fc49a1b9576d824f8fcb6eece232f50ca2806f", "src_width": 1920, "src_height": 1060, "top_offset": 40 } }, { "type": "text", "data": { "title": "User Experience", "body": "Our design team crafted a user-friendly interface that guides users through the card creation process, keeping the focus on simplicity, elegance and humour. Users simply add names and short descriptions of themselves and their lucky Valentine while our AI Cupid does the rest, creating a romantic card cover and love poem that they can share and enjoy.", "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/sheer-cupidity/10-image-V4.png", "src_width": 1069, "src_height": 855, "top_offset": 40 } }, { "type": "headline", "data": { "title": "Development", "body": "We leveraged three AI technologies to create Sheer Cupidity. We used DALL·E 3 to generate unique card covers based on user inputs, GPT-4 to craft the card text and love poems, and OpenAI's Text-to-Speech API to read the poems aloud. The poem reading and original soundtrack added a multi-sensory dimension to the card, making it even more engaging and memorable.", "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/sheer-cupidity/11-image.jpg", "src_width": 1252, "src_height": 692, "top_offset": 40 } }, { "type": "text", "data": { "title": "Prompt and Pipeline Engineering", "body": "Ensuring the outputs were of consistent quality and relevance presented a significant challenge. Through an iterative process of fine-tuning, we successfully engineered a back-end pipeline and prompt system which produced results that seamlessly integrated into the overall experience.", "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "922755538", "video_name": "12-video-v2", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/922755538/rendition/1080p/file.mp4?loc=external&log_user=0&signature=f0fcda03f7c626c5594a3faa21f2f6f6a1f02cb95bf8ea8a21be72571c025a8e", "src_width": 1920, "src_height": 1056, "top_offset": 40 } }, { "type": "headline", "data": { "title": "Results", "body": "We released Sheer Cupidity on the 8th of February, 2024 and promoted it on our social media channels. During the campaign period, we gained 281K impressions across Instagram, LinkedIn and Twitter. With users creating almost seven thousand cards that were viewed over 12 thousand times, Sheer Cupidity exceeded our team's objectives by delivering a seamless user experience with significant engagement and overwhelmingly positive feedback—all while making it a breeze to please your squeeze.", "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/sheer-cupidity/14-image.jpg", "src_width": 2512, "src_height": 1341, "top_offset": 40 } } ] }, { "route": "apeel", "menutitle": "", "enabled": true, "featured": true, "globaltitle": "", "title": "Apeel", "description":"Apeel's innovative, edible plant-based coating helps food stay fresh longer. Our collaboration with Apeel aimed to highlight the product's benefits for consumers and retailers alike, through a website that combines engaging design with informative content. ", "client": "Apeel", "date": "September, 2022", "role": "Design, Development", "platforms": "Desktop, Tablet, Mobile", "url": "https://www.apeel.com/", "poster":"img/projects/apeel/poster-desktop.jpg", "poster_m": "img/projects/apeel/poster-mobile.jpg", "catergories": ["design", "development", "illustration"], "awards": [], "items": [ { "type": "videoloop", "data": { "vimeo_id": "895784949", "video_name": "Valmont Case Study Reel", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/908193422/rendition/720p/file.mp4?loc=external&log_user=0&signature=ba15acbd6419425f5ee77bc7cc1f58b142581169489ff1fee47e57ce1424b3e7", "src_width": 1920, "src_height": 1080, "width_columns": 8, "left_columns": 0, "top_offset": 0 } }, { "type": "headline", "data": { "title": "The Challenge", "body": "What if food went good instead of bad? Apeel is an incredible, edible plant-based coating that extends the shelf life of produce, reducing food waste and saving you money. Our challenge was to make the science behind Apeel engaging and accessible for consumers and retailers alike.", "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/apeel/01.png", "src_width": 1240, "src_height": 690, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/apeel/02.png", "src_width": 880, "src_height": 495, "width_columns": 6, "left_columns": 2, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/apeel/03.png", "src_width": 880, "src_height": 495, "width_columns": 6, "left_columns": 0, "top_offset": 40, "z_index": 2 } }, { "type": "headline", "data": { "title": "Appealing Design", "body": "We elevated Apeel's brand with vibrant photography, a refreshed colour palette, engaging illustrations, and accessible typography. Our design strategy involved enhancing the brand's existing identity with colours and elements that evoke freshness and sustainability while improving contrast and balance.", "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/apeel/04.png", "src_width": 1240, "src_height": 690, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "895784817", "video_name": "Scroll video", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/908193576/rendition/720p/file.mp4?loc=external&log_user=0&signature=5ed88f052b5dcfe5b7fcd2be17400b210cd0601dac20c97ee1471b0e1448b0e9", "src_width": 720, "src_height": 540, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/apeel/06.png", "src_width": 1240, "src_height": 640, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/apeel/07.png", "src_width": 1240, "src_height": 690, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "text", "data": { "title": "Target audiences", "body": "Part of our challenge was to craft a site that catered to two distinct audiences: consumers and retailers. We did this by structuring the site to help consumers understand Apeel's benefits and locate Apeel-partnered retailers while also articulating the value proposition for retailers, focusing on extended shelf-life and reduced losses due to spoilage.", "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/apeel/08.png", "src_width": 1240, "src_height": 1092, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "text", "data": { "title": "Seeing Apeel in Action", "body": "Using simple animations, we showed users the difference in longevity of foods with and without Apeel. This hands-on comparison, controlled by the user, was designed to visually communicate Apeel's effectiveness in preserving freshness, enhancing user engagement and understanding.", "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "895784817", "video_name": "Mouse interaction video", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/908193549/rendition/720p/file.mp4?loc=external&log_user=0&signature=ba5735e54e65c442a9d787324d32c1e807667241393118e8498b275e25eff870", "src_width": 720, "src_height": 540, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "headline", "data": { "title": "Results", "body": "The result was an award-winning website that felt bold, fresh, and embodies the essence of Apeel's mission and brand. It's a harmonious blend of functionality and design that serves the needs of its stakeholders while reinforcing Apeel's position in the market as an innovator in food sustainability.", "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/apeel/10.png", "src_width": 1240, "src_height": 640, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/apeel/11.png", "src_width": 1240, "src_height": 690, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/apeel/12.png", "src_width": 1240, "src_height": 690, "width_columns": 8, "left_columns": 0, "top_offset": 40 } } ] }, { "route": "valmont", "menutitle": "", "enabled": true, "featured": true, "globaltitle": "", "title": "Valmont", "description":"Valmont.com encapsulates Valmont’s forward-looking vision through immersive storytelling. Merging sophisticated design with advanced motion graphics and 3D content, the website establishes how the company uses its expertise, engineering and innovation to solve some of the world's biggest challenges.", "client": "Valmont", "date": "September, 2023", "role": "Strategy, Creative Direction, UX & UI Design, 3D Animation, Web Development, Social Content", "platforms": "Desktop, Tablet, Mobile", "url": "https://valmont.com/", "poster":"img/projects/valmont/poster-desktop.jpg", "poster_m": "img/projects/valmont/poster-mobile.jpg", "catergories": ["design", "development", "illustration"], "awards": [], "items": [ { "type": "videoloop", "data": { "vimeo_id": "895784949", "video_name": "Valmont Case Study Reel", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/895784949/rendition/720p/file.mp4?loc=external&log_user=0&signature=9785fd58f7c5a3680fe2a2406ff747a95ae2e5b66d34ff7cf44a5df1c91455f6", "src_width": 1920, "src_height": 1080, "width_columns": 8, "left_columns": 0, "top_offset": -60 } }, { "type": "headline", "data": { "title": "The Challenge", "body": "Valmont is a global leader in creating vital infrastructure and advancing agricultural productivity with a commitment to conserving resources and improving life. In 2023, Valmont’s website needed a digital transformation that would reflect the company's impact in the world today and in the future.", "top_offset": 60 } }, { "type": "videoloop", "data": { "vimeo_id": "895784817", "video_name": "Home page scroll", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/895784817/rendition/720p/file.mp4?loc=external&log_user=0&signature=48718a8aab7d9fc6e7512fb915dc2562bea41d5abe6deb7ee23e7f97962c8f0a", "src_width": 1920, "src_height": 1080, "width_columns": 8, "left_columns": 0, "top_offset": 20 } }, { "type": "headline", "data": { "title": "Compelling Storytelling", "body": "We envisioned a site that positioned Valmont as a forward-thinking industry leader, emphasising its dedication to meeting the needs of its clients now and in the future. Using compelling visuals and storytelling, we set out to communicate Valmont's commitment to improving lives with solutions that contribute to sustainability and engineering advancements.", "top_offset": 60 } }, { "type": "image", "data": { "src": "img/projects/valmont/storytelling.jpg", "src_width": 3840, "src_height": 2989, "width_columns": 8, "left_columns": 0, "top_offset": 20, "z_index": 2 } }, { "type": "headline", "data": { "title": "Captivating Design", "body": "The visual richness of the site captivates visitors and enhances their understanding of Valmont's mission and values. By seamlessly integrating 3D motion graphics into the design, we were able to leverage a powerful storytelling tool while elevating the aesthetic appeal.", "top_offset": 60 } }, { "type": "videoloop", "data": { "vimeo_id": "895784922", "video_name": "Animation on scroll", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/895784922/rendition/720p/file.mp4?loc=external&log_user=0&signature=6d508ff76364d6763a233297c636e0e84db87092635e8632b39ba6d641413359", "src_width": 1920, "src_height": 1080, "width_columns": 8, "left_columns": 0, "top_offset": 20 } }, { "type": "headline", "data": { "title": "Creating the Visuals", "body": "We created extensive 3D assets to construct the motion graphic scenes. By leveraging advanced design techniques, we crafted visuals that capture attention and communicate the company's role in delivering solutions to major global challenges across a broad spectrum of markets. The result is a visually compelling representation of Valmont's industry leadership and expertise.", "top_offset": 60 } }, { "type": "videoloop", "data": { "vimeo_id": "895849645", "video_name": "Wireframe animation", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/895849645/rendition/720p/file.mp4?loc=external&log_user=0&signature=1dff81a771bd2d98f5b1098d56e7aaef2ffbe28104ae73d0258203751faa0d1c", "src_width": 1920, "src_height": 1080, "width_columns": 8, "left_columns": 0, "top_offset": 20 } }, { "type": "videoloop", "data": { "vimeo_id": "895849458", "video_name": "Agriculture entangled in infrastructure", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/895849458/rendition/720p/file.mp4?loc=external&log_user=0&signature=fb7f9d0c7c896c9800960d9a25cb116baa53151a3b9954f4eabb51e067050adc", "src_width": 1920, "src_height": 1080, "width_columns": 8, "left_columns": 0, "top_offset": 20 } }, { "type": "videoloop", "data": { "vimeo_id": "895849497", "video_name": "Agriculture entangled in infrastructure", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/895849497/rendition/720p/file.mp4?loc=external&log_user=0&signature=b0cfb1a7d6ed32a30343e9723ffb9496b18a26324e4c7bb31264a8923f243579", "src_width": 1920, "src_height": 1080, "width_columns": 8, "left_columns": 0, "top_offset": 20 } }, { "type": "videoloop", "data": { "vimeo_id": "895849517", "video_name": "Infrastructure animation", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/895849517/rendition/720p/file.mp4?loc=external&log_user=0&signature=c7bc528d455989964af880048c16a9fb2e099c8074df9765db13dec8468b0dcb", "src_width": 1920, "src_height": 1080, "width_columns": 8, "left_columns": 0, "top_offset": 20 } }, { "type": "videoloop", "data": { "vimeo_id": "895849550", "video_name": "Solar panels", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/895849550/rendition/720p/file.mp4?loc=external&log_user=0&signature=388d9ef892f06f4dea6b1c9b444898c452c0adbc39e9842b9b5ea8ddb58033f3", "src_width": 1920, "src_height": 1080, "width_columns": 8, "left_columns": 0, "top_offset": 20 } }, { "type": "videoloop", "data": { "vimeo_id": "895849569", "video_name": "Agriculture animation", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/895849569/rendition/720p/file.mp4?loc=external&log_user=0&signature=8e0a709938297f41da1a83d18bcafc3cfde74ce3032c8ef10fe8ca6a5caea1cb", "src_width": 1920, "src_height": 1080, "width_columns": 8, "left_columns": 0, "top_offset": 20 } }, { "type": "videoloop", "data": { "vimeo_id": "895849587", "video_name": "Agriculture entangled in infrastructure", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/895849587/rendition/720p/file.mp4?loc=external&log_user=0&signature=f855525f9934500af458b10c42b09dbe93e19ee57708911b17967e4b89f2e66c", "src_width": 1920, "src_height": 1080, "width_columns": 8, "left_columns": 0, "top_offset": 20 } }, { "type": "videoloop", "data": { "vimeo_id": "895849608", "video_name": "Agriculture animation", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/895849608/rendition/720p/file.mp4?loc=external&log_user=0&signature=b03b07ff67e7456a1d877a0f2472637bae56aa58526e9d8f3cd937bfaa10aa4c", "src_width": 1920, "src_height": 1080, "width_columns": 8, "left_columns": 0, "top_offset": 20 } }, { "type": "videoloop", "data": { "vimeo_id": "895849626", "video_name": "Agriculture animation", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/895849626/rendition/720p/file.mp4?loc=external&log_user=0&signature=83d69ddd1e0bf7a3a6f41ca65d4902de22e74ac2bacb5131c5b563ee93f18ed7", "src_width": 1920, "src_height": 1080, "width_columns": 8, "left_columns": 0, "top_offset": 20 } }, { "type": "headline", "data": { "title": "Modular CMS", "body": "We crafted the site with Valmont's CMS in mind, ensuring effortless integration by the client's development team. This enables Valmont to uphold a dynamic online presence, convey a current and impactful brand message, and meet the evolving needs of its audience.", "top_offset": 60 } }, { "type": "image", "data": { "src": "img/projects/valmont/cms.jpg", "src_width": 3840, "src_height": 2917, "width_columns": 14, "left_columns": -3, "top_offset": 20, "z_index": 2 } }, { "type": "headline", "data": { "title": "Results", "body": "Valmont’s new website marks a dynamic and contemporary update showcasing its innovation and expertise. It not only enhances the user experience but also plays a crucial role in advancing the company's narrative. As a result, Valmont now stands equipped with a powerful digital experience that not only meets its evolving needs but also propels its story forward, reinforcing its position as a trailblazer in the global market.", "top_offset": 60 } }, { "type": "image", "data": { "src": "img/projects/valmont/results.jpg", "src_width": 3840, "src_height": 2707, "width_columns": 14, "left_columns": -3, "top_offset": 20, "z_index": 2 } } ] }, { "route": "sculpting-harmony", "menutitle": "", "enabled": true, "featured": true, "globaltitle": "", "title": "Sculpting Harmony", "description": "Sculpting Harmony is a digital exhibition showcasing the Walt Disney Concert Hall. With models, sketches, and photographs from the Frank O. Gehry papers, viewers can explore new interviews with Frank Gehry, interactive 3D media and novel scholarship.", "client": "Getty", "date": "October 2023", "role": "Development, Design, Concept, Animation (2D/3D), Creative, Strategy, UX, UI, Creative Direction, Content Creation, Art Direction, Project Management, Creative and Production Partner", "platforms": "", "url": "https://gehry.getty.edu/", "poster": "img/projects/sculpting-harmony/poster-desktop.jpg", "poster_m": "img/projects/sculpting-harmony/poster-mobile.jpg", "categories": [ "animation", "creative-strategy", "design", "development" ], "awards": [], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "875898582", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/875898582/rendition/1080p/file.mp4?loc=external&log_user=0&signature=f03d82771fc56780c8df54fa6b556deae5b8d7e23d33e107c69194bb6082426a", "video_name": "Sculpting Harmony", "video_poster": "img/projects/sculpting-harmony/hero-video-cover.png", "src_width": 1920, "src_height": 1080, "width_columns": 8, "left_columns": 0, "top_offset": -60 } }, { "type": "headline", "data": { "title": "Celebrating a Legacy", "body": "When Getty acquired the Frank O. Gehry papers—a vast treasure trove of materials—they embraced the monumental responsibility to steward his legacy. In addition to digitising and cataloguing the archive, Getty aimed to share it with the public. To further this goal, Getty approached Resn to help create an interactive exhibition of one of Frank Gehry's masterpieces, the Walt Disney Concert Hall.", "top_offset": 60 } }, { "type": "videoloop", "data": { "vimeo_id": "875776463", "video_name": "main scroll", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/875776463/rendition/1080p/file.mp4?loc=external&log_user=0&signature=482b6911e11d101ed4d63a70d021b5ce75ad5acecac575ddac84f263e4c1282b", "src_width": 1586, "src_height": 1080, "width_columns": 8, "left_columns": 0, "top_offset": 20 } }, { "type": "text", "data": { "title": "Art Direction", "body": "We aimed to infuse Frank Gehry’s authentic style and trademark sketches into the art direction, striking a balance between a vibrant celebration of the concert hall and an elegant, editorial approach for a scholarly audience. We also pushed the limits of the typography to express the concert hall’s distinctive shapes, diverse orchestral sounds, and Gehry’s playful personality.", "top_offset": 30 } }, { "type": "image", "data": { "src": "img/projects/sculpting-harmony/stills-01.png", "src_width": 1600, "src_height": 1200, "width_columns": 8, "left_columns": 0, "top_offset": 60 } }, { "type": "image", "data": { "src": "img/projects/sculpting-harmony/stills-05.png", "src_width": 1600, "src_height": 1200, "width_columns": 3.9, "left_columns": 0, "top_offset": 60 } }, { "type": "image", "data": { "src": "img/projects/sculpting-harmony/stills-04.png", "src_width": 1600, "src_height": 1200, "width_columns": 3.9, "left_columns": 4.1, "top_offset": 60 } }, { "type": "image", "data": { "src": "img/projects/sculpting-harmony/stills-02.png", "src_width": 1600, "src_height": 1200, "width_columns": 8, "left_columns": 0, "top_offset": 25, "z_index": 3 } }, { "type": "videoloop", "data": { "vimeo_id": "875778101", "video_name": "kinetic type", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/875778101/rendition/1080p/file.mp4?loc=external&log_user=0&signature=5246f238595a7248332484068a3741ea937edcd310df338adf56b84ff9431acc", "src_width": 1440, "src_height": 1080, "width_columns": 8, "left_columns": 0, "top_offset": 60 } }, { "type": "headline", "data": { "title": "Documentary Experience", "body": "New interviews with Frank Gehry offer deep insights into his creative journey. Through these in-depth discussions, viewers get a firsthand account of his process, infusing the story with his personal touch and unique perspective.", "top_offset": 60 } }, { "type": "videoloop", "data": { "vimeo_id": "875779126", "video_name": "frank-interview", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/875779126/rendition/720p/file.mp4?loc=external&log_user=0&signature=db234f32151e96a174c66fd1a0b754e9e84acb11fd1066a36523095fc6746c4b", "src_width": 1066, "src_height": 720, "width_columns": 5.6, "left_columns": 0, "top_offset": 60 } }, { "type": "image", "data": { "src": "img/projects/sculpting-harmony/doc-1.png", "src_width": 1200, "src_height": 752, "width_columns": 3.9, "left_columns": 4.1, "top_offset": 60 } }, { "type": "image", "data": { "src": "img/projects/sculpting-harmony/doc-2.png", "src_width": 722, "src_height": 616, "width_columns": 2.3, "left_columns": 1.3, "top_offset": 60 } }, { "type": "videoloop", "data": { "vimeo_id": "875779046", "video_name": "web-cs-story", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/875779046/rendition/1080p/file.mp4?loc=external&log_user=0&signature=fffb59dd4fddc51f3c70dfe6ae1e757afba75b578c2808847eb2a4705b99ad1b", "src_width": 1586, "src_height": 1080, "width_columns": 8, "left_columns": 0, "top_offset": 60 } }, { "type": "videoloop", "data": { "vimeo_id": "875779152", "video_name": "mobile-story", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/875779152/rendition/1080p/file.mp4?loc=external&log_user=0&signature=b72c28e261bcfb732130e76f02083b1328647b723c0335e400c6edf10bd49506", "src_width": 1440, "src_height": 1080, "width_columns": 8, "left_columns": 0, "top_offset": 60 } }, { "type": "text", "data": { "title": "Interactive 3D Models", "body": "We brought Frank Gehry's architectural models to life by transforming them into interactive 3D renderings. Visitors can explore the intricate details of the models from all angles and gain insight into Gehry’s creative vision.", "top_offset": 60 } }, { "type": "videoloop", "data": { "vimeo_id": "875779175", "video_name": "web-cs-3d", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/875779175/rendition/1080p/file.mp4?loc=external&log_user=0&signature=7a9a8f2f64ca49b7915295dc90b97caba9c38db92ec50e2ee7ce7478ce408b84", "src_width": 1586, "src_height": 1080, "width_columns": 6, "left_columns": 0, "top_offset": 60 } }, { "type": "videoloop", "data": { "vimeo_id": "875779072", "video_name": "3D-models-spinning", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/875779072/rendition/1080p/file.mp4?loc=external&log_user=0&signature=4f416dc01d0d63e6829d02a1ed877998d65f4f1900e50066fa5a1acce2848371", "src_width": 1440, "src_height": 1080, "width_columns": 3.8, "left_columns": 4.2, "top_offset": 60 } }, { "type": "headline", "data": { "title": "A Closer Look Into Frank Gehry’s Process", "body": "The editorial chapters take you behind the scenes with new scholarship that reveals Frank Gehry’s creative process. Getty’s extensive research takes a deep dive into the architectural journey of the WDCH and offers new insights for those who seek a deeper understanding of its creation.", "top_offset": 60 } }, { "type": "videoloop", "data": { "vimeo_id": "875779100", "video_name": "editorial-modules", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/875779100/rendition/1080p/file.mp4?loc=external&log_user=0&signature=b13bb9d8259e0269a49982f8325c9aef40271fb0fca5241a3e877e1f154b108b", "src_width": 1440, "src_height": 1080, "width_columns": 8, "left_columns": 0, "top_offset": 60 } }, { "type": "image", "data": { "src": "img/projects/sculpting-harmony/editorial-still.png", "src_width": 2480, "src_height": 1432, "width_columns": 8, "left_columns": 0, "top_offset": 60 } }, { "type": "videoloop", "data": { "vimeo_id": "875784114", "video_name": "editorial-hero", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/875784114/rendition/1080p/file.mp4?loc=external&log_user=0&signature=c23c3e646b890e2a69e6d04c0cee7fc0d3bc7f1b38b0764bf1f47fcf395764ce", "src_width": 1440, "src_height": 1080, "width_columns": 8, "left_columns": 0, "top_offset": 60 } }, { "type": "headline", "data": { "title": "Capturing the Masterpiece", "body": "We gave the audience a fitting introduction to the WDCH through stunning aerial footage, allowing them to advance the camera as they scroll. To achieve this we prototyped a 3D replica of the building and mapped out the movement for seven cameras. The drone team in L.A. used this data to precisely choreograph their flight paths around the building.", "top_offset": 60 } }, { "type": "videoloop", "data": { "vimeo_id": "875779202", "video_name": "web-cs-drone-1", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/875779202/rendition/1080p/file.mp4?loc=external&log_user=0&signature=ce8b45ad5dd53bc0582039c134a45d8cbfa62fb60f9f09ae4a4074ccabb46d28", "src_width": 1600, "src_height": 1080, "width_columns": 8, "left_columns": 0, "top_offset": 60 } }, { "type": "videoloop", "data": { "vimeo_id": "875779251", "video_name": "web-cs-drone-2", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/875779251/rendition/720p/file.mp4?loc=external&log_user=0&signature=28b803b6234c057fca3352ac475a1f4c56043ad45a641d2bec95f2c10b161a77", "src_width": 1280, "src_height": 720, "width_columns": 3.9, "left_columns": 0, "top_offset": 60 } }, { "type": "videoloop", "data": { "vimeo_id": "875779226", "video_name": "web-cs-drone-3", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/875779226/rendition/720p/file.mp4?loc=external&log_user=0&signature=53a329ad561a67bce9b36342cc036c9bcf6a5676bc66ef8d2a0dd9619e0dbf4f", "src_width": 1280, "src_height": 720, "width_columns": 3.9, "left_columns": 4.1, "top_offset": 60 } }, { "type": "headline", "data": { "title": "Harmonious Score", "body": "Music is a vital part of the Sculpting Harmony experience. Each piece, performed by the Los Angeles Philharmonic at the Walt Disney Concert Hall, enhances the emotional and sensory engagement of the exhibition. As visitors explore the concert hall's intricate details, the accompanying score emphasizes its grandeur.", "top_offset": 60 } }, { "type": "headline", "data": { "title": "Highlighting the Frank Gehry Collection", "body": "Getty's archives hold Frank O. Gehry's extensive collection, spanning 300 projects. From this enormous wealth of material, 171 highlights were chosen for the Index section. These historic materials offer a captivating glimpse into the immense work that went into the design of the Walt Disney Concert Hall.", "top_offset": 60 } }, { "type": "videoloop", "data": { "vimeo_id": "875778995", "video_name": "web-cs-index-cuts", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/875778995/rendition/1080p/file.mp4?loc=external&log_user=0&signature=1d4f1085c8a53d6a15f4a26e0fc5e8dc69ab90eab8a48edd75b201cb4c8f5cf6", "src_width": 1440, "src_height": 1080, "width_columns": 8, "left_columns": 0, "top_offset": 60 } }, { "type": "image", "data": { "src": "img/projects/sculpting-harmony/index-still.jpg", "src_width": 3200, "src_height": 2400, "width_columns": 8, "left_columns": 0, "top_offset": 60 } }, { "type": "videoloop", "data": { "vimeo_id": "875779015", "video_name": "web-cs-index-rec", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/875779015/rendition/720p/file.mp4?loc=external&log_user=0&signature=078255c826c857bab19bd28ed5ecf2365916ed60a6e6603f1f8d44f0284f9ef0", "src_width": 1280, "src_height": 720, "width_columns": 8, "left_columns": 0, "top_offset": 60 } }, { "type": "headline", "data": { "title": "The Final Result", "body": "Sculpting Harmony fuses architectural exploration, intimate conversations with Frank Gehry, and innovative digital design. The result is an exhibition that not only showcases the evolution of the Walt Disney Concert Hall but serves as an invitation for visitors to connect with the spirit of creativity.", "top_offset": 60 } }, { "type": "image", "data": { "src": "img/projects/sculpting-harmony/case-outro.jpg", "src_width": 2480, "src_height": 1492, "width_columns": 8, "left_columns": 0, "top_offset": 60 } }, { "type": "text", "data": { "title": "Credits & Copyright", "body": "Photo by Adam Latham courtesy of LA Phil \n© Frank O. Gehry. Getty Research Institute, Los Angeles (2009.PR.3).\nFrank O. Gehry and Associates; Photo: Joshua White\nFrank O. Gehry and Associates; Photo: Michael Maltzan\nFrank O. Gehry and Associates; Photo: Whit Preston\n© Frank O. Gehry. Getty Research Institute, Los Angeles (2017.M.66).\nPhoto by Mike Kelley / @mpkelley_\nCarlo Allegri/Getty Images Entertainment via Getty Images\nFrank O. Gehry and Associates; Circa Editions\nFrank O. Gehry and Associates; Photo: Brian Yoo\nFrank O. Gehry and Associates; Photo: Tom Bonner\nFrank O. Gehry and Associates; Photo: David Pakshong\nFrank O. Gehry and Associates; Photo: Brian Yoo and David Stein\nFrank O. Gehry and Associates; Video: Peter Byck, Squeak Pictures; Video montage: © Peter Byck\nMusic performed by and provided courtesy of the LA Phil\u2028Wolfgang Amadeus Mozart “Violin Concerto No.5 in a Major, K. 219, “Turkish”: \u2028I. Allegro Aperto - Adagio - Allegro Aperto” Performed by Martin Chalifour, \u2028Los Angeles Philharmonic, Sir Neville Marriner Courtesy of Yarlung Records\n", "top_offset": 60 } } ] }, { "route": "kprverse", "menutitle": "", "enabled": true, "featured": true, "globaltitle": "", "title": "KPR", "description": "KPR is a unique take on Web3 that combines art, community, and storytelling to create a new genre of media and entertainment.", "client": "KPR", "date": "November 2022", "role": "Animation, Creative, Design, Development, Illustration", "platforms": "", "url": "https://kprverse.com/", "poster": "img/projects/kpr/poster.jpg", "poster_m": "img/projects/kpr/poster-m.jpg", "categories": [ "animation", "content", "creative-strategy", "design", "development" ], "awards": [], "items": [ { "type": "videoloop", "data": { "vimeo_id": "", "video_name": "", "vimeo_video_url": "https://media.milanote.com/p/files/1PwWSl1NnOYZcC/73N/keepers_final_case_short.mp4", "src_width": 1240, "src_height": 700, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "headline", "data": { "title": "The Challenge", "body": "The challenge with KPR was to build a living world with a rich story and digital collectibles that allow visitors to be active participants in the narrative. We aimed to connect imagination to reality through layered interactive content and community engagement, establishing KPR's relevance and credibility for enthusiasts and investors alike.", "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "", "video_name": "", "vimeo_video_url": "https://media.milanote.com/p/files/1PwzUP1kMa8PaO/d6E/02.mp4", "src_width": 1240, "src_height": 700, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/kpr/3-mobile-1x.png", "src_width": 1240, "src_height": 640, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "", "video_name": "", "vimeo_video_url": "https://media.milanote.com/p/files/1PwzUz1kMa8PaN/Jq8/04.mp4", "src_width": 1240, "src_height": 700, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/kpr/05-1x.jpg", "src_width": 1240, "src_height": 620, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "", "video_name": "", "vimeo_video_url": "https://media.milanote.com/p/files/1PwzZt1kMa8PaP/xVD/06.mp4", "src_width": 1240, "src_height": 700, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "text", "data": { "title": "Elevating the Creative", "body": "We aimed to catapult KPR's brand identity to the next level with a high-concept, futuristic aesthetic that blended CG elements and storytelling. Our vision was to play with notions of perception and perspective by combining 3D characters and 2D design elements with an interactive layer that revealed a hidden dimension.", "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/kpr/07-1x.png", "src_width": 1080, "src_height": 785, "width_columns": 6, "left_columns": 1, "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "", "video_name": "", "vimeo_video_url": "https://media.milanote.com/p/files/1PwA5g1kMa8PaR/5Vw/09.mp4", "src_width": 1240, "src_height": 700, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "", "video_name": "", "vimeo_video_url": "https://media.milanote.com/p/files/1PwA6o1kMa8PaS/Kbt/10.mp4", "src_width": 1240, "src_height": 700, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "text", "data": { "title": "", "body": "We used interactive tableaux—The Keep, the Factions, and the World—to immerse users in the KPR universe. By seamlessly expanding or contracting dimensions, we give visitors the impression of moving between realities as they scroll through the site. Click-and-hold interactions reveal new layers of content, enhancing the already rich experience.", "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "", "video_name": "", "vimeo_video_url": "https://media.milanote.com/p/files/1PwA8l1kMa8PaT/n7Y/11-01.mp4", "src_width": 1240, "src_height": 700, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "", "video_name": "", "vimeo_video_url": "https://media.milanote.com/p/files/1PwA8l1kMa8PaU/3c7/11-02.mp4", "src_width": 1240, "src_height": 700, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "", "video_name": "", "vimeo_video_url": "https://media.milanote.com/p/files/1PwA8l1kMa8PaV/BBO/11-03.mp4", "src_width": 1240, "src_height": 700, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "", "video_name": "", "vimeo_video_url": "https://media.milanote.com/p/files/1PwA8m1kMa8PaW/E6J/11-04.mp4", "src_width": 1240, "src_height": 700, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "text", "data": { "title": "Motion design", "body": "We blended high-energy animation with elegant movement to create a balanced and captivating motion language. This approach can be seen in the interactive tableaux, dynamic text, hover effects, and micro-interactions.", "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "", "video_name": "", "vimeo_video_url": "https://media.milanote.com/p/files/1PwBEL1wCF9P1H/iy5/12.mp4", "src_width": 1240, "src_height": 700, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "text", "data": { "title": "Multi-Phase Launch", "body": "We planned a multi-phase launch schedule designed to engage the community and build hype for KPR. This helped KPR develop a following as the project moved from site launch to the mint and post-mint phases.", "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/kpr/13-x1.png", "src_width": 1240, "src_height": 328, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "", "video_name": "", "vimeo_video_url": "https://media.milanote.com/p/files/1PwWsN1NnOYZcB/5Na/14.mp4", "src_width": 1240, "src_height": 700, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "headline", "data": { "title": "Results", "body": "KPR made an enormous impact in the Web3 space and beyond, earning numerous awards and accolades. It also proved to be a successful launchpad for the KPR brand and mint. Phase one of the mint ran for 24 hours before opening to the general public in phase two. Within the first minute of phase two, all 10,000 KPR digital collectables were sold out, firmly establishing KPR as a credible and desirable new brand in the Web3 space.", "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/kpr/15-x1.png", "src_width": 1240, "src_height": 942, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/kpr/kpr-x1.png", "src_width": 1240, "src_height": 430, "width_columns": 8, "left_columns": 0, "top_offset": 40 } } ] }, { "route": "adobe-bowie", "menutitle": "", "enabled": true, "featured": true, "globaltitle": "", "title": "Adobe x Bowie", "description": "In this immersive gaming experience, you’ll step inside the birthplace of Ziggy Stardust—David Bowie’s dressing room—and collect treasures for your own alter ego.", "client": "dentsuACHTUNG!, Adobe", "date": "April 2022", "role": "Creative, Design, 3D Product Modelling and Rendering, Development", "platforms": "", "url": "https://www.adobexbowie75.com/", "poster": "img/projects/adobe-bowie/poster-desktop.png", "poster_m": "img/projects/adobe-bowie/poster-mobile.png", "categories": [ "animation", "design", "development" ], "awards": [], "items": [ { "type": "videoloop", "data": { "vimeo_id": "", "video_name": "", "vimeo_video_url": "https://media.milanote.com/p/files/1Oj91T1qTo2b7m/E4l/adobe_bowie_case_study.mp4", "src_width": 3840, "src_height": 2160, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "headline", "data": { "title": "Starmanniversary", "body": "To celebrate David Bowie’s 75th birthday, and 50 years of Ziggy Stardust, Adobe created a toolkit worthy of a Starman. As part of the celebration, Resn recreated his dressing room, the physical anchor point to his creativity and the place where his alter ego Ziggy Stardust was born. Experience Bowie’s creative process and discover some hidden treasures.", "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "", "video_name": "", "vimeo_video_url": "https://media.milanote.com/p/files/1Oh3hm1iFJEr0I/ZFb/adobe_loop_02.mp4", "src_width": 3840, "src_height": 2160, "left_columns": 0, "top_offset": 40 } }, { "type": "text", "data": { "title": "Behind the Curtain", "body": "To bring you into David Bowie’s personal universe, we started with a reference photo of Bowie transforming himself in his dressing room. Vibrant, alive, and intimate, it immediately transports you into the room with Bowie. We wanted to stay as true as possible to the atmosphere of the photo, to give you the feeling that you’re actually stepping back in time to 1972.", "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/adobe-bowie/1-bowie.jpg", "src_width": 1240, "src_height": 690, "left_columns": 2.4, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/adobe-bowie/0-bowie.jpg", "src_width": 1240, "src_height": 690, "left_columns": 0, "top_offset": 40 } }, { "type": "headline", "data": { "title": "Step Into the Picture", "body": "We wanted you to feel like you’re moving around inside a photo. To do this, we used a combination of 3D-modeled assets and 2D images projected onto a simplified mesh. By using this hybrid approach and adjusting the lighting, textures, atmospheric effects and depth of field, we were able to achieve that photographic aesthetic while allowing you to move around in the dressing room.", "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "", "video_name": "", "vimeo_video_url": "https://media.milanote.com/p/files/1NRgt91MSgrK8V/IFS/noninteractive.mp4", "src_width": 2536, "src_height": 1690, "left_columns": 0, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/adobe-bowie/4-bowie.jpg", "src_width": 1240, "src_height": 690, "left_columns": 0, "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "", "video_name": "", "vimeo_video_url": "https://media.milanote.com/p/files/1NRfBw1MSgrK8C/hxP/room360.mp4", "src_width": 880, "src_height": 880, "left_columns": 0, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/adobe-bowie/2-bowie.jpg", "src_width": 1240, "src_height": 690, "left_columns": 2.9, "top_offset": 40 } }, { "type": "headline", "data": { "title": "Hidden Treasures", "body": "The gameplay involves you sneaking into Bowie’s dressing room to find nine objects of significance. Each of the hidden objects can be downloaded as assets into the Adobe environment. Partway through the treasure hunt, we introduce a time limit to put you under pressure. Hurry up and find the remaining treasures before he returns!", "top_offset": 40 } }, { "type": "carousel", "data": { "images": [ { "src": "img/projects/adobe-bowie/gallery/gallery-0.png" }, { "src": "img/projects/adobe-bowie/gallery/gallery-1.png" }, { "src": "img/projects/adobe-bowie/gallery/gallery-2.png" }, { "src": "img/projects/adobe-bowie/gallery/gallery-3.png" }, { "src": "img/projects/adobe-bowie/gallery/gallery-4.png" }, { "src": "img/projects/adobe-bowie/gallery/gallery-5.png" }, { "src": "img/projects/adobe-bowie/gallery/gallery-6.png" }, { "src": "img/projects/adobe-bowie/gallery/gallery-7.png" }, { "src": "img/projects/adobe-bowie/gallery/gallery-8.png" }, { "src": "img/projects/adobe-bowie/gallery/gallery-9.png" } ], "src_width": 1240, "src_height": 690, "left_columns": 0, "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "", "video_name": "", "vimeo_video_url": "https://media.milanote.com/p/files/1Oh3hm1iFJEr0L/U3x/adobe_loop_05.mp4", "src_width": 880, "src_height": 495, "left_columns": 2.4, "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "", "video_name": "", "vimeo_video_url": "https://media.milanote.com/p/files/1Oh3hm1iFJEr0N/aEw/adobe_loop_07.mp4", "src_width": 880, "src_height": 495, "left_columns": 0, "top_offset": 40 } }, { "type": "headline", "data": { "title": "Results", "body": "The end result was an immersive experience that transported users back in time to David Bowie’s dressing room circa 1972. With the Adobe x Bowie toolkit making headlines in online publications around the globe and organic traffic driven by social media, thousands of users flocked to the site. Our players couldn’t get enough of the dressing room atmosphere with the average user replaying the game 6.52 times, proving it was truly an experience worthy of a Starman.", "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/adobe-bowie/5-bowie.png", "src_width": 1240, "src_height": 690, "left_columns": 0, "top_offset": 40 } } ] }, { "route": "just-egg", "menutitle": "", "enabled": true, "featured": true, "globaltitle": "", "title": "JUST Egg", "description": "JUST Egg is delicious eggs made from plants—a healthy, sustainable and ethical alternative to commercially produced chicken eggs. We partnered with Eat Just to produce a website that showcases the remarkable qualities of JUST Egg using a simple, purposeful approach.", "client": "Eat Just", "date": "October 2021", "role": "Creative, Design, 3D Product Modelling and Rendering, Development", "platforms": "", "url": "https://www.ju.st/", "poster": "img/projects/just/desktop/JUST_cover.png", "poster_m": "img/projects/just/mobile/JUST_cover.png", "categories": [ "content", "creative-strategy", "design", "development" ], "awards": [], "items": [ { "type": "videoloop", "data": { "vimeo_id": "480943117", "video_name": "just-01", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/776060913/rendition/720p/file.mp4?loc=external&signature=27240bd086941776a3ac502f826730103f4b187afcdffda2fa6486d26550c556", "video_poster": "img/projects/just/mobile/01_JUST_Fallback.png", "src_width": 1212, "src_height": 720, "width_columns": 8, "left_columns": 0, "top_offset": 20 } }, { "type": "headline", "data": { "title": "The Challenge", "body": "Eat Just is on a mission to change the way we eat and produce food. They created JUST Egg as a better alternative to chicken eggs, challenging the idea that animal-based proteins are superior to those from plants. They needed a way to showcase the remarkable qualities of JUST Egg to change people’s perceptions and convert the curious into customers.", "top_offset": 120 } }, { "type": "videoloop", "data": { "vimeo_id": "480943117", "video_name": "just-02", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/776060880/rendition/720p/file.mp4?loc=external&signature=cc20945f55b85a15a870dbce8027b001e80900969100f7cd0c03542f4c343d5a", "video_poster": "img/projects/just/mobile/02_JUST_Fallback.png", "src_width": 1280, "src_height": 720, "width_columns": 8, "left_columns": 0, "top_offset": 70 } }, { "type": "image", "data": { "src": "img/projects/just/mobile/03_JUST.png", "src_width": 1500, "src_height": 844, "width_columns": 5.6, "left_columns": 2.4, "top_offset": 40, "z_index": 1 } }, { "type": "image", "data": { "src": "img/projects/just/mobile/04_JUST.png", "src_width": 1500, "src_height": 844, "width_columns": 5.6, "left_columns": 0, "top_offset": 40, "z_index": 0 } }, { "type": "headline", "data": { "title": "The Approach", "body": "We understood that the focus should be as much on changing people's perspectives about how our food gets to our plate as it is about providing information about the product. This double-edged approach allowed us to align the aspirational goals of the brand with the commercial needs of the product.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/just/mobile/05_JUST.png", "src_width": 1500, "src_height": 844, "width_columns": 8, "left_columns": 0, "top_offset": 40, "z_index": 1 } }, { "type": "image", "data": { "src": "img/projects/just/mobile/06_JUST.png", "src_width": 1500, "src_height": 844, "width_columns": 8, "left_columns": 0, "top_offset": 90, "z_index": 1 } }, { "type": "videoloop", "data": { "vimeo_id": "480943117", "video_name": "just-07", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/776060843/rendition/720p/file.mp4?loc=external&signature=bc8452998894e4d415270b3c55f49f6c1c2b3663256bbb6182834eac2931e425", "video_poster": "img/projects/just/mobile/07_JUST_Fallback.png", "src_width": 1280, "src_height": 720, "width_columns": 8, "left_columns": 0, "top_offset": 110 } }, { "type": "image", "data": { "src": "img/projects/just/mobile/08_JUST.png", "src_width": 1500, "src_height": 844, "width_columns": 8, "left_columns": 0, "top_offset": 90, "z_index": 1 } }, { "type": "text", "data": { "title": "Layered Content", "body": "Using audience insights, we divided users into two categories: Eat and Learn. ‘Eat’ users seek content that feeds their eyes while ‘Learn’ users seek content that feeds their brain. Instead of surfacing all the info at the same level, we layered it intuitively, letting people dive into what interested them most, such as product range, recipes or environmental info.", "top_offset": 70 } }, { "type": "image", "data": { "src": "img/projects/just/mobile/09_JUST.png", "src_width": 1240, "src_height": 1092, "width_columns": 8, "left_columns": 0, "top_offset": 90, "z_index": 1 } }, { "type": "videoloop", "data": { "vimeo_id": "480943117", "video_name": "just-10", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/776060787/rendition/720p/file.mp4?loc=external&signature=9c152640cf09ed4e4da485720bcf1a7d862c4e644d4549cc5119f3b0e48c172c", "video_poster": "img/projects/just/mobile/10_JUST_Fallback.png", "src_width": 1280, "src_height": 720, "width_columns": 8, "left_columns": 0, "top_offset": 60 } }, { "type": "text", "data": { "title": "Modular CMS", "body": "We developed a modular-based content management system that lets Eat Just manage the content while keeping it looking sharp. Each selectable module has a clean, contemporary design that lets the content shine while the user-friendly CMS interface makes it a breeze to update.", "top_offset": 160 } }, { "type": "image", "data": { "src": "img/projects/just/mobile/11_JUST.png", "src_width": 1242, "src_height": 1110, "width_columns": 8, "left_columns": 0, "top_offset": 40, "z_index": 1 } }, { "type": "videoloop", "data": { "vimeo_id": "480943117", "video_name": "just-12", "vimeo_video_url": "https://player.vimeo.com/progressive_redirect/playback/776060748/rendition/720p/file.mp4?loc=external&signature=b74adec0d0a2290a15829276122c94a094a6fda4058a4291ca0bb2786222be87", "video_poster": "img/projects/just/mobile/12_JUST_Fallback.png", "src_width": 1280, "src_height": 720, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "headline", "data": { "title": "Results", "body": "The carefully-crafted approach and deep level of design thinking gives users an in-depth picture of how JUST Egg fits into a healthy food system, helping them make informed food choices and drive behavioural change towards a healthy food system.", "top_offset": 0 } }, { "type": "image", "data": { "src": "img/projects/just/mobile/13_JUST.png", "src_width": 1500, "src_height": 844, "width_columns": 8, "left_columns": 0, "top_offset": 110, "z_index": 1 } }, { "type": "carousel", "data": { "images": [ {"src": "img/projects/just/mobile/14_JUST.png"}, {"src": "img/projects/just/mobile/15_JUST.png"}, {"src": "img/projects/just/mobile/16_JUST.png"}, {"src": "img/projects/just/mobile/17_JUST.png"} ], "src_width": 1920, "src_height": 1080, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/just/mobile/18_JUST.png", "src_width": 1500, "src_height": 844, "width_columns": 8, "left_columns": 0, "top_offset": 70, "z_index": 1 } } ] }, { "route": "humble-motors", "menutitle": "", "enabled": true, "featured": false, "globaltitle": "", "title": "Humble Motors", "description": "Humble Motors is on a mission to create sustainable mobility by integrating solar technology with electric vehicles. Resn partnered with Humble Motors to build a website that would develop its brand, promote its vision, and showcase its revolutionary technology.", "client": "Humble Motors", "date": "October 2021", "role": "Creative, Design, 3D Product Modelling and Rendering, Development", "platforms": "", "url": "https://www.humblemotors.com/", "poster": "img/projects/humble-motors/poster-desktop.jpg", "poster_m": "img/projects/humble-motors/poster-mobile.jpg", "categories": [ "branding" ], "awards": [], "items": [ { "type": "videoloop", "data": { "vimeo_id": "", "video_name": "", "vimeo_video_url": "https://media.milanote.com/p/files/1OvSYg1k7lJwbR/nYv/humble_desktop_edit.mp4", "src_width": 3024, "src_height": 1700, "width_columns": 8, "left_columns": 0, "top_offset": 60 } }, { "type": "headline", "data": { "title": "The Challenge", "body": "Humble Motors wanted a website that would inspire people to embrace its vision for the future and reserve their Humble One solar electric car. As an emerging brand focused on its technology and product development, Resn’s challenge was to develop Humble’s brand identity, positioning, and content to effectively communicate its vision and inspire users to join it on its journey.", "top_offset": 60 } }, { "type": "image", "data": { "src": "img/projects/humble-motors/mobile/0-humble.png", "src_width": 350, "src_height": 196, "top_offset": 40, "z_index": 1 } }, { "type": "text", "data": { "title": "Developing the Brand", "body": "Our discovery process focused on finding the essence of the Humble Motors brand. The process revealed a company that was serious but unpretentious, focused on sustainability and technology, and emotionally connects with people through a simple human approach. We set out to infuse the website with a sense of personality to match this brand identity which informed everything from the copy and typography to the layout and graphics.", "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/humble-motors/mobile/1-humble.png", "src_width": 350, "src_height": 269, "top_offset": 40, "z_index": 1 } }, { "type": "headline", "data": { "title": "A Day in the Life", "body": "The homepage inspires the audience with Humble’s vision for a future where transportation is powered by sunlight. We used the sunlight concept to tell the story, dividing the narrative into five chapters that correspond to different times of day: dawn, morning, midday, afternoon and dusk. Each chapter showcases a different part of the company’s vision, supported by features of the Humble One.", "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/humble-motors/mobile/2-humble.png", "src_width": 350, "src_height": 370, "top_offset": 40, "z_index": 1 } }, { "type": "image", "data": { "src": "img/projects/humble-motors/mobile/3-humble.png", "src_width": 350, "src_height": 924, "top_offset": 40, "z_index": 1 } }, { "type": "text", "data": { "title": "Nature Meets Technology", "body": "We developed a visual language that plays with the contrasts between light and shadow; nature and technology. Conceptually, the visuals represent the solar cycle, new beginnings, and untapped potential. These concepts underpin the idea that the Humble One works in harmony with nature.", "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/humble-motors/mobile/4-humble.png", "src_width": 350, "src_height": 376, "top_offset": 40, "z_index": 1 } }, { "type": "image", "data": { "src": "img/projects/humble-motors/mobile/5-humble.png", "src_width": 350, "src_height": 196, "top_offset": 40, "z_index": 1 } }, { "type": "image", "data": { "src": "img/projects/humble-motors/mobile/6-humble.png", "src_width": 350, "src_height": 196, "top_offset": 40, "z_index": 1 } }, { "type": "headline", "data": { "title": "A Humble Journey", "body": "“Our Journey” is an open and honest overview of Humble Motors’ history. The purpose was to provide insight into the real human endeavour at the heart of the company. The section includes personal details and messages from Humble’s founder and CEO, Dima Steesy. Key dates and milestones, company insights, concept sketches, and technological developments fill in the details of Humble Motors’ journey towards a consumer-ready Humble One.", "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/humble-motors/mobile/7-humble.png", "src_width": 350, "src_height": 196, "top_offset": 40, "z_index": 1 } }, { "type": "image", "data": { "src": "img/projects/humble-motors/mobile/8-humble.png", "src_width": 350, "src_height": 358, "top_offset": 40, "z_index": 1 } }, { "type": "image", "data": { "src": "img/projects/humble-motors/mobile/9-humble.png", "src_width": 350, "src_height": 349, "top_offset": 40, "z_index": 1 } }, { "type": "text", "data": { "title": "Investing in the Future", "body": "Users who feel inspired by the company’s mission can reserve their own Humble One SUV. We made reserving a Humble One as painless as possible. With a simple two-step process, users can invest in their own future as well as the future of sustainable transportation.", "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/humble-motors/mobile/10-humble.png", "src_width": 350, "src_height": 270, "top_offset": 40, "z_index": 1 } }, { "type": "carousel", "data": { "images": [ { "src": "img/projects/humble-motors/gallery/gallery-1.jpg" }, { "src": "img/projects/humble-motors/gallery/gallery-2.jpg" }, { "src": "img/projects/humble-motors/gallery/gallery-3.jpg" }, { "src": "img/projects/humble-motors/gallery/gallery-4.jpg" }, { "src": "img/projects/humble-motors/gallery/gallery-5.jpg" }, { "src": "img/projects/humble-motors/gallery/gallery-6.jpg" }, { "src": "img/projects/humble-motors/gallery/gallery-7.jpg" }, { "src": "img/projects/humble-motors/gallery/gallery-8.jpg" } ], "src_width": 1240, "src_height": 690, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "headline", "data": { "title": "Results", "body": "The result was beautiful to look at, easy to navigate and focused on the message of sustainability through technology. The elegant design lets the content shine, connecting with people emotionally and inspiring them to embrace Humble's vision for solar electric transport.", "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/humble-motors/mobile/12-humble.png", "src_width": 350, "src_height": 196, "top_offset": 40, "z_index": 1 } } ] }, { "route": "lucid-air-launch", "menutitle": "", "enabled": true, "featured": true, "globaltitle": "", "title": "Dream Ahead - Lucid Air Launch", "description": "Luxury electric car company Lucid Motors aims to inspire the adoption of sustainable transportation by creating captivating electric vehicles centred around the human experience. When COVID-19 disrupted the launch of its revolutionary first vehicle, the Lucid Air, Lucid Motors turned to Resn to create an online launch solution that would fit with its human-centred ethos and capture the public’s imagination. The launch combined live streaming and pre-recorded video, audience interaction, and personalized story elements into one seamless experience.", "client": "Lucid Motors", "date": "September 2020", "role": "UX, Creative, Content Creation, Design & Development", "platforms": "", "url": "", "poster": "img/projects/lucid/LUCID-POSTER-DESKTOP.jpg", "poster_m": "img/projects/lucid/LUCID-POSTER-MOBILE.jpg", "categories": [ "activation", "creative-strategy", "design", "development" ], "awards": [], "items": [ { "type": "videoloop", "data": { "vimeo_id": "531475760", "video_name": "01 lucid", "vimeo_video_url": "https://player.vimeo.com/external/531475760.sd.mp4?s=334b9abf19c085c948cf3d1858a6247e37d69094&profile_id=165", "src_width": 894, "src_height": 540, "top_offset": 60 } }, { "type": "headline", "data": { "title": "The Challenge", "body": "Concerns around COVID-19 led Lucid Motors to rethink its planned in-person launch of the Lucid Air. Lucid approached Resn’s for a digital solution that would build excitement for the launch and deliver an exceptional experience for attendees. The objective was to attract a worldwide audience while maintaining the sense that attendees were getting an exclusive look at the Air.", "top_offset": 60 } }, { "type": "videoloop", "data": { "vimeo_id": "531475888", "video_name": "02 lucid", "vimeo_video_url": "https://player.vimeo.com/external/531475888.hd.mp4?s=686e3ea6244a74efcd4028fe16ab069a8eb5ca83&profile_id=169", "src_width": 1920, "src_height": 1080, "top_offset": 50, "z_index": 1 } }, { "type": "headline", "data": { "title": "The Insight", "body": "Resn envisioned a live online event that was as revolutionary as the Lucid Air itself. Using our product launch platform, Toast, we developed a launch concept around the idea of personalization. Our approach focused on tailoring each user’s experience to their interests, allowing us to deliver an event that was personalized and exclusive without having to limit attendance.", "top_offset": 60 } }, { "type": "videoloop", "data": { "vimeo_id": "531476124", "video_name": "03 lucid", "vimeo_video_url": "https://player.vimeo.com/external/531476124.hd.mp4?s=1ac113c86fa7bdf8a978091744c14cff67a0de0b&profile_id=169", "src_width": 1920, "src_height": 1080, "top_offset": 50, "z_index": 1 } }, { "type": "headline", "data": { "title": "Toast Dynamic Timeline", "body": "To host the Lucid Air launch, we built the Dream Ahead website. Dream Ahead featured a dynamic timeline that automatically changed to different states for the pre-launch, launch, and post-launch phases.", "top_offset": 60 } }, { "type": "image", "data": { "src": "img/projects/lucid/4-lucid.png", "src_width": 1240, "src_height": 689, "top_offset": 50, "z_index": 1 } }, { "type": "text", "data": { "title": "Phase One: Pre-Launch", "body": "Weeks in advance of the unveiling, Lucid Motors invited the public to RSVP for the Air launch. In this phase, the site featured a countdown to launch and gave users the ability to register for their personalized Toast event. During registration, users were asked which features of the Lucid Air most appealed to their Hearts and Minds and their answers were used to compile a custom video playlist.", "top_offset": 60 } }, { "type": "image", "data": { "src": "img/projects/lucid/5-lucid.png", "src_width": 1240, "src_height": 689, "top_offset": 50, "z_index": 1 } }, { "type": "image", "data": { "src": "img/projects/lucid/01.png", "src_width": 757, "src_height": 1316, "top_offset": 50, "z_index": 1 } }, { "type": "text", "data": { "title": "Phase Two: Launch", "body": "On launch day, guests were emailed a link to their personalized event which kicked off with a pre-recorded brand film introducing the Air. While the film played, users could submit questions, some of which were answered during a live Q&A by the Lucid Motors team. To finish, pre-registered guests could view their custom video playlist made with the story elements they had chosen.", "top_offset": 60 } }, { "type": "videoloop", "data": { "vimeo_id": "531477099", "video_name": "04 lucid", "vimeo_video_url": "https://player.vimeo.com/external/531477099.hd.mp4?s=586a0bc796429b34f89bd91584fdf632befa8a10&profile_id=169", "src_width": 1920, "src_height": 1080, "top_offset": 50, "z_index": 1 } }, { "type": "videoloop", "data": { "vimeo_id": "531478283", "video_name": "05 lucid", "vimeo_video_url": "https://player.vimeo.com/external/531478283.hd.mp4?s=8ca1c1c17231e1ab51c0690b97a321706a4faf59&profile_id=175", "src_width": 1920, "src_height": 1080, "top_offset": 50, "z_index": 2 } }, { "type": "image", "data": { "src": "img/projects/lucid/14-lucid.jpg", "src_width": 800, "src_height": 449, "top_offset": 50, "z_index": 1 } }, { "type": "text", "data": { "title": "Phase Three: Post Launch", "body": "Following the Lucid Air Toast launch, Dream Ahead transformed to the post-launch phase. In this phase, the entire event and bonus content is rewatchable in its entirety. A CTA to “Design Your Lucid Air” takes you to the Lucid Motors website, where you can configure your own Lucid Air.", "top_offset": 60 } }, { "type": "videoloop", "data": { "vimeo_id": "531478283", "video_name": "07 lucid", "vimeo_video_url": "https://player.vimeo.com/external/531478762.hd.mp4?s=e9da372cfff4eabc6347928419de26c705399cc7&profile_id=169", "src_width": 1920, "src_height": 1080, "top_offset": 60, "z_index": 2 } }, { "type": "image", "data": { "src": "img/projects/lucid/18-lucid.jpg", "src_width": 880, "src_height": 494, "top_offset": 50, "z_index": 1 } }, { "type": "image", "data": { "src": "img/projects/lucid/02.png", "src_width": 757, "src_height": 640, "top_offset": 50, "z_index": 1 } }, { "type": "headline", "data": { "title": "Global Reach", "body": "With thousands of users pre-registering and tuning in to watch the live event, the Air launch received global attention, making headlines around the world. The Lucid Air Toast launch was the second-biggest car launch of the year—an extraordinary feat for a company releasing its first product.

Toast experiences are fully customizable and can combine live-streamed, pre-recorded, and personalized elements. Discover more about Toast here.", "top_offset": 60 } }, { "type": "videoloop", "data": { "vimeo_id": "531478494", "video_name": "06 lucid", "vimeo_video_url": "https://player.vimeo.com/external/531478494.hd.mp4?s=2389272279b5ba681c62246e3e377d1d46f0d958&profile_id=169", "src_width": 1920, "src_height": 1080, "top_offset": 50, "z_index": 1 } } ] }, { "route": "the-house-of-maserati", "menutitle": "", "enabled": false, "featured": false, "globaltitle": "", "title": "The House of Maserati", "description": "For the audacious Maserati brand revamp and 3 new luxury vehicle launches we brought together films, interactive video, multiple 3D car explorations, Q&A from experts, live comments and post event experiences for a truly global audience.", "client": "Maserati", "date": "July - September 2020", "role": "UX, Creative, Content Creation, Design & Development", "platforms": "", "url": "http://houseof.maserati.com/", "poster": "img/projects/maserati/resn-maserati-poster.jpg", "poster_m": "img/projects/maserati/mobile/resn-maserati-poster-m.jpg", "categories": [ ], "awards": [], "items": [ { "type": "headline", "data": { "title": "The Challenge", "body": "After the successful debut of Toast, Resn’s online product launch platform, Maserati approached Resn to reimagine the traditional car launch for a connected global audience. The ambitious schedule consisted of three back-to-back live launches over three months: the Ghibli Hybrid in July, the Trofeo Collection in August, and Maserati Day in September. In tandem with the launches, Resn contributed to a refresh of Maserati’s visual identity and brand voice.", "top_offset": 0 } }, { "type": "videoloop", "data": { "vimeo_id": "466121368", "video_name": "resn-maserati-challenge", "vimeo_video_url": "https://player.vimeo.com/external/466121368.hd.mp4?s=5ba02ed8b183e74483449e323053e8da11b833c1&profile_id=175", "src_width": 1920, "src_height": 1080, "top_offset": 40, "z_index": 1 } }, { "type": "headline", "data": { "title": "The House of Maserati Platform", "body": "We created the fully-bespoke House of Maserati platform to serve as the destination for all three live Maserati Toast events. The site featured a hub to navigate between events, a countdown timer, and different content states before, during, and after the events. Each event followed a different format and showcased high-end interactive 3D assets, video streaming, Q&A, live user chat and reactions.", "top_offset": 60 } }, { "type": "videoloop", "data": { "vimeo_id": "466144503", "video_name": "resn-maserati-hub", "vimeo_video_url": "https://player.vimeo.com/external/466144503.hd.mp4?s=c995a40c9607d07b77811fa0a13c002025f69385&profile_id=175", "src_width": 1920, "src_height": 1080, "top_offset": 40 } }, { "type": "text", "data": { "title": "CUSTOM GUEST INVITATIONS", "body": "We created unique user-flows for each category of guest invitations, including customers, dealers, press, VIPs and general audience members. Each type of invitation welcomed guests differently. Press guests could unlock a “Press Section” which included a large quantity of additional downloadable content.", "top_offset": 50 } }, { "type": "image", "data": { "src": "img/projects/maserati/mobile/resn-maserati-welcome.jpg", "src_width": 1400, "src_height": 788, "top_offset": 50, "z_index": 1 } }, { "type": "videoloop", "data": { "vimeo_id": "466150221", "video_name": "resn-maserati-intro", "vimeo_video_url": "https://player.vimeo.com/external/466150221.hd.mp4?s=7dec8f6f6949116f58b576738f417c63c59eb055&profile_id=175", "src_width": 1920, "src_height": 1080, "top_offset": 50 } }, { "type": "headline", "data": { "title": "Event 1 — Ghibli Hybrid", "body": "For the inaugural Maserati Toast event, we launched the 2021 Ghibli Hybrid, Maserati's first hybrid and electrified vehicle. We played off of the digital aesthetic by placing a 3D version of the Ghibli Hybrid inside a 3D LED cube, utilising the walls for video content and engaging video graphics.", "top_offset": 60 } }, { "type": "videoloop", "data": { "vimeo_id": "466147361", "video_name": "resn-maserati-hybrid-reveal", "vimeo_video_url": "https://player.vimeo.com/external/466147361.hd.mp4?s=430e096154d3a452472ae302a126c24c2fd41a43&profile_id=175", "src_width": 1920, "src_height": 1080, "top_offset": 40 } }, { "type": "text", "data": { "title": "EVENT HOSTED BY MASERATI SPECIALISTS", "body": "The launch was hosted by motor journalist Mr JWW and supported by a panel of three Maserati specialists who explained product, design and connectivity updates. Throughout the launch, online guests could post live comments and submit questions to the Maserati team. The event concluded with a comprehensive Q&A with the three Maserati specialists.", "top_offset": 50 } }, { "type": "carousel", "data": { "images": [ { "src": "img/projects/maserati/mobile/resn-maserati-hybrid-gallery-1.jpg" }, { "src": "img/projects/maserati/mobile/resn-maserati-hybrid-gallery-2.jpg" } ], "src_width": 1400, "src_height": 788, "top_offset": 50 } }, { "type": "image", "data": { "src": "img/projects/maserati/mobile/resn-maserati-hybrid-speaker.jpg", "src_width": 1400, "src_height": 788, "top_offset": 50 } }, { "type": "image", "data": { "src": "img/projects/maserati/mobile/resn-maserati-postevent.jpg", "src_width": 1400, "src_height": 788, "top_offset": 50 } }, { "type": "headline", "data": { "title": "Event 2 — Trofeo Collection", "body": "The second Maserati Toast event unveiled the three vehicles of the Trofeo Collection. The event featured a fully-interactive video, available on both desktop and mobile. Guests could interact during the video to dive deeper into content, which included additional shots of the cars, speed graphics, statistics, and alternative camera angles.", "top_offset": 60 } }, { "type": "videoloop", "data": { "vimeo_id": "466155849", "video_name": "resn-trofeo-hub", "vimeo_video_url": "https://player.vimeo.com/external/466155849.hd.mp4?s=051583d938f2ca86ecabf1df1d8062abfc9a98b4&profile_id=175", "src_width": 1920, "src_height": 1080, "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "466158780", "video_name": "resn-maserati-trofeo-car", "vimeo_video_url": "https://player.vimeo.com/external/466158780.hd.mp4?s=5e2a1d28ae6c80a8e85ccd52341b9e8598c46335&profile_id=175", "src_width": 1920, "src_height": 1080, "width_columns": 8, "left_columns": 0, "top_offset": 50 } }, { "type": "text", "data": { "title": "EVENT HOSTED BY SUPERCAR BLONDIE", "body": "Hosted by YouTube personality Supercar Blondie, The Trofeo event concluded with a conversation-style interview with Maserati experts, like professional race car driver Andrea Bertolini, and featured footage of the Trofeo collection in action on the race track.", "top_offset": 50 } }, { "type": "videoloop", "data": { "vimeo_id": "466159433", "video_name": "resn-maserati-trofeo-intro", "vimeo_video_url": "https://player.vimeo.com/external/466159433.hd.mp4?s=41c51f4e9ba79c9f5465f375240ef7a6443e55e2&profile_id=174", "src_width": 1920, "src_height": 1080, "top_offset": 50 } }, { "type": "image", "data": { "src": "img/projects/maserati/mobile/resn-maserati-trofeo-speaker.jpg", "src_width": 1400, "src_height": 788, "top_offset": 50 } }, { "type": "carousel", "data": { "images": [ { "src": "img/projects/maserati/mobile/resn-maserati-trofeo-gallery-1.jpg" }, { "src": "img/projects/maserati/mobile/resn-maserati-trofeo-gallery-2.jpg" }, { "src": "img/projects/maserati/mobile/resn-maserati-trofeo-gallery-3.jpg" } ], "src_width": 1400, "src_height": 788, "top_offset": 50 } }, { "type": "headline", "data": { "title": "Event 3 — Maserati Day", "body": "The grand finale took place on Maserati Day, a day of celebration for the company. The spectacular physical event, called MMXX, was live-streamed direct from Modena, Italy, on the House of Maserati website. Guests joined from around the world to witness the launch of the MC20 supercar, brand films, and a speech by Maserati's CEO, outlining a new direction for the company.", "top_offset": 60 } }, { "type": "image", "data": { "src": "img/projects/maserati/mobile/resn-maserati-mmxx-hub.jpg", "src_width": 1400, "src_height": 788, "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "470591525", "video_name": "resn-maserati-mmxx-event-short", "vimeo_video_url": "https://player.vimeo.com/external/470591525.hd.mp4?s=8c586b0f2f530992843547c1cc82d67af4dbfa7e&profile_id=175", "src_width": 1920, "src_height": 1080, "top_offset": 50 } }, { "type": "text", "data": { "title": "UNLOCKABLE CONTENT", "body": "To engage our guests, they unlocked exclusive content throughout the live stream, with the ability to download and share at the end.", "top_offset": 50 } }, { "type": "videoloop", "data": { "vimeo_id": "466161627", "video_name": "resn-maserati-mmxx-content", "vimeo_video_url": "https://player.vimeo.com/external/466161627.hd.mp4?s=c216efe6fac6d3f8658a503c7b7bdd70563b6fe8&profile_id=169", "src_width": 1920, "src_height": 1080, "top_offset": 50 } }, { "type": "headline", "data": { "title": "Post Event Experiences", "body": "All three events lead guests into a post-event experience after the conclusion of the live launch. Here, guests could explore high-end WebGL cars, deeper product information, car features, galleries, films and rewatch the recorded live events. All post-event experiences included full 3D WebGL environments and animated car sequences. Clickable hotspots on cars allowed guests to re-explore the car features from the live event at their own pace.", "top_offset": 60 } }, { "type": "videoloop", "data": { "vimeo_id": "466165345", "video_name": "resn-maserati-postevent-menu", "vimeo_video_url": "https://player.vimeo.com/external/466165345.hd.mp4?s=019230b9804a8874cec915c4c905a96c25b5e2b4&profile_id=175", "src_width": 1920, "src_height": 1080, "width_columns": 8, "left_columns": 0, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/maserati/mobile/resn-maserati-postevent-speed.jpg", "src_width": 1400, "src_height": 788, "width_columns": 5, "left_columns": 0, "top_offset": 50 } }, { "type": "image", "data": { "src": "img/projects/maserati/mobile/resn-maserati-hybrid-postevent.jpg", "src_width": 1400, "src_height": 788, "width_columns": 5, "left_columns": 3, "top_offset": 50 } }, { "type": "videoloop", "data": { "vimeo_id": "466166795 ", "video_name": "resn-maserati-postevent-menu", "vimeo_video_url": "https://player.vimeo.com/external/466166795.hd.mp4?s=30378d48a10cd64f4b2357dc7c4bf541798b2d26&profile_id=175", "src_width": 1920, "src_height": 1080, "width_columns": 8, "left_columns": 0, "top_offset": 50 } }, { "type": "headline", "data": { "title": "Helping Refresh Maserati’s Identity", "body": "Parallel to the Toast events, Maserati was starting a new chapter in its branding and voice. Resn worked closely with Maserati to help forge this new non-traditional look for the events and pave the way for a modernised, boundary-pushing style. We played with 3D, abstraction, colour and graphical treatments to push the look into new areas.", "top_offset": 60 } }, { "type": "carousel", "data": { "images": [ { "src": "img/projects/maserati/mobile/resn-maserati-contentcreation-1.jpg" }, { "src": "img/projects/maserati/mobile/resn-maserati-contentcreation-2.jpg" }, { "src": "img/projects/maserati/mobile/resn-maserati-contentcreation-3.jpg" } ], "src_width": 1400, "src_height": 788, "top_offset": 40 } }, { "type": "headline", "data": { "title": "Results", "body": "The events were a huge success for Maserati, with events attracting over 80K live visitors from around the globe and massive press interest. Post-launch versions of each Maserati Toast event can be seen now on the award-winning website.", "top_offset": 60 } }, { "type": "videoloop", "data": { "vimeo_id": "466167838", "video_name": "resn-maserati-postevent-mmxx", "vimeo_video_url": "https://player.vimeo.com/external/466167838.hd.mp4?s=254cfd9b7f54790716492f82b98df9ebd3e4ae41&profile_id=169", "src_width": 1920, "src_height": 1080, "top_offset": 50 } }, { "type": "text", "data": { "title": "GHIBLI HYBRID CREDITS", "body": "Ultra Brand Studio (Brand Film / Product Photography)", "top_offset": 50 } }, { "type": "text", "data": { "title": "TROFEO COLLECTION CREDITS", "body": "Callen (Brand Film / Product Photography)", "top_offset": 20 } }, { "type": "text", "data": { "title": "MMXX / Maserati Day CREDITS", "body": "SourSop (Brand Film / Product Photography)", "top_offset": 20 } } ] }, { "route": "brandcast-delivered", "menutitle": "", "enabled": true, "featured": true, "globaltitle": "", "title": "Brandcast Delivered", "description": "Since 2012, YouTube has hosted Brandcast, a spectacular live marketing event during Newfronts aimed at brands and advertisers. In 2020, Brandcast needed a socially-distanced makeover and Resn provided the perfect solution with its dynamic video-creation platform, Cake. The result was Brandcast Delivered, a personalized, creator-hosted video experience like no other.", "client": "YouTube, Google", "date": "June 2020", "role": "Cake - Dynamic Video Platform, Creative and Production Partner, Development, Design, Project Management", "platforms": "", "url": "", "poster": "img/projects/brandcast/Brandcast_Thumbnail_Desktop.png", "poster_m": "img/projects/brandcast/Brandcast_Thumbnail_Mobile.png", "categories": [ "activation", "creative-strategy", "design", "development" ], "awards": [], "items": [ { "type": "videoloop", "data": { "vimeo_id": "477813064", "video_name": "1_Brandcast_Video_Homepage.mp4", "vimeo_video_url": "https://player.vimeo.com/external/477813064.hd.mp4?s=a8a1ec2921efa256b0da8df3d58d351c89f300d4&profile_id=169", "src_width": 1826, "src_height": 1080, "top_offset": 40, "z_index": 1 } }, { "type": "headline", "data": { "title": "Personalized, with Pizza", "body": "When COVID-19 hit, YouTube needed to reimagine Brandcast for the age of quarantine. They envisioned a watch-from-home Brandcast video, delivered with pizza, where invitees could personalize their Brandcast story as easily as their pizza toppings. To turn the innovative concept into a reality, YouTube came to Resn and its dynamic video-creation platform, Cake.", "top_offset": 0 } }, { "type": "videoloop", "data": { "vimeo_id": "477813068", "video_name": "2_Brandcast_Video_Name", "vimeo_video_url": "https://player.vimeo.com/external/477813068.hd.mp4?s=81a55b91e42c62f641255c34a246386cede9889f&profile_id=169", "src_width": 1826, "src_height": 1080, "top_offset": 40, "z_index": 1 } }, { "type": "headline", "data": { "title": "Baked with Cake", "body": "Cake is a powerful, flexible, and scalable way to take user inputs and UGC and quickly generate unique, personalized videos. Cake creates and composites custom 2D and 3D assets into shots and stitches the shots together based on user choices. Cake automates all of the logic and scalability of the video-creation process, enabling Resn and YouTube to reach thousands of Brandcast guests with their own personalized film.", "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "477813120", "video_name": "3_Brandcast_Video_Topics.mp4", "vimeo_video_url": "https://player.vimeo.com/external/477813120.hd.mp4?s=d78aafe56b29be62b1d07622b769f504bf451625&profile_id=169", "src_width": 1832, "src_height": 1080, "top_offset": 40 } }, { "type": "text", "data": { "title": "Choose-Your-Own Video", "body": "Brandcast Delivered began with invitations for guests to visit a private link. Here, invitees could enter their names and select both pizza and video options from an à la carte menu. Video options included five content categories, including Food & Recipes and Sports, four YouTube creator hosts, such as Gordon Ramsay and Lilly Singh, and three musical tracks, from Tones And I, Dua Lipa, and Lizzo.", "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/brandcast/4_Brandcast_Visual_Trend.png", "src_width": 1388, "src_height": 781, "top_offset": 40, "z_index": 1 } }, { "type": "image", "data": { "src": "img/projects/brandcast/5_Brandcast_Visual_Pizza.png", "src_width": 1388, "src_height": 781, "top_offset": 40, "z_index": 1 } }, { "type": "text", "data": { "title": "Personalization ", "body": "Cake generated a unique, personalized video for each Brandcast Delivered invitee. The videos were made up of 111 unique segments with sixty possible combinations. Invitees’ names were rendered into key moments of their video, appearing on title cards, a coffee cup, and even on a banner towed by a plane.", "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "477813121", "video_name": "6_Brandcast_Video_Loading", "vimeo_video_url": "https://player.vimeo.com/external/477813121.hd.mp4?s=d5f1928cefc3b5b73954ea7e52eb3a6561d4eb8a&profile_id=169", "src_width": 1832, "src_height": 1080, "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "477813141", "video_name": "7_Brandcast_Video_Ready", "vimeo_video_url": "https://player.vimeo.com/external/477813141.hd.mp4?s=3ade96268e7c1cc3e159730901c339424425be34&profile_id=175", "src_width": 1826, "src_height": 1080, "top_offset": 40 } }, { "type": "headline", "data": { "title": "Final Delivery", "body": "With their pizzas in hand, invitees tuned in to watch their personalized Brandcast Delivered videos by the thousands. The massive response and engagement from attendees marked a successful pivot for YouTube from live stage show to a shelter-at-home event, enabling Brandcast to reach a bigger audience of marketers and agencies than ever before.", "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "477813210", "video_name": "8_Brandcast_Video_Selection.mp4", "vimeo_video_url": "https://player.vimeo.com/external/477813210.hd.mp4?s=409e76a034d6c7b283ae4d29b9be52b93403a25d&profile_id=169", "src_width": 1826, "src_height": 1080, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/brandcast/9_Brandcast_Visual_Attributes.png", "src_width": 1388, "src_height": 781, "top_offset": 40, "z_index": 1 } }, { "type": "image", "data": { "src": "img/projects/brandcast/10_Brandcast_Visual_Joe.png", "src_width": 1384, "src_height": 813, "top_offset": 40, "z_index": 2 } } ] }, { "route": "making-maisel-marvelous", "menutitle": "", "enabled": true, "featured": true, "globaltitle": "", "title": "Making Maisel Marvelous", "description": "Take a journey from sketch to screen with a behind-the-scenes look at the Amazon Original Series, The Marvelous Mrs. Maisel. Explore the costumes, production design, writing, and directing and discover what goes into making Maisel marvelous.", "client": "Amazon", "date": "August 2020", "role": "Creative, Design & Development", "platforms": "", "url": "", "poster": "img/projects/maisel/MakingMaiselMarvelous-poster.png", "poster_m": "img/projects/maisel/mobile/MakingMaiselMarvelous-poster_mobile.png", "categories": [ "animation", "creative-strategy", "design", "development" ], "awards": [], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "451193277", "video_name": "maisel-hero", "vimeo_video_url": "https://player.vimeo.com/external/480943117.hd.mp4?s=8ffa6889f39af62f676c1b77a040ea9949a120b3&profile_id=174", "video_poster": "img/projects/maisel/maisel-cover.jpg", "src_width": 1280, "src_height": 720, "width_columns": 8, "left_columns": 0, "top_offset": 0 } }, { "type": "headline", "data": { "title": "The Challenge", "body": "Amazon Originals wanted to celebrate the latest season of their hit show by showcasing the creative and production process. Our challenge was to take a vast treasure trove of assorted Maisel production assets, including concept sketches, technical drawings, and behind-the-scenes photography, and integrate them into one seamless and extraordinary experience.", "top_offset": 60 } }, { "type": "headline", "data": { "title": "The Solution", "body": "We created a continuous interactive journey that combined all the creative elements of the production process and tied it together with the show’s snappy humor. The first three chapters are explorable as a single journey or as individual experiences. A bonus chapter lets you discover more \"Facts and Insights\" by taking a deeper dive into selected aspects of the show through voice recordings, write-ups, and behind-the-scenes videos.", "top_offset": 60 } }, { "type": "videoloop", "data": { "vimeo_id": "415825157", "video_name": "maisel-video-01", "vimeo_video_url": "https://player.vimeo.com/external/460993011.hd.mp4?s=db84f241f6020bce82c867eac99fea180b0a9d68&profile_id=174", "src_width": 1280, "src_height": 720, "top_offset": 60 } }, { "type": "image", "data": { "src": "img/projects/maisel/mobile/Costume_Design_Mobile.png", "src_width": 850, "src_height": 800, "top_offset": 60 } }, { "type": "image", "data": { "src": "img/projects/maisel/mobile/Onset_Photography_Mobile.png", "src_width": 850, "src_height": 785, "top_offset": 60 } }, { "type": "image", "data": { "src": "img/projects/maisel/mobile/mobile_images_mobile.png", "src_width": 850, "src_height": 942, "top_offset": 60 } }, { "type": "headline", "data": { "title": "From 2D to 3D", "body": "We took 2D images and projected them on to planes suspended within an immersive 3D environment. We layered the graphics and photographs within each chapter in interesting ways to keep the experience ever-changing and surprising. The experience showcased previously unreleased content from the show, giving fans new insight and appreciation of the work that went into the series.", "top_offset": 30 } }, { "type": "image", "data": { "src": "img/projects/maisel/mobile/Set_Design_mobile.png", "src_width": 850, "src_height": 717, "top_offset": 30 } }, { "type": "videoloop", "data": { "vimeo_id": "415825157", "video_name": "maisel-video-04", "vimeo_video_url": "https://player.vimeo.com/external/460994737.hd.mp4?s=b8a9ac9dc34b19c8f3e463987044ffa424d7d4a6&profile_id=174", "src_width": 1280, "src_height": 720, "top_offset": 30 } }, { "type": "image", "data": { "src": "img/projects/maisel/SetDesign_Site.jpg", "src_width": 2280, "src_height": 1277, "top_offset": 30 } }, { "type": "videoloop", "data": { "vimeo_id": "415825157", "video_name": "maisel-video-05", "vimeo_video_url": "https://player.vimeo.com/external/460995572.hd.mp4?s=cc2a6ea299d6813919f3deb331db8e8d96fa3c64&profile_id=174", "src_width": 1280, "src_height": 720, "top_offset": 30 } }, { "type": "headline", "data": { "title": "Technical Approach", "top_offset": 60 } }, { "type": "text", "data": { "title": "Choreographed Camera Path", "body": "The distinctive rhythm of the camera choreography is an important element of The Marvelous Mrs. Maisel, and something we wanted to replicate in our experience. To do this, we needed a custom solution allowing for quick preview and flexibility.", "top_offset": 30 } }, { "type": "text", "data": { "title": "", "body": "Our method let us control how the camera moved using two independent paths. The first controlled the camera's position in space and the second controlled where it was looking. We also gave users some control over the camera with their mouse. This approach gave the camera a smooth and natural motion, reminiscent of the camera work on the show. It also let us quickly fine-tune the camera movement by making small adjustments to the paths.", "top_offset": 30 } }, { "type": "image", "data": { "src": "img/projects/maisel/mobile/Techinical_mobile.png", "src_width": 849, "src_height": 655, "top_offset": 60 } }, { "type": "videoloop", "data": { "vimeo_id": "480943771", "video_name": "maisel-camera", "vimeo_video_url": "https://player.vimeo.com/external/480943771.hd.mp4?s=f782ae81d26959fb3ded6f061666302a6ec96e57&profile_id=175", "src_width": 1280, "src_height": 720, "top_offset": 30 } }, { "type": "text", "data": { "title": "Masking the Scenes", "body": "Each chapter featured multiple interconnected scenes that required seamless transitions. Our approach had to be compatible with the story, deliver high performance, and handle a lot of assets.", "top_offset": 60 } }, { "type": "text", "data": { "title": "", "body": "Our solution used multiple techniques, including depth buffers, box containers, and 3D masking, to keep scenes separate and to orchestrate which assets needed rendering. By excluding the vast majority of assets at any one time, we cleanly separated the scenes and achieved high performance.", "top_offset": 30 } }, { "type": "videoloop", "data": { "vimeo_id": "480943286", "video_name": "maisel-masking", "vimeo_video_url": "https://player.vimeo.com/external/480943286.hd.mp4?s=0ef6f24c2dae39e7fc8a83ad89376411d0d64a3d&profile_id=175", "src_width": 1280, "src_height": 720, "top_offset": 60 } }, { "type": "text", "data": { "title": "Paper Effect", "body": "Animated sheets of paper, featuring images such as concept drawings, watercolors, and pages of script, feature prominently across the experience. To add visual interest, we wanted each piece of paper to have its own unique movement. To achieve this, we created a reusable component that allowed us to animate each piece of paper individually. The subtle differences in motion made the sheets feel like a natural component of the environment.", "top_offset": 60 } }, { "type": "videoloop", "data": { "vimeo_id": "480943395", "video_name": "maisel-paper-effect", "vimeo_video_url": "https://player.vimeo.com/external/480943395.hd.mp4?s=d822352691685a2961fa26df367d6e77fc66c05f&profile_id=169", "src_width": 1280, "src_height": 720, "top_offset": 60 } } ] }, { "route": "vanmoof", "menutitle": "", "enabled": true, "featured": true, "globaltitle": "", "title": "VanMoof Online Live Launch Event", "description": "Redefining the concept of a product launch event, we created a digital platform seamlessly combining live streaming, films, interactive 3D and live Q&A to launch the new VanMoof e-bikes to thousands online.", "client": "VanMoof", "date": "April 2020", "role": "Concept, Creative, Design, Development, 3D, Animation, Sound Design", "platforms": "", "url": "https://live.vanmoof.com/", "poster": "img/projects/vanmoof/vanmoof-poster.jpg", "poster_m": "img/projects/vanmoof/mobile/vanmoof-poster-m.jpg", "categories": [ "activation", "creative-strategy", "design", "development" ], "awards": [], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "415106966", "video_name": "vanmoof-case-film", "vimeo_video_url": "https://player.vimeo.com/external/415106966.hd.mp4?s=78bab03d57e6ffd51aa0a7b74338c656be76a164&profile_id=175", "video_poster": "img/projects/vanmoof/mobile/vanmoof-video-cover-m.jpg", "src_width": 1535, "src_height": 864, "width_columns": 8, "left_columns": 0, "top_offset": 70 } }, { "type": "headline", "data": { "title": "The Challenge", "body": "Producers of high-end electric city bikes, Dutch brand VanMoof had planned to launch their new S3 and X3 range to the world during a physical event in 2020. Cancelled due to Covid-19, Resn was asked to bring the event to their audience in an entirely new way.", "top_offset": 120 } }, { "type": "videoloop", "data": { "vimeo_id": "415825157", "video_name": "vanmoof-bike-reveal-teaser", "vimeo_video_url": "https://player.vimeo.com/external/415825157.hd.mp4?s=30f18defa9d33cd228b35824ecdaf83bd52d40b6&profile_id=169", "src_width": 1920, "src_height": 1080, "width_columns": 3, "left_columns": 0 } }, { "type": "image", "data": { "src": "img/projects/vanmoof/mobile/vanmoof-challenge-s3-bike-m.jpg", "src_width": 1920, "src_height": 1080, "width_columns": 3, "left_columns": 3 } }, { "type": "headline", "data": { "title": "Broadcasted Live, Open to Anyone", "body": "Traditionally these launches have limited attendance, reserved for the media and key influencers. However our 40 minute live launch event was attended by over 6000 guests from around the globe. Special invites were sent out to VIPs and Press ahead of time to tease the launch and build hype. As the experience went live, it was promoted across all social channels - truly open to all!", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/vanmoof/mobile/vanmoof-broadcasted-live-welcome-m.jpg", "src_width": 1920, "src_height": 1080, "width_columns": 3, "left_columns": 3 } }, { "type": "text", "data": { "title": "GUESTS ARRIVE AND CREATE A COMMUNITY", "body": "After arriving on the event site, guests could create a profile to interact with each other while they waited for the countdown to hit zero. A live group chat was accessible with the social aspect giving the experience a personal, human touch.", "top_offset": 112 } }, { "type": "videoloop", "data": { "vimeo_id": "415824936", "video_name": "vanmoof-bike-reveal-teaser", "vimeo_video_url": "https://player.vimeo.com/external/415824936.hd.mp4?s=46009eefcd2dcbc0003beae4162235f97bbae4f1&profile_id=169", "src_width": 1920, "src_height": 1080, "width_columns": 1, "left_columns": 0 } }, { "type": "headline", "data": { "title": "Video Introduction & Product Reveal", "body": "The show kicked off with an introduction by the VanMoof Co-founders who explained the online format and how to participate. The new bikes were then revealed through a dramatic animated video sequence.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/vanmoof/mobile/vanmoof-product-reveal-taco-m.jpg", "src_width": 1920, "src_height": 1080, "width_columns": 3, "left_columns": 3 } }, { "type": "videoloop", "data": { "vimeo_id": "415825118", "video_name": "vanmoof-s3-x3-bikes", "vimeo_video_url": "https://player.vimeo.com/external/415825118.hd.mp4?s=4ac9b70d0120386cfe7a0d26067b0132eb08135c&profile_id=169", "src_width": 1920, "src_height": 1080, "width_columns": 3, "left_columns": 3 } }, { "type": "text", "data": { "title": "EXPLORE THE 360 BIKES IN REAL-TIME 3D", "body": "Immediately following the product reveal, all attendees were able to independently control, move and interact with the two e-bike models before the hosts elaborated on the ground-breaking features.", "top_offset": 112 } }, { "type": "image", "data": { "src": "img/projects/vanmoof/mobile/vanmoof-360-x3-m.jpg", "src_width": 1920, "src_height": 1080, "width_columns": 3, "left_columns": 3 } }, { "type": "headline", "data": { "title": "Interactive Tech Features", "body": "Guests were then led through each of the six unique tech features of the bikes, bringing together video, interactive 3D and audio in a seamless experience. As the founders explained in detail the groundbreaking technology, users could interact to see graphic representations of speed, energy and precision.", "top_offset": 120 } }, { "type": "videoloop", "data": { "vimeo_id": "415824960", "video_name": "vanmoof-interactive-feature-1", "vimeo_video_url": "https://player.vimeo.com/external/415824960.hd.mp4?s=6abc080359f18ea15b3df9b585007f925d4e0c11&profile_id=169", "src_width": 1920, "src_height": 1080, "width_columns": 3, "left_columns": 3 } }, { "type": "videoloop", "data": { "vimeo_id": "415824987", "video_name": "vanmoof-interactive-feature-2", "vimeo_video_url": "https://player.vimeo.com/external/415824987.hd.mp4?s=3c3de1e0fc3e1b4ca59b3c3374a7a05adac5784d&profile_id=175", "src_width": 1920, "src_height": 1080, "width_columns": 3, "left_columns": 3 } }, { "type": "videoloop", "data": { "vimeo_id": "415825025", "video_name": "vanmoof-interactive-feature-3", "vimeo_video_url": "https://player.vimeo.com/external/415825025.hd.mp4?s=1ddee0c068b05fa3ca37407dff6e5064ae09792d&profile_id=175", "src_width": 1920, "src_height": 1080, "width_columns": 3, "left_columns": 3 } }, { "type": "headline", "data": { "title": "Asking Live Questions", "body": "Throughout the entire launch event an \"Ask a Question\" interface was available, this opened a chat panel where they could ask as many questions as they wished. These questions were sent to a VanMoof admin interface, specially developed for the launch event. Over 2000 questions were received during the event with top questions filtered for the Co-founders to answer during the live Q&A.", "top_offset": 120 } }, { "type": "videoloop", "data": { "vimeo_id": "415491230", "video_name": "vanmoof-asking-live-questions", "vimeo_video_url": "https://player.vimeo.com/external/415824883.hd.mp4?s=85a68d650d3d4257ca8d606af748df2109e8bb5c&profile_id=169", "src_width": 1920, "src_height": 1080, "width_columns": 3, "left_columns": 3 } }, { "type": "headline", "data": { "title": "Live streaming Q&A", "body": "With the two bikes presented and all features highlighted, the two Co-founders (remote in Amsterdam and Taipei) were broadcast live to guests to host the Q&A. Multiple cameras were placed in each location including a live bike cam. During this Q&A, top questions were answered directly to those that asked.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/vanmoof/mobile/vanmoof-livestream-QA-m.jpg", "src_width": 1920, "src_height": 1080, "width_columns": 3, "left_columns": 3, "z_index": 100 } }, { "type": "videoloop", "data": { "vimeo_id": "415825063", "video_name": "vanmoof-livestream-QA", "vimeo_video_url": "https://player.vimeo.com/external/415825063.hd.mp4?s=aa60f7860e6147ae204f5557660e2e6b1bdc97bb&profile_id=175", "src_width": 1920, "src_height": 1080, "width_columns": 3, "left_columns": 3 } }, { "type": "headline", "data": { "title": "Post Event Site", "body": "After the show, the experience transformed into a fully interactive product exploration site with the ability to rediscover all the product features, visualise in AR or even purchase the products themselves.", "top_offset": 120 } }, { "type": "videoloop", "data": { "vimeo_id": "415825087", "video_name": "vanmoof-post-event-site", "vimeo_video_url": "https://player.vimeo.com/external/415825087.hd.mp4?s=574f6d8ba1f7e54ee12ae549e30d241ce36edbcd&profile_id=169", "src_width": 1920, "src_height": 1080, "width_columns": 3, "left_columns": 3 } }, { "type": "headline", "data": { "title": "A Launch Success", "body": "“Over 6000 riders from around the world were watching live – we’ve never been able to share a launch experience with so many people at once!...the VanMoof S3 & X3 launch was the most successful and most-viewed in VanMoof’s history. Right now, I couldn’t be happier!” - CEO VanMoof, Taco Carlier", "top_offset": 120 } }, { "type": "text", "data": { "title": "Results", "body": "Over 6000 live viewers, 4400 sales in first 24 hours, 2020 sales +20% above target to date and over 100 press articles worldwide in just 3 days (250 in first week). “We garnered as much press in one week as in total for our previous product launch!” - CEO VanMoof, Taco Carlier", "top_offset": 112 } } ] }, { "route": "la-mer", "menutitle": "", "enabled": true, "featured": true, "globaltitle": "", "title": "World of La Mer", "description": "An on going partnership with La Mer establishing strong campaign art direction and clear information graphics.", "client": "La Mer", "date": "August 2020", "role": "3D, Animation, Art Direction, Concept, Creative, Design, Production", "platforms": "", "url": "", "poster": "img/projects/la-mer/world-of-laMer-poster.jpg", "poster_m": "img/projects/la-mer/mobile/world-of-laMer-poster-m.jpg", "categories": [ "animation", "content", "motion" ], "awards": [], "items": [ { "type": "headline", "data": { "title": "Genaissance de la Mer", "body": "For the Genaissance range the brief was to develop a new art directional style that reimagined the science behind the product and made it clear and aspirational for the viewer. The campaign used a mixture of CGI and live action with a CGI overlay to enrich the existing footage.", "top_offset": 120 } }, { "type": "mobilevideo", "data": { "vimeo_id": "415106966", "video_name": "genaissance-film", "vimeo_video_url": "https://player.vimeo.com/external/415106966.hd.mp4?s=78bab03d57e6ffd51aa0a7b74338c656be76a164&profile_id=175", "video_poster": "img/projects/la-mer/mobile/genaissance-video-cover-m.jpg", "src_width": 1535, "src_height": 864, "width_columns": 8, "left_columns": 0, "top_offset": 70 } }, { "type": "text", "data": { "title": "Art Direction", "body": "We used the strong golden branding of Genaissance to create an art direction that was recognisable across all creative assets including the many variations film, social posts and print.", "top_offset": 112 } }, { "type": "image", "data": { "src": "img/projects/la-mer/mobile/genaissance-1.jpg", "src_width": 1920, "src_height": 1080, "width_columns": 3, "left_columns": 3 } }, { "type": "image", "data": { "src": "img/projects/la-mer/mobile/genaissance-2.jpg", "src_width": 1920, "src_height": 1080, "width_columns": 3, "left_columns": 3 } }, { "type": "carousel", "data": { "images": [ { "src": "img/projects/la-mer/genaissance-carousel-1.jpg" }, { "src": "img/projects/la-mer/genaissance-carousel-2.jpg" }, { "src": "img/projects/la-mer/genaissance-carousel-3.jpg" }, { "src": "img/projects/la-mer/genaissance-carousel-4.jpg" }, { "src": "img/projects/la-mer/genaissance-carousel-5.jpg" }, { "src": "img/projects/la-mer/genaissance-carousel-6.jpg" } ], "src_width": 1539, "src_height": 867, "top_offset": 40 } }, { "type": "headline", "data": { "title": "Lunar New Year", "body": "We were asked to create an animated greeting card for the Chinese Lunar New Year. The Creme de La Mer cream was taken on a magical journey, flying through stylistic interpretations of well known global locations. We created both the art direction and executed the production of all video, social and print assets for this campaign.", "top_offset": 120 } }, { "type": "mobilevideo", "data": { "vimeo_id": "453335264", "video_name": "laMer-film", "vimeo_video_url": "https://player.vimeo.com/external/453335264.hd.mp4?s=372d8cccb6ca00eb67886b38c0f87f06a4a1ad91&profile_id=175", "video_poster": "img/projects/la-mer/mobile/laMer-video-cover-m.jpg", "src_width": 1535, "src_height": 864, "width_columns": 8, "left_columns": 0, "top_offset": 70 } }, { "type": "text", "data": { "title": "Art direction", "body": "In each scene the product was framed traveling through a doorway. This represented renewal and rejuvenation. The video was designed to flow as a loop to play seamlessly on social and have the journey ever flowing.", "top_offset": 112 } }, { "type": "carousel", "data": { "images": [ { "src": "img/projects/la-mer/mobile/laMer-carousel-1.jpg" }, { "src": "img/projects/la-mer/mobile/laMer-carousel-2.jpg" }, { "src": "img/projects/la-mer/mobile/laMer-carousel-3.jpg" }, { "src": "img/projects/la-mer/mobile/laMer-carousel-4.jpg" }, { "src": "img/projects/la-mer/mobile/laMer-carousel-5.jpg" }, { "src": "img/projects/la-mer/mobile/laMer-carousel-6.jpg" }, { "src": "img/projects/la-mer/mobile/laMer-carousel-7.jpg" } ], "src_width": 1539, "src_height": 867, "top_offset": 40 } }, { "type": "text", "data": { "title": "Asset Creation", "body": "We created a world that spanned across varying outputs on web, print, store displays and product packaging.", "top_offset": 40 } }, { "type": "carousel", "data": { "images": [ { "src": "img/projects/la-mer/laMer-key-visual.jpg" }, { "src": "img/projects/la-mer/laMer-packaging-box.jpg" }, { "src": "img/projects/la-mer/laMer-ox-pattern.jpg" }, { "src": "img/projects/la-mer/laMer-product-range.jpg" } ], "src_width": 1539, "src_height": 867, "top_offset": 40 } }, { "type": "headline", "data": { "title": "Starbright - The Eye Concentrate ", "body": "The creative challenge was to concept and illustrate multiple representations of the varying scientific processes that went into the La Mer Eye Concentrate.", "top_offset": 120 } }, { "type": "mobilevideo", "data": { "vimeo_id": "453328981", "video_name": "starbright-film", "vimeo_video_url": "https://player.vimeo.com/external/453328981.hd.mp4?s=f8c2dff34e2dccbe2b14424abf796a0bb0a102a4&profile_id=175", "video_poster": "img/projects/la-mer/mobile/starbright-video-cover-m.jpg", "src_width": 1535, "src_height": 864, "width_columns": 8, "left_columns": 0, "top_offset": 70 } }, { "type": "text", "data": { "title": "Information Graphics", "body": "The illustrations had to be clear, technical but still approachable. With no pre existing references or visuals, we concepted from scratch to create visuals that made the information less abstract as a concept but easy to understand.", "top_offset": 112 } }, { "type": "carousel", "data": { "images": [ { "src": "img/projects/la-mer/mobile/starbright-carousel-1.jpg" }, { "src": "img/projects/la-mer/mobile/starbright-carousel-2.jpg" }, { "src": "img/projects/la-mer/mobile/starbright-carousel-3.jpg" }, { "src": "img/projects/la-mer/mobile/starbright-carousel-4.jpg" } ], "src_width": 1539, "src_height": 867, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/la-mer/starbright-styleframe-4.jpg", "src_width": 1280, "src_height": 720, "width_columns": 8, "left_columns": 0 } }, { "type": "image", "data": { "src": "img/projects/la-mer/starbright-styleframe-1.jpg", "src_width": 1280, "src_height": 720, "width_columns": 8, "left_columns": 0 } }, { "type": "image", "data": { "src": "img/projects/la-mer/starbright-styleframe-3.jpg", "src_width": 1280, "src_height": 720, "width_columns": 8, "left_columns": 0 } }, { "type": "image", "data": { "src": "img/projects/la-mer/starbright-styleframe-2.jpg", "src_width": 1280, "src_height": 720, "width_columns": 8, "left_columns": 0 } }, { "type": "image", "data": { "src": "img/projects/la-mer/starbright-styleframe-8.jpg", "src_width": 1280, "src_height": 720, "width_columns": 8, "left_columns": 0 } } ] }, { "route": "seashepherd", "menutitle": "", "enabled": true, "featured": false, "globaltitle": "", "title": "Below the Surface AR", "description": "Deadly legal fishing methods are killing thousands of dolphins every year. Below the Surface AR immerses you in the shocking reality of bycatch.", "client": "Sea Shepherd Conservation Society", "date": "February, 2020", "role": "Concept, Creative Direction, Design, Development, 3D, Sound Design & Composition, Sponsor", "platforms": "", "url": "https://belowthesurface.resn.co.nz/", "poster": "img/projects/seashepherd/seashepherd-poster-m.jpg", "poster_m": "img/projects/seashepherd/seashepherd-poster-m.jpg", "categories": [ "animation" ], "awards": [], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "347507060", "video_name": "dektop_flow", "vimeo_video_url": "https://player.vimeo.com/external/391444974.hd.mp4?s=0b1322870ca813f96e2599743e6bd2c3452bbe93&profile_id=175", "video_poster": "img/projects/seashepherd/ss-img-07.jpg", "src_width": 1535, "src_height": 864, "width_columns": 8, "left_columns": 0, "top_offset": 70 } }, { "type": "headline", "data": { "title": "The Concept", "body": "Below the Surface aims to raise awareness of the true horrors of commercial fishing bycatch by using the immersive power of AR. Made with Jelly, Resn’s industry-leading real-time Web3D pipeline, the experience lets you see the reality of bycatch on a mobile device.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/seashepherd/ss-img-01.jpg", "src_width": 1535, "src_height": 864, "width_columns": 8, "left_columns": 0, "z_index": 100, "top_offset": 138 } }, { "type": "headline", "data": { "title": "The Challenge", "body": "In 2019 alone, over 11,000 dolphins were killed as bycatch off the west coast of France. Our challenge was to shine a light on what bycatch really is: the brutal extermination of sea life.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/seashepherd/ss-img-06.jpg", "src_width": 1536, "src_height": 864, "width_columns": 3, "left_columns": 3, "z_index": 100, "top_offset": 138 } }, { "type": "image", "data": { "src": "img/projects/seashepherd/ss-img-02.jpg", "src_width": 519, "src_height": 921, "width_columns": 3, "left_columns": 3, "z_index": 100, "top_offset": -138 } }, { "type": "text", "data": { "title": "A Tranquil Beginning", "body": "The experience begins with a beautiful sphere of water floating in front of you. A fishing boat cruises its surface. As you zoom in, you are transported to a pristine undersea world.", "top_offset": 112 } }, { "type": "videoloop", "data": { "vimeo_id": "390928180", "video_name": "ssvid1", "vimeo_video_url": "https://player.vimeo.com/external/390928180.sd.mp4?s=cfd8585449ffea247a1d43fb50cf052a1c362469&profile_id=165", "src_width": 550, "src_height": 957, "width_columns": 3, "left_columns": 0, "z_index": 99, "top_offset": 200 } }, { "type": "videoloop", "data": { "vimeo_id": "390928794", "video_name": "ssvid2", "vimeo_video_url": "https://player.vimeo.com/external/390928794.sd.mp4?s=d7791e9960e810d034d66462ea24df133cc31661&profile_id=165", "src_width": 550, "src_height": 957, "width_columns": 3, "left_columns": 4, "z_index": 99, "top_offset": -100 } }, { "type": "text", "data": { "title": "A Deadly End", "body": "Floating in front of you is a dolphin struggling in a net. From every direction, you can hear the sounds of dolphins in distress. A fishing boat passes overhead and hauls the dolphins out of the water before dumping their dead bodies overboard. This is bycatch.", "top_offset": 112 } }, { "type": "videoloop", "data": { "vimeo_id": "390929846", "video_name": "ssvid3", "vimeo_video_url": "https://player.vimeo.com/external/390929846.sd.mp4?s=43d5cc15c069c7bb5987276880452ce3fd6b0300&profile_id=165", "src_width": 550, "src_height": 957, "width_columns": 3, "left_columns": 4, "z_index": 99, "top_offset": 200 } }, { "type": "videoloop", "data": { "vimeo_id": "390930200", "video_name": "ssvid4", "vimeo_video_url": "https://player.vimeo.com/external/390930200.sd.mp4?s=0d8edb34b4be331253b0379ca58419c670ff0af8&profile_id=165", "src_width": 550, "src_height": 957, "width_columns": 3, "left_columns": 0, "z_index": 99, "top_offset": -100 } }, { "type": "text", "data": { "title": "A Call to Action", "body": "To finish, a bold CTA invites you to donate to Sea Shepherd to help end dolphin slaughter. It doesn’t have to be this way, but the change starts on your plate.", "top_offset": 112 } }, { "type": "image", "data": { "src": "img/projects/seashepherd/ss-img-03.jpg", "src_width": 519, "src_height": 921, "width_columns": 3, "left_columns": 0, "z_index": 100, "top_offset": 138 } }, { "type": "image", "data": { "src": "img/projects/seashepherd/ss-img-04.jpg", "src_width": 519, "src_height": 921, "width_columns": 3, "left_columns": 4, "z_index": 100, "top_offset": -138 } }, { "type": "headline", "data": { "title": "Creating an Underwater Environment", "body": "Jelly allowed us to realistically render an underwater environment in real-time 3D. We used a combination of VFX techniques, such as volumetric lights, distance fog, caustics and micro-particles, to simulate real physical behaviours. We applied a similar approach to the sphere of water to create its ocean surface and water disturbance effects.", "top_offset": 120 } }, { "type": "headline", "data": { "title": "AR Elements", "body": "Our simulated AR approach used the gyroscope to synchronise the position of the sphere of water with the user’s phone movements. To convincingly blend our 3D render with the user’s environment, we simulated light reflections on the water’s surface by extracting colors from the users camera feed. These techniques allowed us to approximate an AR experience inside a mobile browser.", "top_offset": 120 } } ] }, { "route": "pioneer", "menutitle": "", "enabled": true, "featured": true, "globaltitle": "", "title": "Corn. Revolutionized.", "description": "A look at the cutting-edge science behind Pioneer corn told through the choreography of real-time 3D assets and animation.", "client": "Bader Rutter + Pioneer Hi Bred International", "date": "September, 2019", "role": "Design, Development, Animation, UI, UX", "platforms": "", "url": "https://cornrevolution.resn.global/", "poster": "img/projects/pioneer/pioneer-poster.png", "poster_m": "img/projects/pioneer/mobile/pioneer-poster-m.png", "categories": [ "animation" ], "awards": [], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "347507060", "video_name": "dektop_flow", "vimeo_video_url": "https://player.vimeo.com/external/376927275.hd.mp4?s=27c679e3db657ff8b49c346dc77cbcb13e572d9f&profile_id=175", "video_poster": "img/projects/pioneer/pioneer-videoposter.jpg", "src_width": 2048, "src_height": 1008, "top_offset": 40 } }, { "type": "headline", "data": { "title": "The Challenge", "body": "Resn & Bader Rutter teamed up to create a revolutionary online experience that tells the story of how Pioneer develops new varieties of corn. We wanted to captivate our audience with stunning imagery of the development process and turn skeptics into believers.", "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/pioneer/1-pioneer-intro-image.jpg", "src_width": 1536, "src_height": 864, "top_offset": 40 } }, { "type": "text", "data": { "title": "A life cycle", "body": "We wrapped experience in an infinite loop to represent the cycle of nature—from seed to plant and back to seed again—with some data and DNA added along the way.", "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/pioneer/mobile/2-pioneer-flow-m.png", "src_width": 658, "src_height": 1246, "top_offset": 40 } }, { "type": "headline", "data": { "title": "The Experience", "body": "Using our 3D pipeline Jelly, we combine high-end visuals with a slick UI and engaging interactions to create an experience that highlights the unique properties of a Pioneer seed.", "top_offset": 40 } }, { "type": "carousel", "data": { "images": [ { "src": "img/projects/pioneer/3-pioneer-desktop.jpg" }, { "src": "img/projects/pioneer/4-pioneer-desktop.jpg" }, { "src": "img/projects/pioneer/5-pioneer-desktop.jpg" } ], "src_width": 1539, "src_height": 867, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/pioneer/mobile/6-pioneer-mobile.jpg", "src_width": 640, "src_height": 1291, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/pioneer/mobile/7-pioneer-mobile.jpg", "src_width": 640, "src_height": 1291, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/pioneer/mobile/pioneer-mobile-all.png", "src_width": 640, "src_height": 1906, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/pioneer/mobile/13-pioneer-mobile.jpg", "src_width": 640, "src_height": 1291, "top_offset": 40 } }, { "type": "text", "data": { "title": "Different Conditions", "body": "To further highlight the strengths of the Pioneer corn, we showed the plant withstanding different weather conditions corn is forced to endure throughout the growing season." } }, { "type": "videoloop", "data": { "vimeo_id": "348555180", "video_name": "weather-conditions", "vimeo_video_url": "https://player.vimeo.com/external/348555180.hd.mp4?s=f91e3b1d358414a8a89d5769994f87e3d85aac1c&profile_id=169", "src_width": 1280, "src_height": 720, "top_offset": 40 } }, { "type": "headline", "data": { "title": "Scenes in Jelly", "body": "Our Jelly pipeline allowed us to compose stunning animated scenes that combine 2D assets, 3D models and interactive elements without forcing users to endure long load times.", "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/pioneer/mobile/19-pioneer-scene-m.png", "src_width": 668, "src_height": 1297, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/pioneer/mobile/20-pioneer-scene-m.jpg", "src_width": 637, "src_height": 980, "top_offset": 40 } }, { "type": "text", "data": { "title": "3D Projection mapping", "body": "By projecting high-level textures onto simplified 3D meshes we could give the sense of fully immersive 3D while still keeping it light on the CPU.", "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/pioneer/mobile/21-pioneer-slider-m.jpg", "src_width": 640, "src_height": 978, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/pioneer/mobile/23-pioneer-kernel-m.png", "src_width": 641, "src_height": 748, "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "348579113", "video_name": "matcap", "vimeo_video_url": "https://player.vimeo.com/external/348579113.sd.mp4?s=b558a14376bca9ee5ac6ca5d07162978fad660de&profile_id=165", "src_width": 800, "src_height": 800, "top_offset": 40 } }, { "type": "headline", "data": { "title": "User Interface", "body": "The user interface was designed to be slick and elegant while highlighting Pioneer’s technological prowess. We kept it simple but sophisticated with some unique interactions.", "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "348588793", "video_name": "ui", "vimeo_video_url": "https://player.vimeo.com/external/348588793.hd.mp4?s=cae9ca6b3266d9ff6c7be04a5d1a79018ab01fa6&profile_id=174", "src_width": 1920, "src_height": 1080, "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "348584109", "video_name": "ui-icons", "vimeo_video_url": "https://player.vimeo.com/external/348584109.hd.mp4?s=ff0fdcc2e497babe8e5e01474071a03202fef418&profile_id=169", "src_width": 1920, "src_height": 1080, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/pioneer/27-pioneer-ui.jpg", "src_width": 473, "src_height": 952, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/pioneer/29-pioneer-ui.png", "src_width": 869, "src_height": 1083, "top_offset": 40 } }, { "type": "videoloop", "data": { "vimeo_id": "348586326", "video_name": "ui-kernel", "vimeo_video_url": "https://player.vimeo.com/external/348586326.hd.mp4?s=c1d76d519907c37e60ea9223c3f3df25ed8d25a0&profile_id=174", "src_width": 827, "src_height": 1628, "top_offset": 40 } }, { "type": "text", "data": { "title": "The Result", "body": "The result was an endlessly looping, best-in-class 3D experience that demonstrates the benefits and technology of Pioneer corn.", "top_offset": 40 } } ] }, { "route": "noiz", "menutitle": "", "enabled": true, "featured": false, "globaltitle": "", "title": "HEIHEI - Noiz!", "description": "Noiz! is a creative musical soundboard game that appeals to kids of all ages. Funded by New Zealand On Air.", "client": "Resn + HEIHEI", "date": "October 2019", "role": "Creative, UX, Design, Animation, Development", "platforms": "", "url": "https://soundboard.heihei.resn.co/", "poster": "img/projects/noiz/noiz-desktop-poster.png", "poster_m": "img/projects/noiz/noiz-mobile-poster.png", "categories": [ "animation", "games" ], "awards": [ { "type": "fwa-sotd", "name": "FWA of the Day" }, { "type": "awwwards-sotd", "name": "Site of the Day" } ], "items": [ { "type": "headline", "data": { "title": "The Challenge", "body": "Our challenge was to encourage kids’ musical creativity and provide them with a New Zealand-centric sonic identity alongside a distinctive visual style. By giving them a forum to explore and experiment with sound, Noiz! shows Kiwi kids that music is all around them.", "top_offset": 0 } }, { "type": "videoloop", "data": { "vimeo_id": "476935608", "video_name": "1_Noiz_Video_Homepage", "vimeo_video_url": "https://player.vimeo.com/external/476935608.hd.mp4?s=9629b0a046b83f5d146a66845eee17440515eaaa&profile_id=175", "src_width": 1886, "src_height": 1080, "top_offset": 50, "z_index": 1 } }, { "type": "text", "data": { "title": "Come on feel the Noiz!", "body": "With seven different soundboards to choose from, Noiz! is a cacophonous assortment of curiosities that sparks joy, surprise and inspiration. There are characters and creatures that squeak and squawk, household items that jangle and crash, and even more fantastical things that chatter, clatter and clang. We worked with different audio artists like Full Force Wolf Horse and Disasteradio to create an offbeat soundscape rich in variety that had a deep cultural resonance for our New Zealand audience.", "top_offset": 50 } }, { "type": "image", "data": { "src": "img/projects/noiz/1_Noiz_Visual.png", "src_width": 1381, "src_height": 806, "top_offset": 50, "z_index": 1 } }, { "type": "image", "data": { "src": "img/projects/noiz/2_Noiz_Visual.png", "src_width": 866, "src_height": 505, "top_offset": 50, "z_index": 2 } }, { "type": "image", "data": { "src": "img/projects/noiz/3_Noiz_Visual.png", "src_width": 863, "src_height": 503, "top_offset": 50, "z_index": 3 } }, { "type": "image", "data": { "src": "img/projects/noiz/4_Noiz_Visual.png", "src_width": 376, "src_height": 658, "top_offset": 50, "z_index": 4 } }, { "type": "image", "data": { "src": "img/projects/noiz/5_Noiz_Visual.png", "src_width": 375, "src_height": 658, "top_offset": 50, "z_index": 1 } }, { "type": "headline", "data": { "title": "Visual Design", "body": "We collaborated with renowned kiwi illustrator Ned Wenlock to develop the site's signature look which combines simplified shapes, bold lines and vibrant colours. Early in the process, we decided to repurpose and recolor image assets and identify visual compatibilities to achieve consistency of design across the entire experience.", "top_offset": 60 } }, { "type": "image", "data": { "src": "img/projects/noiz/6_Noiz_Visual.png", "src_width": 1384, "src_height": 1218, "top_offset": 50, "z_index": 1 } }, { "type": "text", "data": { "title": "Simple, Intuitive Interface", "body": "As we wanted to appeal to every age group, even the very young, we needed to ensure the navigation structure was as simple and intuitive as possible by using familiar interactions. We kept the instructions simple, available in both Te Reo and English, and added gestural icons for children still learning to read.", "top_offset": 50 } }, { "type": "videoloop", "data": { "vimeo_id": "476935662", "video_name": "2_Noiz_Video_Tutorial", "vimeo_video_url": "https://player.vimeo.com/external/476935662.hd.mp4?s=6d7983a4c35d79bd210a531eda83aa2f9fe77862&profile_id=169", "src_width": 1838, "src_height": 1080, "top_offset": 50, "z_index": 1 } }, { "type": "headline", "data": { "title": "Gameplay", "body": "Players can select between two different modes. Freeplay lets you kick out the jams by tapping on beats and noises while Challenge lets you test your memory by copying the sequence of sounds. Whether it’s simple sandbox fun or serious challenge, Noiz! has something for kids and adults of all ages.", "top_offset": 50 } }, { "type": "videoloop", "data": { "vimeo_id": "476935680", "video_name": "3_Noiz_Video_Gameplay", "vimeo_video_url": "https://player.vimeo.com/external/476935680.hd.mp4?s=f208b54ff5b2a8bd3f2e8412a160dac13c716bd8&profile_id=175", "src_width": 1838, "src_height": 1080, "top_offset": 50, "z_index": 1 } }, { "type": "videoloop", "data": { "vimeo_id": "476935685", "video_name": "4_Noiz_Video_Gameplay", "vimeo_video_url": "https://player.vimeo.com/external/476935685.sd.mp4?s=3eedc9c3df4f45b7a37c6b15055158b5dcd573d1&profile_id=165", "src_width": 540, "src_height": 948, "top_offset": 50, "z_index": 2 } }, { "type": "videoloop", "data": { "vimeo_id": "476935704", "video_name": "5_Noiz_Video_Gameplay", "vimeo_video_url": "https://player.vimeo.com/external/476935704.sd.mp4?s=26b5f1012e0f1e540a8d1b524f2af6d524d85204&profile_id=165", "src_width": 540, "src_height": 948, "top_offset": 50, "z_index": 3 } } ] }, { "route": "ispy", "menutitle": "", "enabled": true, "featured": false, "globaltitle": "", "title": "HEIHEI - iSpy!", "description": "iSpy is a hidden picture game that connects kids to the diverse landscapes, cultures, and lifestyles of Aotearoa New Zealand.", "client": "Resn + HEIHEI", "date": "October 2019", "role": "Creative, UX, Design, Animation, Development", "platforms": "", "url": "https://ispy.heihei.resn.co/", "poster": "img/projects/ispy/ispy-desktop-poster.png", "poster_m": "img/projects/ispy/ispy-mobile-poster.png", "categories": [ "animation", "games" ], "awards": [ { "type": "fwa-sotd", "name": "FWA of the Day" }, { "type": "awwwards-sotd", "name": "Site of the Day" } ], "items": [ { "type": "headline", "data": { "title": "The Challenge", "body": "We wanted to create an entertaining and educational game aimed primarily at children aged 5-9, but with wide crossover appeal. Through explorative play, kids will develop their curiosity and knowledge as they discover different regions and communities in Aotearoa.", "top_offset": 0 } }, { "type": "videoloop", "data": { "vimeo_id": "476998397", "video_name": "1_iSpy_Video_Homepage", "vimeo_video_url": "https://player.vimeo.com/external/476998397.hd.mp4?s=23e396220f37c6adf117466efe76fd22a9a10f2c&profile_id=175", "src_width": 1838, "src_height": 1080, "top_offset": 50, "z_index": 1 } }, { "type": "text", "data": { "title": "Diversity from Land to Sea", "body": "The experience features six different environments from renowned illustrator T Wei, each teeming with thousands of characters, objects, plants, and animals. We undertook careful cultural and geographical research to ensure we presented a vision of Aotearoa New Zealand that was diverse and well-rounded.", "top_offset": 50 } }, { "type": "videoloop", "data": { "vimeo_id": "manage", "video_name": "2_iSpy_Video_Find", "vimeo_video_url": "https://player.vimeo.com/external/476998416.hd.mp4?s=e81793025fedb6eb6af6e48b406db05e604b086b&profile_id=169", "src_width": 1826, "src_height": 1080, "top_offset": 50, "z_index": 1 } }, { "type": "image", "data": { "src": "img/projects/ispy/1_iSpy_Visual.png", "src_width": 866, "src_height": 497, "top_offset": 50, "z_index": 1 } }, { "type": "image", "data": { "src": "img/projects/ispy/2_iSpy_Visual.png", "src_width": 302, "src_height": 302, "top_offset": 50, "z_index": 2 } }, { "type": "image", "data": { "src": "img/projects/ispy/3_iSpy_Visual.png", "src_width": 866, "src_height": 505, "top_offset": 50, "z_index": 3 } }, { "type": "image", "data": { "src": "img/projects/ispy/4_iSpy_Visual.png", "src_width": 863, "src_height": 504, "top_offset": 50, "z_index": 4 } }, { "type": "text", "data": { "title": "Adding Detail", "body": "To create beautiful, playful artworks that kids want to explore we had to make sure there were plenty of details and Easter eggs. We worked to optimise the canvas size and image density to find the right balance between challenge and reward for our young audience.", "top_offset": 50 } }, { "type": "carousel", "data": { "images": [ { "src": "img/projects/ispy/5_iSpy_Visual.png" }, { "src": "img/projects/ispy/6_iSpy_Visual.png" }, { "src": "img/projects/ispy/7_iSpy_Visual.png" } ], "src_width": 1539, "src_height": 867, "top_offset": 50 } }, { "type": "headline", "data": { "title": "Playing the Game", "body": "Players are shown a character or detail from the environment and are challenged to find it. The more they find the higher their score. Players can choose “Freeplay” mode, which has no time limit or the more difficult “Challenge” mode where they have to beat the clock!", "top_offset": 50 } }, { "type": "videoloop", "data": { "vimeo_id": "476998449", "video_name": "3_iSpy_Video_Tap", "vimeo_video_url": "https://player.vimeo.com/external/476998449.hd.mp4?s=ec97e0e90e6680bc576d0fda3a91211d1ee4a3de&profile_id=175", "src_width": 1838, "src_height": 1080, "top_offset": 50, "z_index": 1 } }, { "type": "videoloop", "data": { "vimeo_id": "476998454", "video_name": "4_iSpy_Video", "vimeo_video_url": "https://player.vimeo.com/external/476998454.hd.mp4?s=3454a9af3defa57d61827e991ecd80d927924492&profile_id=169", "src_width": 1838, "src_height": 1080, "top_offset": 50, "z_index": 1 } }, { "type": "text", "data": { "title": "Fun Facts", "body": "We wanted iSpy to be entertaining and educational. That’s why we included fun New Zealand facts about each of the environments. Interesting, surprising and informative, everyone is sure to learn something. Did you know that moa were the only known birds that did not have wings? Who knew!", "top_offset": 50 } }, { "type": "image", "data": { "src": "img/projects/ispy/8_iSpy_Visual.png", "src_width": 1381, "src_height": 799, "top_offset": 50, "z_index": 4 } } ] }, { "route": "jelly-3d", "menutitle": "", "enabled": true, "featured": false, "globaltitle": "", "title": "Jelly - Realtime 3D Pipeline", "description": "Jelly is Resn’s Web3D pipeline: our in-house production and development methodology that allows us to deliver premium real-time 3D that fits your budget.", "client": "Various", "date": "Dec, 2019", "role": "Developer", "platforms": "", "url": "", "poster": "img/projects/jelly-3d/Jelly_Hero_Poster1.jpg", "poster_m": "img/projects/jelly-3d/Jelly_Hero_Poster_Mobile.jpg", "categories": [], "awards": [], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "374855493", "vimeo_video_url": "https://player.vimeo.com/external/376927275.hd.mp4?s=27c679e3db657ff8b49c346dc77cbcb13e572d9f&profile_id=175", "video_name": "Pioneer Corn Revolution", "video_poster": "img/projects/jelly-3d/Jelly_Hero_Poster.jpg", "src_width": 2048, "src_height": 1008, "width_columns": 8, "left_columns": 0, "top_offset": 120 } }, { "type": "text", "data": { "title": "Blazing Trails", "body": "Jelly propels real-time 3D into the future. Over the last 10 years, we’ve built the framework and capabilities that allow us to achieve a level of quality and performance that wasn’t thought possible—until now.", "top_offset": 120 } }, { "type": "carousel", "data": { "images": [ { "src": "img/projects/jelly-3d/Corn_Revolution_1.jpg" }, { "src": "img/projects/jelly-3d/Sea_Shepherd_2.jpg" }, { "src": "img/projects/jelly-3d/Pioneer_3D_background.jpg" }, { "src": "img/projects/jelly-3d/Sea_Shepherd_2_Copy.jpg" }, { "src": "img/projects/jelly-3d/Corn_Revolution_2.jpg" }, { "src": "img/projects/jelly-3d/Corn_Revolution_3.jpg" } ], "src_width": 3450, "src_height": 2160, "width_columns": 8, "left_columns": 0, "top_offset": 120 } }, { "type": "videoloop", "data": { "vimeo_id": "341749708", "vimeo_video_url": "https://player.vimeo.com/external/341749708.hd.mp4?s=7952d012161216059236feffdbbcd65faebad182&profile_id=174", "video_name": "adidas-loop-particleshoe", "src_width": 1280, "src_height": 720, "width_columns": 5, "left_columns": 3, "top_offset": 120, "z_index": 2 } }, { "type": "videoloop", "data": { "vimeo_id": "341749737", "vimeo_video_url": "https://player.vimeo.com/external/341749737.hd.mp4?s=1ad9db4aa24f9e572ae6a9468254335adccd4145&profile_id=174", "video_name": "adidas-loop-process", "src_width": 1280, "src_height": 720, "width_columns": 5, "left_columns": 0, "top_offset": -80, "z_index": 1 } }, { "type": "text", "data": { "title": "Superior Quality", "body": "Jelly can achieve unparalleled photorealism with convincing depth of field, dynamic lighting and thousands of animated particles. And we do it while maintaining consistent stroke widths and smooth edges regardless of screen size or pixel density.", "top_offset": 120 } }, { "type": "headline", "data": { "title": "In short, Jelly delivers the highest-quality Web3D out there.", "body": "", "top_offset": 120 } }, { "type": "videoloop", "data": { "vimeo_id": "333052349", "vimeo_video_url": "https://player.vimeo.com/external/333052349.sd.mp4?s=56f7e3a3c95e82e97d6857bdb436d6c2e7c16b6f&profile_id=165", "video_name": "kekubian-scene-shop", "src_width": 372, "src_height": 666, "width_columns": 2.5, "left_columns": 5.5, "top_offset": -572, "z_index": 2 } }, { "type": "text", "data": { "title": "Lower Overhead", "body": "Jelly’s pipeline is robust and efficient, enabling Resn’s experienced developers to navigate complex workflows with ease. Compared to similar offerings, Jelly means lower overheads and shortened production schedules.", "top_offset": 120 } }, { "type": "headline", "data": { "title": "With Jelly, you get more for less.", "body": "", "top_offset": 120 } }, { "type": "videoloop", "data": { "vimeo_id": "333052313", "vimeo_video_url": "https://player.vimeo.com/external/333052313.sd.mp4?s=e29f93bc118acb6c6647f22defd2abcf66937ed8&profile_id=165", "video_name": "kekubian-scene-park", "src_width": 372, "src_height": 666, "width_columns": 2.5, "left_columns": 2.75, "top_offset": -572, "z_index": 3 } }, { "type": "text", "data": { "title": "Unparalleled Performance", "body": "Jelly delivers a premium-quality result without sacrificing performance. We minimize render passes and draw calls with optimized techniques, such as combining high-res 3D assets with baked-in visual effects, to produce superior results with minimal load times.", "top_offset": 420 } }, { "type": "headline", "data": { "title": "With Jelly, you won’t lose their attention.", "body": "", "top_offset": 120 } }, { "type": "text", "data": { "title": "AR Ready", "body": "The field of WebAR is in its infancy, but the possibilities are incredibly exciting. We’ve developed our own AR workflow, JellyJAR, and we’ve already achieved some amazing results.", "top_offset": 120 } }, { "type": "videoloop", "data": { "vimeo_id": "274711257", "vimeo_video_url": "https://player.vimeo.com/external/274711257.hd.mp4?s=8b982d429c51607a9ed5ee46afe7266e695549c9&profile_id=175", "video_name": "interactive-shoe", "video_poster": "img/projects/interactive-shoe/interactive-shoe-video.jpg", "src_width": 1280, "src_height": 720, "width_columns": 8, "left_columns": 0, "top_offset": 120 } }, { "type": "text", "data": { "title": "Turntable - Product Explorer", "body": "• Customers explore unique product features.", "top_offset": 120 } }, { "type": "text", "data": { "title": "", "body": "• Turn, examine, play and familiarize.", "top_offset": 0 } }, { "type": "text", "data": { "title": "", "body": "• Interactions enhance customer experience for deeper understanding and connection.", "top_offset": 0 } }, { "type": "mobilevideo", "data": { "vimeo_id": "165951750", "vimeo_video_url": "https://player.vimeo.com/external/165951750.hd.mp4?s=5c52481d2a79c48383cdd4314b0ddc284248152c&profile_id=174", "video_name": "evinrude etec g2", "video_poster": "img/projects/evinrude-etec-g2/evinrude-etec-g2-video.jpg", "src_width": 1280, "src_height": 720, "width_columns": 8, "left_columns": 0, "top_offset": 120 } }, { "type": "text", "data": { "title": "Jelly Mould - Customize and Configure", "body": "• Customers build personalized products online, with instant visualization.", "top_offset": 120 } }, { "type": "text", "data": { "title": "", "body": "• Change colors, materials, and specifications.", "top_offset": 0 } }, { "type": "text", "data": { "title": "", "body": "• eCommerce integration.", "top_offset": 0 } }, { "type": "text", "data": { "title": "", "body": "• Provide instantaneous and accurate quotes.", "top_offset": 0 } }, { "type": "carousel", "data": { "images": [ { "src": "img/projects/jelly-3d/1_FutureCraft4D.jpg" }, { "src": "img/projects/jelly-3d/2_ZoomAR_01.jpg" }, { "src": "img/projects/jelly-3d/3_ZoomAR_06.jpg" }, { "src": "img/projects/jelly-3d/4_ZoomAR_07.jpg" } ], "src_width": 3840, "src_height": 2160, "width_columns": 8, "left_columns": 0, "top_offset": 120 } }, { "type": "text", "data": { "title": "Zoom - Z-Depth Explorer", "body": "• JellyJAR experience reveals product features using Z-Depth movement.", "top_offset": 120 } }, { "type": "text", "data": { "title": "", "body": "• Explore complex or technical products by layering information intuitively.", "top_offset": 0 } }, { "type": "text", "data": { "title": "", "body": "• Customers connect with the product through engaging AR interactions.", "top_offset": 0 } }, { "type": "videoloop", "data": { "vimeo_id": "307535710", "vimeo_video_url": "https://player.vimeo.com/external/307535710.hd.mp4?s=e031950001ecd8bba678591457a1f252e9554e5d&profile_id=174", "video_name": "bandito-intro", "src_width": 1280, "src_height": 720, "width_columns": 5, "left_columns": 3, "top_offset": 120, "z_index": 4 } }, { "type": "videoloop", "data": { "vimeo_id": "307659814", "vimeo_video_url": "https://player.vimeo.com/external/307659814.hd.mp4?s=e073015566ddf949a05ac8969bc086eec150feab&profile_id=169", "video_name": "dema-transition", "src_width": 1280, "src_height": 720, "width_columns": 5, "left_columns": 0, "top_offset": -80, "z_index": 1 } }, { "type": "text", "data": { "title": "Additional Jelly Services", "body": "• 3D modelling", "top_offset": 120 } }, { "type": "text", "data": { "title": "", "body": "• Animation", "top_offset": -10 } }, { "type": "text", "data": { "title": "", "body": "• Shaders", "top_offset": 0 } }, { "type": "text", "data": { "title": "", "body": "• Lighting and textures", "top_offset": 0 } }, { "type": "text", "data": { "title": "", "body": "• Colour grading", "top_offset": 0 } }, { "type": "text", "data": { "title": "", "body": "• Post effects", "top_offset": 0 } }, { "type": "text", "data": { "title": "", "body": "• Dynamic and reactive VFX", "top_offset": 0 } }, { "type": "text", "data": { "title": "", "body": "• Character and scene creation", "top_offset": 0 } } ] }, { "route": "les-mills-grit", "menutitle": "", "enabled": true, "featured": false, "globaltitle": "", "title": "LES MILLS GRIT", "description": "LES MILLS GRIT, high impact cross platform advertising spots for the intense HIIT workout program.", "client": "Colenso BBDO", "date": "April, 2019", "role": "Art Direction, Design, Animation, Editing, Sound Design", "platforms": "", "url": "", "poster": "img/projects/les-mills-grit/10_Gallery_Card.jpg", "poster_m": "img/projects/les-mills-grit/10_Mobile_Hero_Poster.jpg", "categories": [ "content", "motion" ], "awards": [], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "365178771", "vimeo_video_url": "https://player.vimeo.com/external/365178771.hd.mp4?s=14337853856f2faa9f80eeee7763e16e561fc755&profile_id=175", "video_name": "Resn_Les_Mills_Case_Study", "video_poster": "img/projects/les-mills-grit/1.0_Hero_Poster_Video.jpg", "src_width": 1920, "src_height": 1080 } }, { "type": "headline", "data": { "title": "The Challenge", "body": "Our challenge was to produce a high volume of advertising spots and infuse them with the same spirit as a real GRIT workout to inspire people to take on the GRIT challenge.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/les-mills-grit/01_GRIDS.gif", "src_width": 920, "src_height": 528, "top_offset": 110 } }, { "type": "videoloop", "data": { "vimeo_id": "365182252", "vimeo_video_url": "https://player.vimeo.com/external/365182252.hd.mp4?s=e4188a4af64312d7bc13f1dc7cf6715217a30241&profile_id=175", "video_name": "02_SWEAT", "src_width": 1920, "src_height": 1080, "z_index": 1 } }, { "type": "text", "data": { "title": "Grid Layout", "body": "A consistent set of proportional grids across the entire campaign formed the backbone of the design. This purposeful layout meant the eye could track the active type, even at its most energetic.", "top_offset": 120 } }, { "type": "videoloop", "data": { "vimeo_id": "365182264", "vimeo_video_url": "https://player.vimeo.com/external/365182264.hd.mp4?s=ee6483e550f6ed9411e8fc52062aa98f0bfb314c&profile_id=175", "video_name": "03_Boxomtic One", "src_width": 1920, "src_height": 1080, "top_offset": 120, "z_index": 2 } }, { "type": "videoloop", "data": { "vimeo_id": "365182199", "vimeo_video_url": "https://player.vimeo.com/external/365182199.hd.mp4?s=6a015cb596b8c9fe09e1e9ac4ac468990db00ecf&profile_id=175", "video_name": "04_HEART", "src_width": 1920, "src_height": 1080, "z_index": 1 } }, { "type": "text", "data": { "title": "Dynamic Visual Style", "body": "An array of dynamic images, deformations, pixel glitches and textures produced a vibrant visual style. From a beating 3D heart to flickering pixel glitches, our visual tookit added layers of technical detail to our compositions.", "top_offset": 140 } }, { "type": "image", "data": { "src": "img/projects/les-mills-grit/1.0_Grit_Still.jpg", "src_width": 1920, "src_height": 1080, "top_offset": 130, "z_index": 2 } }, { "type": "image", "data": { "src": "img/projects/les-mills-grit/2.0_Grit_Still.jpg", "src_width": 1920, "src_height": 1080, "z_index": 3 } }, { "type": "image", "data": { "src": "img/projects/les-mills-grit/3.0_Grit_Still.jpg", "src_width": 1920, "src_height": 1080, "z_index": 1 } }, { "type": "videoloop", "data": { "vimeo_id": "365182222", "vimeo_video_url": "https://player.vimeo.com/external/365182222.hd.mp4?s=b0038d25a96a48e57a953366ad08cd739d210ddb&profile_id=175", "video_name": "05_GRIT MINDSET", "src_width": 1920, "src_height": 1080, "top_offset": 180 } }, { "type": "text", "data": { "title": "Gritty Sound Design", "body": "We built the strong, textural sound design around recordings of a real GRIT class. The variety of rhythms worked together as a full piece or broken into smaller sections. This modular approach games us flexibility while preserving the distinctive GRIT sound.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/les-mills-grit/4.0_Grit_Still.jpg", "src_width": 1920, "src_height": 1080, "top_offset": 40, "z_index": 1 } }, { "type": "image", "data": { "src": "img/projects/les-mills-grit/10.0_Grit_Still.jpg", "src_width": 1920, "src_height": 1080, "top_offset": -40, "z_index": 2 } }, { "type": "image", "data": { "src": "img/projects/les-mills-grit/5.0_Grit_Still.jpg", "src_width": 1920, "src_height": 1080, "top_offset": -60, "z_index": 3 } }, { "type": "image", "data": { "src": "img/projects/les-mills-grit/6.0_Grit_Still.jpg", "src_width": 1920, "src_height": 1080, "top_offset": 40 } }, { "type": "image", "data": { "src": "img/projects/les-mills-grit/7.0_Grit_Still.jpg", "src_width": 1920, "src_height": 1080 } }, { "type": "image", "data": { "src": "img/projects/les-mills-grit/8.0_Grit_Still.jpg", "src_width": 1920, "src_height": 1080, "top_offset": 13 } }, { "type": "image", "data": { "src": "img/projects/les-mills-grit/9.0_Grit_Still.jpg", "src_width": 1920, "src_height": 1080 } }, { "type": "videoloop", "data": { "vimeo_id": "365182243", "vimeo_video_url": "https://player.vimeo.com/external/365182243.hd.mp4?s=8ad0bb793a2ef0cd1a1ad91aede398539bfd6124&profile_id=175", "video_name": "6_Outro 2", "src_width": 1920, "src_height": 1080 } } ] }, { "route": "discover-lexus", "menutitle": "", "enabled": true, "featured": false, "globaltitle": "", "title": "Discover Lexus", "description": "Discover Lexus is a home for Lexus to communicate its many amazing stories that go well beyond the automotive.", "client": "Saatchi & Saatchi Tokyo + Lexus International", "date": "July, 2018", "role": "Creative, Strategic and Production Partner", "platforms": "", "url": "https://discoverlexus.com/", "poster": "img/projects/discover-lexus/00_Lexus_Thumbnail.jpg", "poster_m": "img/projects/discover-lexus/mobile/00_Lexus_Thumbnail_Mobile.jpg", "categories": [ "creative-strategy" ], "awards": [ { "type": "fwa-sotd", "name": "FWA of the Day" }, { "type": "awwwards-sotd", "name": "Site of the Day" }, { "type": "awwwards-sotd", "name": "User's Choice Site of the Year" }, { "type": "webbys", "name": "Webby Award Winner - Car Sites & Car Culture" } ], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "341491204", "vimeo_video_url": "https://player.vimeo.com/external/341491204.hd.mp4?s=15081447b618ac894e5605c504cd97690f4a346c&profile_id=175", "video_name": "Lexus_Case_Study_Final4", "video_poster": "img/projects/discover-lexus/mobile/01_Lexus_Video_Thumbnail_Mobile.jpg", "src_width": 1280, "src_height": 720, "top_offset": 120 } }, { "type": "headline", "data": { "title": "The Challenge", "body": "Resn and Saatchi & Saatchi Tokyo teamed up to reimagine how Lexus engaged with users online. Our challenge was to streamline their digital comms and give users a broader appreciation for all things Lexus.", "top_offset": 120 } }, { "type": "videoloop", "data": { "vimeo_id": "341254555", "vimeo_video_url": "https://player.vimeo.com/external/341254555.hd.mp4?s=c1ce6f0fd1752ac31e2549088638be548f780a51&profile_id=174", "video_name": "02_lexus_home", "src_width": 1600, "src_height": 900, "top_offset": 120 } }, { "type": "text", "data": { "title": "Experience Amazing", "body": "We began the project with a deep dive into digital strategy. Our aim was to create a cohesive experience from multiple Lexus brand activities for a clearer vision with more valuable content.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/discover-lexus/mobile/03_Lexus_Discover_Select.jpg", "src_width": 1600, "src_height": 900 } }, { "type": "image", "data": { "src": "img/projects/discover-lexus/mobile/04_Lexus_Scamp_Mobile_Side.jpg", "src_width": 750, "src_height": 756 } }, { "type": "image", "data": { "src": "img/projects/discover-lexus/mobile/06_Lexus_Board_Mobile.jpg", "src_width": 1600, "src_height": 900 } }, { "type": "image", "data": { "src": "img/projects/discover-lexus/mobile/07_Lexus_Scamp_Mobile_Side.jpg", "src_width": 750, "src_height": 631 } }, { "type": "text", "data": { "title": "Flexible Approach", "body": "Our flexible CMS makes it easy to create engaging stories with a bespoke level of polish. The system uses different modules to add new content and structure it appropriately. This quick content-creation and management system allows Lexus to stay current with less effort.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/discover-lexus/mobile/09_Lexus_Scamp_Mobile.jpg", "src_width": 1605, "src_height": 1600 } }, { "type": "image", "data": { "src": "img/projects/discover-lexus/mobile/10_Lexus_Scamp_Mobile_Side.jpg", "src_width": 750, "src_height": 752 } }, { "type": "text", "data": { "title": "The Result", "body": "The result was a site that was welcoming, yet bold; simple, yet sophisticated; easy to navigate, yet rich in content. We wrapped it all in an elegant design with fluid motion that lets the content shine and users Experience Amazing." } }, { "type": "image", "data": { "src": "img/projects/discover-lexus/mobile/12_Lexus_Scamp_Mobile.jpg", "src_width": 1600, "src_height": 900 } }, { "type": "image", "data": { "src": "img/projects/discover-lexus/mobile/13_Lexus_Scamp_Mobile_Side.jpg", "src_width": 750, "src_height": 816 } } ] }, { "route": "loop", "menutitle": "", "enabled": true, "featured": false, "globaltitle": "", "title": "adidas Futurecraft.Loop Event", "description": "The adidas Futurecraft.Loop launch event in New York City brought together 200 handpicked influencers from around the world. From here, they started their journey as the first ever generation of adidas’ groundbreaking product movement.", "client": "adidas", "date": "April, 2019", "role": "Event Conceptualisation, Creative, Content Production", "platforms": "", "url": "", "poster": "img/projects/loop/adidas-loop-poster-desktop.png", "poster_m": "img/projects/loop/mobile/adidas-loop-poster-mobile.png", "categories": [ "activation", "content" ], "awards": [], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "341749766", "vimeo_video_url": "https://player.vimeo.com/external/341749766.hd.mp4?s=561b9af13743576d31b6e70f4eeac2fb8f248cf1&profile_id=175", "video_name": "SS19_FC_LOOP_LAUNCH_HIGHLIGHT_60s_16-9", "video_poster": "img/projects/loop/mobile/adidas-loop-video-mobile.jpg", "src_width": 1920, "src_height": 1080, "width_columns": 8, "left_columns": 0 } }, { "type": "text", "data": { "title": "THE RECYCLABLE PRODUCT", "body": "adidas Futurecraft.Loop is a 100% recyclable product where the shoes are made from a single TPU material. They can be worn, ground up and then melted back down into the raw material, eventually being turned into brand new shoes. This global product launch was a one-time, invite-only event in New York for a select group of 200 people.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/loop/mobile/adidas-loop-product-mobile.jpg", "src_width": 1400, "src_height": 875, "width_columns": 8, "left_columns": 0, "top_offset": 120 } }, { "type": "headline", "data": { "title": "The Venue", "body": "The Duggal Greenhouse was selected as the venue for the Loop Event, situated in the Brooklyn Navy Yard in NYC. Chosen for its sheer impressive size and focus on sustainability, the space provided a perfect canvas to house our large-scale projection mapping set up.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/loop/mobile/adidas-loop-venue-1-mobile.jpg", "src_width": 1400, "src_height": 875, "width_columns": 8, "left_columns": 0, "top_offset": 120 } }, { "type": "text", "data": { "title": "VISUALS LEAD BY PROJECTION", "body": "As Futurecraft.Loop is focused on reducing wastefulness, it was of utmost importance to create an event with minimal fabrication, relying instead on projection and suspended projection surfaces to define zones within the venue. Two main areas were created, both tying in conceptually to the product where our linear product economy must lead to a circular one.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/loop/mobile/adidas-loop-venue-2-mobile.jpg", "src_width": 1400, "src_height": 875, "width_columns": 8, "left_columns": 0, "top_offset": 120 } }, { "type": "headline", "data": { "title": "Entry Projection Tunnel", "body": "After arriving and checking in to the venue, guests first enter a linear tunnel surrounded by nine large projection surfaces, on all sides as well as the roof. This entry point sets the scene for the current issues on plastic waste and purpose for the creation of Futurecraft.Loop.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/loop/mobile/adidas-loop-tunnel-1-mobile.jpg", "src_width": 1400, "src_height": 875, "width_columns": 8, "left_columns": 0, "top_offset": 120 } }, { "type": "text", "data": { "title": "AUDIO-VISUAL EXPERIENCE", "body": "Custom audio and voice overs, playing alongside large-scale, high intensity animated graphics and typography create an impressive venue entrance. Statistics, copy and 3D assets present the world’s issues on plastic waste in a bold, easy to understand way.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/loop/mobile/adidas-loop-tunnel-2-mobile.jpg", "src_width": 1400, "src_height": 875, "width_columns": 8, "left_columns": 0, "top_offset": 120 } }, { "type": "text", "data": { "title": "THE TUNNEL DOORWAY", "body": "Situated at the end of the projection tunnel was a small doorway with smoke effects hiding the main circular projection area beyond. After guests walk through the doorway one by one, they find themselves walking into a circular formation together.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/loop/mobile/adidas-loop-tunnel-3-mobile.jpg", "src_width": 1400, "src_height": 875, "width_columns": 8, "left_columns": 0, "top_offset": 120 } }, { "type": "text", "data": { "title": "TUNNEL GRAPHICS", "body": "", "top_offset": 120 } }, { "type": "videoloop", "data": { "vimeo_id": "341749746", "vimeo_video_url": "https://player.vimeo.com/external/341749746.hd.mp4?s=b71a40bd3c96f8aeb7f2309ec336e8a717c5d77b&profile_id=175", "video_name": "adidas-loop-tunnel", "src_width": 1920, "src_height": 1280, "width_columns": 5, "left_columns": 3, "top_offset": 0, "z_index": 2 } }, { "type": "image", "data": { "src": "img/projects/loop/mobile/adidas-loop-tunnel-4-mobile.jpg", "src_width": 1680, "src_height": 1080, "width_columns": 5, "left_columns": 0, "top_offset": -60 } }, { "type": "headline", "data": { "title": "Guests Enter The Circle", "body": "The 200 guests now enter a circular space with three layers of 360° suspended projection surfaces creating a layering of visuals. Custom 360° audio was designed and synced to the video that’s playing.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/loop/mobile/adidas-circle-1-mobile.jpg", "src_width": 1400, "src_height": 875, "width_columns": 8, "left_columns": 0, "top_offset": 120 } }, { "type": "text", "data": { "title": "VIDEO CONTENT", "body": "While guests waited for the countdown to end before speakers came on-stage, ambient graphics, messaging, branding and video content set the scene for what was to come. Taking advantage of transparency within the middle projection surface allowed physical layering opportunities with how the video interacts together.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/loop/mobile/adidas-circle-2-mobile.jpg", "src_width": 1400, "src_height": 620, "width_columns": 8, "left_columns": 0, "top_offset": 120 } }, { "type": "videoloop", "data": { "vimeo_id": "341749721", "vimeo_video_url": "https://player.vimeo.com/external/341749721.hd.mp4?s=65131452a783edea750ccf6f43a7cfb8136ecadf&profile_id=175", "video_name": "adidas-loop-materials", "src_width": 1280, "src_height": 720, "width_columns": 8, "left_columns": 0, "top_offset": 120 } }, { "type": "text", "data": { "title": "VIDEO EFFECTS", "body": "All video footage was treated and edited in ways which portrayed the product concept of a continuous loop. Techniques such as repetition and frame delays are shown below.", "top_offset": 120 } }, { "type": "videoloop", "data": { "vimeo_id": "341762617", "vimeo_video_url": "https://player.vimeo.com/external/341762617.hd.mp4?s=c0a6af9172146c565c72c3308e82aae0a101d655&profile_id=175", "video_name": "adias-loop-pre-speech", "src_width": 1280, "src_height": 720, "width_columns": 8, "left_columns": 0, "top_offset": 120 } }, { "type": "headline", "data": { "title": "Keynote Speeches", "body": "Willow Smith partnered with adidas and Futurecraft.Loop, speaking first on stage before top adidas spokespeople revealed the product and explained the thinking and work that went into its design.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/loop/mobile/adidas-loop-speeches-1-mobile.jpg", "src_width": 1400, "src_height": 875, "width_columns": 8, "left_columns": 0, "top_offset": 120 } }, { "type": "text", "data": { "title": "THE SPEAKERS", "body": "Eric Liedtke, CMO at adidas revealed the physical shoe product on stage before Paul Gaudio, adidas’ Global Creative Director discussed Futurecraft and the work that went into creating a fully recyclable product. Each topic in the speeches contained custom video content displayed on all surfaces that was switched in real-time via Resn direction.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/loop/mobile/adidas-loop-speeches-2-mobile.jpg", "src_width": 1400, "src_height": 875, "width_columns": 8, "left_columns": 0, "top_offset": 120 } }, { "type": "text", "data": { "title": "ANIMATED BACKDROPS", "body": "Large scale animated backdrops were projected behind the speakers using a mixture of photography and 3D assets. Various techniques such as that shown below were used to create subtle movement on the imagery.", "top_offset": 120 } }, { "type": "videoloop", "data": { "vimeo_id": "341762603", "vimeo_video_url": "https://player.vimeo.com/external/341762603.hd.mp4?s=dd1f6960c9b29d6781cd1a858dc42d555f22972d&profile_id=169", "video_name": "adidas-loop-pixelstretch", "src_width": 1280, "src_height": 720, "width_columns": 8, "left_columns": 0, "top_offset": 120 } }, { "type": "headline", "data": { "title": "Shoe Reveal & Physical Displays", "body": "After the speeches concluded, 200 pairs of shoes suspended in the ceiling were lowered to the ground in a surprise moment. Guests were then invited to meet and talk with adidas designers who worked on the product and explore physical materials and prototype displays.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/loop/mobile/adidas-loop-displays-1-mobile.jpg", "src_width": 1400, "src_height": 875, "width_columns": 8, "left_columns": 0, "top_offset": 120 } }, { "type": "text", "data": { "title": "BAGS & DISPLAYS", "body": "Each bag was pre-filled with the guests specific shoe sizes and were located via a number from 1-200. Multiple stations around the space contained a variety of physical TPU materials to explore that showcased different stages of the production process. Video content was also created as a backdrop for these stations to provide deeper information.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/loop/mobile/adidas-loop-displays-2-mobile.jpg", "src_width": 1200, "src_height": 750, "width_columns": 6, "left_columns": 0, "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/loop/mobile/adidas-loop-displays-3-mobile.jpg", "src_width": 1200, "src_height": 750, "width_columns": 4, "left_columns": 4, "top_offset": -80 } }, { "type": "text", "data": { "title": "VISUALISING THE PROCESS", "body": "3D animations visualised the different steps in the manufacturing process, showing how the TPU material changes form.", "top_offset": 120 } }, { "type": "videoloop", "data": { "vimeo_id": "341749737", "vimeo_video_url": "https://player.vimeo.com/external/341749737.hd.mp4?s=1ad9db4aa24f9e572ae6a9468254335adccd4145&profile_id=169", "video_name": "adidas-loop-process", "src_width": 1280, "src_height": 720, "width_columns": 8, "left_columns": 0, "top_offset": 120 } }, { "type": "headline", "data": { "title": "Resn Content Creation", "body": "Resn handled the design, animation, editing and asset management for all projected video content in-house. A significant amount of content was created to play for the two hour event duration with the very high resolution video split across multiple projectors.", "top_offset": 120 } }, { "type": "videoloop", "data": { "vimeo_id": "341749708", "vimeo_video_url": "https://player.vimeo.com/external/341749708.hd.mp4?s=7952d012161216059236feffdbbcd65faebad182&profile_id=174", "video_name": "adidas-loop-particleshoe", "src_width": 1280, "src_height": 720, "width_columns": 8, "left_columns": 0, "top_offset": 120 } }, { "type": "text", "data": { "title": "A LOOP FROM PHYSICAL TO WEB", "body": "Each pair of shoes came with a QR code printed on the tongue to allow guests to link out to the web hub. From here they explored deeper information about the technology and product. The site was designed and built by Resn — https://www.adidas.co.uk/futurecraft", "top_offset": 120 } } ] }, { "route": "bandito", "title": "Banditø", "enabled": true, "featured": false, "description": "", "client": "Spotify", "date": "Dec, 2018", "role": "Design, Development, Animation, UX, UI", "platforms": "", "url": "", "poster": "img/projects/bandito/bandito-poster.jpg", "poster_m": "img/projects/bandito/mobile/bandito-poster-m.jpg", "categories": [ "animation" ], "awards": [], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "307030380", "vimeo_video_url": "https://player.vimeo.com/external/307030380.hd.mp4?s=0e607d1591cc581a84684d1ea8448321c5dcc85d&profile_id=169", "video_name": "bandito-experience", "video_poster": "img/projects/bandito/mobile/bandito-video-m.jpg", "src_width": 1280, "src_height": 720 } }, { "type": "image", "data": { "src": "img/projects/bandito/mobile/bandito-1-m.jpg", "src_width": 1200, "src_height": 675 } }, { "type": "headline", "data": { "title": "Immersive Journey", "body": "Travel through a world built out of moody environments, cryptic graphics and hidden messages.", "top_offset": 120 } }, { "type": "text", "data": { "title": "Dema", "body": "To create the metaphorical city of Dema in 3D we leveraged the brutalist architectiure taken from the life action music video, recreating a perfect virtual version.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/bandito/mobile/bandito-2-m.jpg", "src_width": 1200, "src_height": 675 } }, { "type": "image", "data": { "src": "img/projects/bandito/mobile/bandito-3-m.jpg", "src_width": 1200, "src_height": 675 } }, { "type": "text", "data": { "title": "Plains", "body": "Within the plains are a series of interactive “portals” that are connected to similar wide open landscapes. This creates a maze where the user feels the dichotomy of being lost while at the same time feeling in control of the path they choose.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/bandito/mobile/bandito-5-m.jpg", "src_width": 1200, "src_height": 675 } }, { "type": "image", "data": { "src": "img/projects/bandito/mobile/bandito-6-m.jpg", "src_width": 1200, "src_height": 675 } }, { "type": "text", "data": { "title": "Banditøs", "body": "We created interactive silhouettes giving users the power to uncover the iconic floral patterns and yellow tape associated with the Banditø uniform. This simple encounter revealed the mysterious shadows to be friends not foes.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/bandito/mobile/bandito-7-m.jpg", "src_width": 1200, "src_height": 675 } }, { "type": "image", "data": { "src": "img/projects/bandito/mobile/bandito-8-m.jpg", "src_width": 1200, "src_height": 675 } }, { "type": "text", "data": { "title": "Hills", "body": "A vast open landscape with hills and plateaus that users can decide to manipulate, controlling the landform by clicking anywhere to create or destroy hills. Like the Plains, this scene offers a series of “portals” that are connected to similar landscapes.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/bandito/mobile/bandito-9-m.jpg", "src_width": 1200, "src_height": 675 } }, { "type": "image", "data": { "src": "img/projects/bandito/mobile/bandito-10-m.jpg", "src_width": 1200, "src_height": 675 } }, { "type": "text", "data": { "title": "Gorge", "body": "At the end of the final chapter, the Gorge, users discover the Banditø camp. At this point full 360 degrees control of the camera becomes available, representing the free mind. The user continues past the camp and onwards down a neverending pathway.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/bandito/mobile/bandito-11-m.jpg", "src_width": 1200, "src_height": 675 } }, { "type": "image", "data": { "src": "img/projects/bandito/mobile/bandito-12-m.jpg", "src_width": 1200, "src_height": 675 } }, { "type": "text", "data": { "title": "Fan Share", "body": "Fans received a uniquely generated Banditø badge by connecting with their Spotify account.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/bandito/mobile/bandito-13-m.jpg", "src_width": 1200, "src_height": 675 } }, { "type": "image", "data": { "src": "img/projects/bandito/mobile/bandito-14-m.jpg", "src_width": 1200, "src_height": 675 } }, { "type": "text", "data": { "title": "Encrypted Symbols", "body": "Lots of metaphors and cryptic graphics were incorporated into the experience. To satisfy the curiosity of TØP’s very dedicated fanbase we placed five hidden symbols throughout the experience. Since the release of the album the meanings of these five symbols have been a mystery to the fans. Upon finding the symbols the user gathers “secret” documents that explain the meaning of each.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/bandito/mobile/bandito-15-m.png", "src_width": 1025, "src_height": 181 } } ] }, { "route": "hellboy", "menutitle": "", "enabled": true, "featured": false, "globaltitle": "", "title": "Hellboy – Join the B.P.R.D.", "description": "Join Hellboy at the B.P.R.D. Browse the agency’s secret archives and have an A.I.-powered conversation with the real Hellboy.", "client": "Lionsgate", "date": "Apr, 2019", "role": "Creative and Production", "platforms": "", "url": "", "poster": "img/projects/hellboy/00_hellboy_desktop_thumbnail.jpg", "poster_m": "img/projects/hellboy/mobile/00_Hellboy_Thumbnail.jpg", "categories": [ "animation" ], "awards": [ { "type": "fwa-sotd", "name": "FWA of the Day" }, { "type": "awwwards-sotd", "name": "Site of the Day" } ], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "341679778", "vimeo_video_url": "https://player.vimeo.com/external/341679778.hd.mp4?s=fa37bd0339faf6952213630772d9d1ec600c4c35&profile_id=175", "video_name": "Hellboy_Case_Study_Final", "video_poster": "img/projects/hellboy/01_hellboy_video_thumbnail.jpg", "src_width": 1280, "src_height": 720, "top_offset": 120 } }, { "type": "headline", "data": { "title": "Hellboy Wants You!", "body": "Resn partnered with Lionsgate to create a unique mobile promotion for the Hellboy film, by recruiting you into Hellboy’s secret agency.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/hellboy/mobile/02_Hellboy_Scamp_Mobile.jpg", "src_width": 750, "src_height": 1334 } }, { "type": "image", "data": { "src": "img/projects/hellboy/mobile/03_Hellboy_Scamp_Mobile.jpg", "src_width": 374, "src_height": 667 } }, { "type": "text", "data": { "title": "Got What It Takes?", "body": "When you apply for a job, Hellboy calls to interview you. The conversation is powered by an A.l. engine with voice-acting by Hellboy actor David Harbour.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/hellboy/mobile/04_Hellboy_Scamp_Mobile.jpg", "src_width": 374, "src_height": 667 } }, { "type": "image", "data": { "src": "img/projects/hellboy/mobile/05_Hellboy_Scamp_Mobile.jpg", "src_width": 374, "src_height": 667 } }, { "type": "text", "data": { "title": "B.P.R.D. Archive", "body": "Browse selected dossiers from the B.P.R.D. archive, including personnel files of characters from the film.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/hellboy/mobile/06_Hellboy_Scamp_Mobile.jpg", "src_width": 374, "src_height": 667 } }, { "type": "image", "data": { "src": "img/projects/hellboy/mobile/07_Hellboy_Scamp_Mobile.jpg", "src_width": 374, "src_height": 667 } }, { "type": "text", "data": { "title": "Operating System", "body": "Inspired by intelligence documents from the 1950s, the archive looks like a clandestine operating system lost in time. Sensitive material has been carefully redacted—until you land the job.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/hellboy/mobile/08_Hellboy_Scamp_Mobile_Side.png", "src_width": 750, "src_height": 643 } }, { "type": "text", "data": { "title": "Give ‘Em Hell", "body": "The site launched on ‘Hellboy Day, celebrating the 25th Anniversary of the first Hellboy comic. The experience received the coveted seal of approval from the hardcore Hellboy fan base and introduced brand new fans to the Hellboy universe.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/hellboy/mobile/10_Hellboy_Scamp_Mobile.jpg", "src_width": 900, "src_height": 900 } } ] }, { "route": "alphaedge", "title": "adidas Alphaedge4D Event", "enabled": true, "featured": false, "description": "The AlphaEdge4D launch event in Tokyo, Shanghai, and New York was a multi-purpose space to introduce the AlphaEdge4D shoe, explain it’s lattice designed mid-sole through interactive installations, and showcase their technology via educational videos, live interviews and print collateral.", "client": "adidas", "date": "Nov, 2018", "role": "Creative, Production Partner, Fabrication Management", "url": "", "poster": "img/projects/alphaedge/mobile/alphaedge-poster-m.jpg", "poster_m": "img/projects/alphaedge/mobile/alphaedge-poster-m.jpg", "categories": [ "activation" ], "awards": [], "items": [ { "type": "videoloop", "data": { "vimeo_id": "306773174", "vimeo_video_url": "https://player.vimeo.com/external/306773174.hd.mp4?s=5797e3b16312314c759b0411e763f67529ecd7ae&profile_id=169", "video_name": "adidas alphaedge", "src_width": 1920, "src_height": 1080 } }, { "type": "text", "data": { "title": "Floorplan", "body": "The overall floor plan follows a rectangular shape with modular areas. Guests enter from the bottom and move their way up to the end studio space.", "top_offset": 0 } }, { "type": "image", "data": { "src": "img/projects/alphaedge/mobile/alphaedge_m_01.png", "src_width": 1398, "src_height": 1365 } }, { "type": "image", "data": { "src": "img/projects/alphaedge/mobile/alphaedge_m_02.jpg", "src_width": 1400, "src_height": 786 } }, { "type": "headline", "data": { "title": "Data & Design", "body": "The Data and Design section showcased content related to data capture, sports science and the design of the lattice mid-sole structure and it’s different densities.", "top_offset": 0 } }, { "type": "videoloop", "data": { "vimeo_id": "306776100", "vimeo_video_url": "https://player.vimeo.com/external/306776100.hd.mp4?s=72e04bb5b7cba2952268fd6aeef0b5eb6db5a4dd&profile_id=175", "video_name": "adidas alphaedge4d text animation 04", "src_width": 1920, "src_height": 1080 } }, { "type": "videoloop", "data": { "vimeo_id": "305955278", "vimeo_video_url": "https://player.vimeo.com/external/305955278.hd.mp4?s=c6bd2e5169542e9e1ea85a924d028cc9a0f9adc5&profile_id=175", "video_name": "adidas alphaedge4d text animation 03", "src_width": 1920, "src_height": 1080 } }, { "type": "image", "data": { "src": "img/projects/alphaedge/mobile/alphaedge_m_04.jpg", "src_width": 1400, "src_height": 786 } }, { "type": "image", "data": { "src": "img/projects/alphaedge/mobile/alphaedge_m_03.jpg", "src_width": 1400, "src_height": 786 } }, { "type": "text", "data": { "title": "Lattice Models", "body": "Physical models were created to explain pressure data and the lattice support structure. These sat next to the final midsole to show the design progression.", "top_offset": 20 } }, { "type": "image", "data": { "src": "img/projects/alphaedge/mobile/alphaedge_m_05.jpg", "src_width": 1400, "src_height": 848 } }, { "type": "image", "data": { "src": "img/projects/alphaedge/mobile/alphaedge_m_08_04.jpg", "src_width": 1400, "src_height": 786 } }, { "type": "image", "data": { "src": "img/projects/alphaedge/mobile/alphaedge_m_08_06.jpg", "src_width": 1400, "src_height": 786 } }, { "type": "image", "data": { "src": "img/projects/alphaedge/mobile/alphaedge_m_09.jpg", "src_width": 1400, "src_height": 1984 } }, { "type": "headline", "data": { "title": "Midsole Scanner", "body": "A cutting edge physical and digital interactive installation allowed guests to explore the AlphaEdge4D midsole through 'x-ray' vision.", "top_offset": 0 } }, { "type": "image", "data": { "src": "img/projects/alphaedge/mobile/alphaedge_m_10.jpg", "src_width": 1400, "src_height": 848 } }, { "type": "text", "data": { "title": "Screen Interface", "body": "The screen in front of the physical scanner box reacts in real time to the handle movement. By moving the physical handles back and forth, a screen in-front of them scrubs through hundreds of real CT scan images of the lattice interior.", "top_offset": 20 } }, { "type": "videoloop", "data": { "vimeo_id": "305977182", "vimeo_video_url": "https://player.vimeo.com/external/305977182.hd.mp4?s=da6c4d7583717c908135ef48d431a73c62019f41&profile_id=169", "video_name": "adidas alphaedge midsole scanner", "src_width": 1920, "src_height": 1080 } }, { "type": "image", "data": { "src": "img/projects/alphaedge/mobile/alphaedge_m_11.jpg", "src_width": 1400, "src_height": 848 } }, { "type": "image", "data": { "src": "img/projects/alphaedge/mobile/alphaedge_m_14.jpg", "src_width": 1400, "src_height": 848 } }, { "type": "headline", "data": { "title": "LED Interactive Wall", "body": "The LED wall was a large scale multiple-user experience, giving the guests the ability to explore the lattice and it’s energy return in a fun, engaging, insta-worthy way.", "top_offset": 0 } }, { "type": "videoloop", "data": { "vimeo_id": "306792615", "vimeo_video_url": "https://player.vimeo.com/external/306792615.hd.mp4?s=a3b4ea2ad4c76e0708721ac511aa9bc729465671&profile_id=175", "video_name": "adidas alphaedge4d LED wall", "src_width": 1920, "src_height": 1080 } }, { "type": "text", "data": { "title": "Lattice Design", "body": "Using body tracking, the visitors position influences the visuals (a representation of the midsole's design and behaviour) allowing full control of a lattice mesh and the ability to experience 'Controlled Energy'.", "top_offset": 20 } }, { "type": "image", "data": { "src": "img/projects/alphaedge/mobile/alphaedge_m_13.jpg", "src_width": 1400, "src_height": 848 } }, { "type": "image", "data": { "src": "img/projects/alphaedge/mobile/alphaedge_m_12.jpg", "src_width": 1400, "src_height": 848 } }, { "type": "headline", "data": { "title": "Plinth", "body": "Our event plinths featured a triangular white metal frame with clear perspex sides and adidas / AlphaEdge branding. Underneath the green base plate was a set of LED lights.", "top_offset": 0 } }, { "type": "image", "data": { "src": "img/projects/alphaedge/mobile/alphaedge_m_15.jpg", "src_width": 1400, "src_height": 848 } }, { "type": "image", "data": { "src": "img/projects/alphaedge/mobile/alphaedge_m_17.png", "src_width": 1400, "src_height": 848 } } ] }, { "route": "airbnb-more-of-less", "menutitle": "", "enabled": true, "featured": false, "globaltitle": "", "title": "Airbnb - More of Less", "description": "Airbnb - More of Less invites you to visit a traditional rural village where time-honoured practices are cultivated for the next generation.", "client": "Anomaly Shanghai + Airbnb China", "date": "Dec, 2018", "role": "Creative and Production Partner", "platforms": "", "url": "", "poster": "img/projects/airbnb/00_Airbnb_Thumbnail_Desktop.jpg", "poster_m": "img/projects/airbnb/mobile/00_Airbnb_Thumbnail_Mobile.jpg", "categories": [ "animation" ], "awards": [ { "type": "fwa-sotd", "name": "FWA of the Day" }, { "type": "awwwards-sotd", "name": "Site of the Day" }, { "type": "awwwards-sotd", "name": "Developer Award" } ], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "344432866", "vimeo_video_url": "https://player.vimeo.com/external/344432866.hd.mp4?s=9a321704066ae4e11689614e060b90aef531433a&profile_id=175", "video_name": "Airbnb_Case_Study_Video", "video_poster": "img/projects/airbnb/mobile/01_Airbnb_Video_Thumbnail_Mobile.jpg", "src_width": 1280, "src_height": 720, "top_offset": 120 } }, { "type": "headline", "data": { "title": "The Challenge", "body": "Our challenge was to recreate the sights, sounds and ambience of a rural Chinese village on a mobile phone as authentically as possible.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/airbnb/mobile/02_Airbnb_Scamp_Mobile.jpg", "src_width": 374, "src_height": 667 } }, { "type": "image", "data": { "src": "img/projects/airbnb/mobile/03_Airbnb_Scamp_Mobile.jpg", "src_width": 374, "src_height": 667 } }, { "type": "text", "data": { "title": "Bringing a Village to Life", "body": "We visited a traditional rural village to get a sense of the day-to-day life of the local community. We used our first-hand knowledge to generate five storylines that embodied essential aspects of village life.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/airbnb/mobile/04_Airbnb_Scamp_Mobile.jpg", "src_width": 374, "src_height": 667 } }, { "type": "image", "data": { "src": "img/projects/airbnb/mobile/05_Airbnb_Scamp_Mobile.jpg", "src_width": 374, "src_height": 667 } }, { "type": "text", "data": { "title": "Art Direction", "body": "We crafted a design language that combined traditional and contemporary watercolour painting and brought the village to life with over 300 hand-painted scenes, animated in a 3D environment. ", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/airbnb/mobile/06_Airbnb_Scamp_Mobile_Side.png", "src_width": 750, "src_height": 643 } }, { "type": "text", "data": { "title": "Familiar UX", "body": "The UX needed to be easy and familiar, so we used one simple mechanic: the scroll. The familiarity of the UX allowed the user to focus exclusively on the beautiful imagery and story, creating a captivating mobile experience.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/airbnb/mobile/08_Airbnb_Scamp_Mobile_Side.png", "src_width": 750, "src_height": 643 } } ] }, { "route": "kekubian-assassin", "title": "Kekubian Assassin", "enabled": true, "featured": false, "description": "A digital companion piece to Terence Nance’s new HBO show, Random Acts of Flyness. With only one hand, this mobile first-person shooter has you helping Najja fend off the nonsense by throwing shade at anyone trying to steal her joy.", "client": "HBO", "date": "Aug, 2018", "role": "Design, Development, Animation, UX, UI", "url": "", "poster": "img/projects/kekubian-assassin/kekubian-poster.jpg", "poster_m": "img/projects/kekubian-assassin/mobile/kekubian-poster-m.jpg", "categories": [ "animation", "games" ], "awards": [ { "type": "fwa-sotd", "name": "FWA of the Day" }, { "type": "awwwards-sotd", "name": "Site of the Day" } ], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "294707793", "vimeo_video_url": "https://player.vimeo.com/external/294707793.hd.mp4?s=4820fc1f7422689aecc6fe9c6420069d7a8272dd&profile_id=175", "video_name": "kekubian-assassin", "video_poster": "img/projects/kekubian-assassin/mobile/kekubian-video-m.jpg", "src_width": 1280, "src_height": 720, "width_columns": 8, "left_columns": 0 } }, { "type": "text", "data": { "title": "Gameplay", "body": "This violence-adverse first-person shooter has you firing off scowls, not guns, at any agressive NPC's you encounter. With a smart, modular world-building architecture one gaming experience is never the same.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/kekubian-assassin/mobile/kekubian-1.jpg", "src_width": 374, "src_height": 667, "width_columns": 8, "left_columns": 0, "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/kekubian-assassin/mobile/kekubian-2.jpg", "src_width": 374, "src_height": 667, "width_columns": 8, "left_columns": 0, "top_offset": 120 } }, { "type": "headline", "data": { "title": "Creating Worlds", "body": "The game is an endless runner taking place in four environments in Brooklyn: Street, Dive bar, Park, and Bodega. All environmental objects were sculpted in-house and positioned using the world-building tool.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/kekubian-assassin/mobile/kekubian-3.jpg", "src_width": 374, "src_height": 667, "width_columns": 8, "left_columns": 0, "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/kekubian-assassin/mobile/kekubian-4.jpg", "src_width": 374, "src_height": 667, "width_columns": 8, "left_columns": 0, "top_offset": 120 } }, { "type": "text", "data": { "title": "Environments", "body": "All the environments created were done in collaboration with the showrunner and had one foot in the reality of Brooklyn while the other was drenched in the hyper-fantasy of a Neo-Egyptian mythology.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/kekubian-assassin/mobile/kekubian-5.jpg", "src_width": 374, "src_height": 667, "width_columns": 8, "left_columns": 0, "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/kekubian-assassin/mobile/kekubian-6.jpg", "src_width": 374, "src_height": 667, "width_columns": 8, "left_columns": 0, "top_offset": 120 } } ] }, { "route": "bcfnz", "menutitle": "", "enabled": true, "featured": false, "globaltitle": "", "title": "Time for a Mammogram", "description": "Real families affected by breast cancer share their stories in an audio-animated journey that reminds us a mammogram gives a better chance of survival.", "client": "Colenso BBDO + Breast Cancer Foundation", "date": "Oct, 2018", "role": "Creative and Production Partner", "platforms": "", "url": "http://bcfnz.presents.resn.global/", "poster": "img/projects/bcfnz/00_BCFNZ_Thumbnail.jpg", "poster_m": "img/projects/bcfnz/mobile/00_BCFNZ_Thumbnail_Mobile.jpg", "categories": [ "motion" ], "awards": [ { "type": "fwa-sotd", "name": "FWA of the Day" }, { "type": "awwwards-sotd", "name": "Site of the Day" } ], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "344434875", "vimeo_video_url": "https://player.vimeo.com/external/344434875.hd.mp4?s=11d53f5f8b872da2fe84289d353ddb6071f4cb4b&profile_id=174", "video_name": "Case_Study_Video", "video_poster": "img/projects/bcfnz/mobile/01_BCFNZ_Thumbnail_Video_Mobile.jpg", "src_width": 1280, "src_height": 720, "top_offset": 120 } }, { "type": "headline", "data": { "title": "The Challenge", "body": "Our challenge was to create a thoughtful and compelling digital experience that shows how the effects of breast cancer spread through the community.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/bcfnz/mobile/02_BCFNZ_Scamp_Mobile.jpg", "src_width": 750, "src_height": 1334 } }, { "type": "image", "data": { "src": "img/projects/bcfnz/mobile/03_BCFNZ_Scamp_Mobile.jpg", "src_width": 750, "src_height": 1334 } }, { "type": "text", "data": { "title": "We’re all Affected", "body": "Using interviews with real people affected by breast cancer, we paired audio clips with animations of dividing cells. New cells, representing family and friends, split from the original, representing the cancer sufferer.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/bcfnz/mobile/04_BCFNZ_Scamp_Mobile_Side.png", "src_width": 750, "src_height": 643 } }, { "type": "text", "data": { "title": "Carefully Considered Design", "body": "The experience was built on a two-tone colour palette with clean, evocative shapes and simple interactions. The design brought the stories into sharp focus while stressing the importance of getting a mammogram.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/bcfnz/mobile/05_BCFNZ_Scamp_Mobile_Side.png", "src_width": 750, "src_height": 643 } }, { "type": "text", "data": { "title": "Results:", "body": "The campaign reached 79% of all Kiwis. During October Awareness Month, more women booked a mammogram than ever before, making it New Zealand’s most successful mammogram awareness drive.", "top_offset": 120 } } ] }, { "route": "speedfactory-activation", "title": "adidas Speedfactory Activation", "enabled": true, "featured": false, "description": "A globally touring activation showcasing adidas' high-tech, data-driven footwear and its manufacturing process.", "client": "adidas", "date": "Oct 2017", "role": "Creative & Production Partner", "url": "", "poster": "img/projects/speedfactory-activation/speedfactory_activation-poster.jpg", "poster_m": "img/projects/speedfactory-activation/mobile/speedfactory_activation-poster-m.jpg", "categories": [ "activation", "content" ], "awards": [], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "266452443", "vimeo_video_url": "https://player.vimeo.com/external/266452443.hd.mp4?s=5bbc21b7a9ee9158ce8dc9401e410f5788b1aef7&profile_id=175", "video_name": "speedfactory_activation", "video_poster": "img/projects/speedfactory-activation/speedfactory_activation-video.jpg", "src_width": 1280, "src_height": 720 } }, { "type": "headline", "data": { "title": "Speedfactory", "body": "Speedfactory is an innovative concept from adidas, a manufacturing revolution where high speed customised footwear can be produced in more localised factories in a largely automated robotic driven process.", "top_offset": 120 } }, { "type": "text", "data": { "title": "AM4", "body": "Trialling this process with unique designs made for six key cities, the AM4 shoe is the showpiece of the activation.", "top_offset": 0 } }, { "type": "image", "data": { "src": "img/projects/speedfactory-activation/mobile/sf-landing.jpg", "src_width": 1400, "src_height": 820 } }, { "type": "headline", "data": { "title": "The Brief", "body": "adidas approached Resn with the brief to create an event space, housing multiple installations that spoke to the three key messaging aspects of Speedfactory.", "top_offset": 0 } }, { "type": "text", "data": { "title": "Innovation", "body": "adidas' cutting-edge manufacturing, data collection/analysis, and production techniques are second to none. Our installs should use similar innovative data collection practices and hardware.", "top_offset": 20 } }, { "type": "image", "data": { "src": "img/projects/speedfactory-activation/mobile/sf-brief-1.jpg", "src_width": 1397, "src_height": 820 } }, { "type": "text", "data": { "title": "Co-Creation", "body": "All Speedfactory products are borne from real athlete captured data. This meant all of our interactives should extrapolate the visitors’ data in some manner and produce something different in combination with adidas collateral.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/speedfactory-activation/mobile/sf-brief-2.jpg", "src_width": 1400, "src_height": 820 } }, { "type": "text", "data": { "title": "Speed", "body": "These products are produced at least 20x faster than conventional production and getting faster! All of our interactive content would be either visualised immediately or downloaded to their device within seconds.", "top_offset": 60 } }, { "type": "headline", "data": { "title": "Sign Up / Create / Save: The Mobile App", "body": "The lynchpin to the activation process was the web app we created for all visitors to log in to.", "top_offset": 120 } }, { "type": "text", "data": { "title": "Personal Barcode", "body": "Once they did, a unique barcode was created for them - a tool by which they could activate any of the installations inside, enter digital queues, create something and then it would automatically download that content to their wallet within seconds.", "top_offset": 60 } }, { "type": "image", "data": { "src": "img/projects/speedfactory-activation/mobile/sf-mobile-1.jpg", "src_width": 1400, "src_height": 820 } }, { "type": "image", "data": { "src": "img/projects/speedfactory-activation/mobile/sf-mobile-3.jpg", "src_width": 1400, "src_height": 820 } }, { "type": "headline", "data": { "title": "Zone One: The Kinect Entrance", "body": "A playful digital mirror using Kinects (a Speedfactory-used technology) illustrates how truly painless it is for your physical data to be captured. A wall of screens visualises your physical presence, progressing from simple raw data through to a more human form.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/speedfactory-activation/mobile/sf-kinect-1.jpg", "src_width": 1400, "src_height": 820 } }, { "type": "headline", "data": { "title": "Zone Two: Face Scan Booths", "body": "Three separate booths, each with two DSLRs and a touchscreen. Once scanned in, the creator was invited to take a picture of themselves.", "top_offset": 120 } }, { "type": "text", "data": { "title": "Face Scan Booths", "body": "Within seconds, we had tracked their facial features and incorporated their image into three unique pieces of adidas branded content. We also integrated user-submitted personal data as well as data specific to that location.", "top_offset": 60 } }, { "type": "image", "data": { "src": "img/projects/speedfactory-activation/mobile/sf-photobooth-1.jpg", "src_width": 1400, "src_height": 820 } }, { "type": "headline", "data": { "title": "Zone Three: Foot Scanners", "body": "Via a custom Resn-made iPad controller we could control two scanners at one time.", "top_offset": 120 } }, { "type": "videoloop", "data": { "vimeo_id": "265339973", "vimeo_video_url": "https://player.vimeo.com/external/265339973.hd.mp4?s=1335006d04661348fcdc9d64da655a07f3f97825&profile_id=175", "video_name": "sf_footscan_loop", "src_width": 1280, "src_height": 720 } }, { "type": "text", "data": { "title": "Foot Scanners", "body": "Multiple lasers would register each contour of the creators’ feet and send us the correct data points to make a fully accurate 3D model, while also providing exact dimensions of their foot. A singular size comparison takeaway was created for each visitor.", "top_offset": 60 } }, { "type": "headline", "data": { "title": "Zone Four: The Run Test (Treadmill)", "body": "The centrepiece of the activation and the accumulation of all messaging pillars, here the creator was captured running on a treadmill (wearing the new product) by a Kinect and several DSLRs.", "top_offset": 120 } }, { "type": "videoloop", "data": { "vimeo_id": "265340154", "vimeo_video_url": "https://player.vimeo.com/external/265340154.hd.mp4?s=8e286d97490a591816ed02cc7f22ca7afe721df3&profile_id=175", "video_name": "sf_running_test", "src_width": 1280, "src_height": 720 } }, { "type": "text", "data": { "title": "Run Test Output", "body": "A couple of minutes later a unique video was sent to their app, with their actual running data, skeletal tracking, and adidas branding baked in. As demand was higher with only one person allowed in the room at a time, Resn created a digital queuing system that notified the creator when it was their turn removing the need for a physical line.", "top_offset": 60 } }, { "type": "image", "data": { "src": "img/projects/speedfactory-activation/mobile/sf-treadmill-1.jpg", "src_width": 1400, "src_height": 820 } }, { "type": "headline", "data": { "title": "Zone Five: The AM4 Showcase (Plinths)", "body": "The story about the AM4's design for each city was pretty rich. Product benefits were different for each key city - patch placement was dictated by runner data from that particular location - even the colours chosen reflected key attributes of the environment.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/speedfactory-activation/mobile/sf-am4-1.jpg", "src_width": 1400, "src_height": 820 } }, { "type": "text", "data": { "title": "AM4 Showcase", "body": "In this section, we explored all those influences, with assets pasted, hung or mounted throughout and showed the products themselves centre stage, alongside their other city counterparts.", "top_offset": 60 } }, { "type": "headline", "data": { "title": "City to City Evolution", "body": "adidas wanted the activation to seem like it was in constant flux—Always in Beta.", "top_offset": 120 } }, { "type": "text", "data": { "title": "Always in Beta", "body": "On the exterior and interior, our design leveraged a skeletal like scaffold system (one that is used in the Speedfactory plant) which we accented with Plexi and lights in the same palette as the shoe for that city. In the AM4 section itself, we curated some of the previous city content and left that in place - a living document of the past iterations against the new cities hero shoe.", "top_offset": 60 } }, { "type": "mask", "data": { "media": [ { "src": "img/projects/speedfactory-activation/sf-city-ldn-2.jpg", "description": "" }, { "src": "img/projects/speedfactory-activation/sf-city-par-2.jpg", "description": "" } ], "type": "image", "direction": "vertical", "src_width": 1700, "src_height": 1000, "top_offset": 120 } }, { "type": "mask", "data": { "media": [ { "src": "img/projects/speedfactory-activation/sf-city-ldn-1.jpg", "description": "" }, { "src": "img/projects/speedfactory-activation/sf-city-par-1.jpg", "description": "" } ], "type": "image", "direction": "vertical", "src_width": 1700, "src_height": 1000, "top_offset": 120 } } ] }, { "route": "kfc-chickendales", "menutitle": "", "enabled": true, "featured": false, "globaltitle": "", "title": "KFC Chickendales", "description": "KFC Chickendales creates a personalised video for your mother on Mother’s Day starring a muscular Colonel Sanders and the world-famous Chippendales dancers.", "client": "Wieden+Kennedy + KFC", "date": "May, 2019", "role": "Production partner", "platforms": "", "url": "", "poster": "img/projects/kfc-chickendales/00_KFC_Thumbnail_Desktop.jpg", "poster_m": "img/projects/kfc-chickendales/mobile/00_KFC_Thumbnail_Mobile.jpg", "categories": [ ], "awards": [], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "341459141", "vimeo_video_url": "https://player.vimeo.com/external/341459141.hd.mp4?s=f9d71d8db563da3440ed1dffe1df475461e6e5e6&profile_id=175", "video_name": "00_KFC_Chickendales_Case_Study", "video_poster": "img/projects/kfc-chickendales/mobile/01_KFC_Video_Thumbnail_Mobile.jpg", "src_width": 1280, "src_height": 720, "top_offset": 120 } }, { "type": "headline", "data": { "title": "The Challenge", "body": "Wieden+Kennedy wanted a shareable video experience that could be customized for every mother.", "top_offset": 120 } }, { "type": "text", "data": { "title": "The Right Ingredients", "body": "The project needed a scalable digital solution that could quickly create a dynamically-edited and rendered video. Resn’s recently enhanced interactive video platform, Cake, provided just the right tools.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/kfc-chickendales/mobile/02_KFC_Introduction_Mobile.jpg", "src_width": 1600, "src_height": 900, "top_offset": 120 } }, { "type": "text", "data": { "title": "Cake Dynamic", "body": "Cake Dynamic is Cake’s cloud-based rendering and editing tool that integrates a personalised name and location into each video. It receives user information from the custom-built microsite then reorders, sorts, and chooses shots for the final video.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/kfc-chickendales/mobile/03_KFC_Scamp_Mobile_Side.png", "src_width": 750, "src_height": 643 } }, { "type": "image", "data": { "src": "img/projects/kfc-chickendales/mobile/04_KFC_Scamp_Mobile_Side.png", "src_width": 750, "src_height": 643 } }, { "type": "text", "data": { "title": "Variety Pack", "body": "We worked closely with director Kyle Sauer to create a locked edit where alternative shots were equal in length and interchangeable. This provided variation between videos while guaranteeing the edit remained synced to the music.", "top_offset": 120 } }, { "type": "videoloop", "data": { "vimeo_id": "341459108", "vimeo_video_url": "https://player.vimeo.com/external/341459108.hd.mp4?s=b5084d159f4c71ad10981d3fbb1729c95f552545&profile_id=174", "video_name": "07_KFC_Kansas", "src_width": 720, "src_height": 720, "width_columns": 8, "left_columns": 0, "top_offset": 120 } }, { "type": "videoloop", "data": { "vimeo_id": "341459190", "vimeo_video_url": "https://player.vimeo.com/external/341459190.hd.mp4?s=92f1925c0b19cc7349cd372b9baac0dd284b7baa&profile_id=174", "video_name": "06_KFC_Howdy_Elizabeth", "src_width": 720, "src_height": 720, "width_columns": 8, "left_columns": 0, "top_offset": 120 } }, { "type": "text", "data": { "title": "Sharing the Love", "body": "Videos could be shared on Facebook and Twitter or downloaded directly. Users logged over a million sessions and created 300k videos with a peak submission rate of 5.5k videos per minute. I mean, who needs flowers when you have a sexy Colonel Sanders, amirite?", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/kfc-chickendales/mobile/09_KFC_Scamp_Mobile.jpg", "src_width": 375, "src_height": 667 } } ] }, { "route": "nordyportrait", "title": "Nordy Portrait", "enabled": true, "featured": false, "description": "Take your picture and turn it into an illustrated Nordy Portrait for The Nordy Club, Nordstrom's new customer loyalty program.", "client": "Anomaly NY, Nordstrom", "date": "Oct, 2018", "role": "Design, Development, Animation, UX, UI", "url": "", "poster": "img/projects/nordyportrait/mobile/nordyportrait-poster-m.png", "poster_m": "img/projects/nordyportrait/mobile/nordyportrait-poster-m.png", "categories": [ "motion" ], "awards": [], "items": [ { "type": "videoloop", "data": { "vimeo_id": "309432909", "vimeo_video_url": "https://player.vimeo.com/external/309432909.hd.mp4?s=d59706db1909b6d3d2f1cc0e4d219e5b21d59d16&profile_id=169", "video_name": "nordyportrait intro + landing", "src_width": 1920, "src_height": 1080 } }, { "type": "image", "data": { "src": "img/projects/nordyportrait/mobile/nordyportrait_01.jpg", "src_width": 1920, "src_height": 1080 } }, { "type": "text", "data": { "title": "Computer vision based API", "body": "Our Backend API converts user's photos into illustrations. We used a number of different computer vision techniques for the API: 1. Face feature detection for the eyes, eyebrows, nose and mouth. 2. An algorithm to detect the edges of a face. 3. An algorithm to detect eyebrow position, hairline and hair boundaries. 4. An algorithm to detect the neckline.", "top_offset": 0 } }, { "type": "image", "data": { "src": "img/projects/nordyportrait/mobile/nordyportrait_04.jpg", "src_width": 1920, "src_height": 1080 } }, { "type": "image", "data": { "src": "img/projects/nordyportrait/mobile/nordyportrait_03.jpg", "src_width": 1920, "src_height": 1080 } }, { "type": "image", "data": { "src": "img/projects/nordyportrait/mobile/nordyportrait_05.jpg", "src_width": 1920, "src_height": 1080 } }, { "type": "image", "data": { "src": "img/projects/nordyportrait/mobile/nordyportrait_07.jpg", "src_width": 1920, "src_height": 1080 } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/nordyportrait/mobile/nordyportrait_09.jpg", "src_width": 413, "src_height": 736, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/nordyportrait/mobile/nordyportrait_12.jpg", "src_width": 413, "src_height": 736, "mobile_pair": true } }, { "type": "videoloop", "data": { "vimeo_id": "309465310", "vimeo_video_url": "https://player.vimeo.com/external/309465310.hd.mp4?s=c10e1be23de2a70e47d41cbb10ae41b66facc09a&profile_id=175", "video_name": "nordyportrait gallery", "src_width": 1920, "src_height": 1080 } }, { "type": "text", "data": { "title": "Customized sharable content", "body": "We then packaged the content through a custom set-up that generated the correct image and video formats for all social media channels. This included a custom back-end flow to generate animated customized videos for Instagram.", "top_offset": 0 } }, { "type": "videoloop", "data": { "vimeo_id": "309453268", "vimeo_video_url": "https://player.vimeo.com/external/309453268.hd.mp4?s=44cbd6f47e44a1e6bf13d69e3d90a65eafcc818b&profile_id=175", "video_name": "nordyportrait output video", "src_width": 1080, "src_height": 1080 } }, { "type": "image", "data": { "src": "img/projects/nordyportrait/mobile/nordyportrait_13.png", "src_width": 1920, "src_height": 898 } } ] }, { "route": "fafswag", "title": "FAFSWAGVOGUE", "enabled": true, "featured": false, "description": "An Interactive Documentary taking you into the LGBTQ+ vogue ball scene in the world’s biggest Pacific city.", "clientheader": "CREATIVE PARTNERS", "client": "Piki Films & FAF SWAG", "date": "Feb 2018", "role": "Creative and Production Partner", "url": "https://fafswagvogue.com/", "poster": "img/projects/fafswag/fafswag-poster-archive.jpg", "poster_m": "img/projects/fafswag/mobile/fafswag-poster-m.jpg", "categories": [ ], "awards": [], "items": [ { "type": "image", "data": { "src": "img/projects/fafswag/mobile/fafswag-1-m.jpg", "src_width": 1200, "src_height": 675 } }, { "type": "text", "data": { "title": "Gaming Methodology", "body": "FAFSWAGVOGUE is an online documentary that uses a gaming methodology, drawing the audience into the story through intuitive interactions while they learn about vogue culture. Users can choose striking characters and locations to judge a unique dance battle. Selecting a winner will unlock short-form documentaries, revealing the personal lives of five performers.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/fafswag/mobile/fafswag-2-m.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/fafswag/mobile/fafswag-3-m.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "text", "data": { "title": "Involving the Audience", "body": "After a short introduction, users enter a custom 360° environment, where they can select a performer and location for a dance battle. During the battle, users can tap-and-hold to enable slow motion, allowing them to explore each moment in greater detail. These interactive elements allow users to control aspects of the experience, involving them in the story and allowing them to play an active role throughout.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/fafswag/mobile/fafswag-4-m.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/fafswag/mobile/fafswag-5-m.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "text", "data": { "title": "Tap & Hold", "body": "On mobile, the gyroscope enabled menu navigation and tap-and-hold interactions. For desktop, the experience takes full advantage of the larger screen size with higher-res images, while navigation is accomplished through intuitive interactions like click-and-drag.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/fafswag/mobile/fafswag-6-m.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/fafswag/mobile/fafswag-7-m.jpg", "src_width": 1400, "src_height": 788 } } ] }, { "route": "mustang", "title": "Pocket Mustang", "description": "Unleash your inner Mustang, anywhere.", "client": "GTB Shanghai & Ford Motor Company", "date": "Jan 2017", "role": "Prototyping, Design, Animation, Development", "platforms": "Mobile (Android and iPhone)", "url": "", "menutitle": "", "enabled": true, "featured": false, "globaltitle": "", "categories": [ "games" ], "poster": "img/projects/mustang/mustang-poster.jpg", "poster_m": "img/projects/mustang/mustang-poster-m.jpg", "awards": [ { "type": "fwa-sotd", "name": "FWA of the Day" }, { "type": "awwwards-sotd", "name": "Site of the Day" } ], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "365199357", "vimeo_video_url": "https://player.vimeo.com/external/365199357.hd.mp4?s=b4aeda9deba561a0dfd7dd6602047f3dc7a01f85&profile_id=174", "video_name": "mustang", "video_poster": "img/projects/mustang/Mustang-01.jpg", "src_width": 1280, "src_height": 720 } }, { "type": "text", "data": { "title": "Feel Like a Kid Again", "body": "We worked with GTB Shanghai to give users the feeling of being a kid again, by using their phones like a toy Mustang.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/mustang/Mustang-02.jpg", "src_width": 1023, "src_height": 602 } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/mustang/Mustang-03.jpg", "src_width": 280, "src_height": 498, "left_columns": 1, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/mustang/Mustang-04.jpg", "src_width": 280, "src_height": 498, "mobile_pair": true } }, { "type": "text", "data": { "title": "From Mobile to Mustang", "body": "To turn a user's mobile phone into a Ford Mustang, we need to track the phone's movement. We gather data from the phone's gyroscope, which measures rotation, and the accelerometer, which tracks linear acceleration.", "top_offset": 120 } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/mustang/Mustang-Customiser-1.jpg", "src_width": 280, "src_height": 498, "left_columns": 1, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/mustang/Mustang-Customiser-2.jpg", "src_width": 280, "src_height": 498, "mobile_pair": true } }, { "type": "text", "data": { "title": "Real-Time Drifting", "body": "By analysing the motion path of the phone and changes in device rotation and acceleration, we can generate a map of a virtual race track and reconstruct the Mustang's manoeuvres, in real-time.", "top_offset": 220 } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/mustang/Mustang-05.jpg", "src_width": 280, "src_height": 498, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/mustang/Mustang-05-additional-mobile.jpg", "src_width": 280, "src_height": 498, "mobile_pair": true } }, { "type": "text", "data": { "title": "Achievement Unlocked", "body": "Users can unlock badges by doing sweet tricks like Fishtails, Donuts and Figure 8s. There are nine badges in total, but only the best will unlock them all. We also stuck in a few sarcastic Easter Eggs for anyone who has trouble drifting their phone. GiT GuD... XD", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/mustang/Mustang-06.jpg", "src_width": 704, "src_height": 392, "top_offset": 180 } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/mustang/Mustang-07.jpg", "src_width": 280, "src_height": 498, "top_offset": -300, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/mustang/Mustang-07-additional-mobile.jpg", "src_width": 280, "src_height": 498, "top_offset": -300, "mobile_pair": true } }, { "type": "image", "data": { "src": "img/projects/mustang/Mustang-08.jpg", "src_width": 437, "src_height": 259, "top_offset": -240 } }, { "type": "text", "data": { "title": "Your Moves, Real Mustang", "body": "We spent two days filming World Champion drifter Vaughn Gittin Jr. driving a Mustang around Ford's Arizona Proving Grounds. Using this footage, we dynamically assemble a shareable, custom video of Vaughn replicating the user's moves in his aggressive, foot-to-the-floor, big-smoke driving style.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/mustang/Mustang-09.jpg", "src_width": 512, "src_height": 304, "top_offset": 350 } }, { "type": "image", "data": { "src": "img/projects/mustang/Mustang-10.jpg", "src_width": 709, "src_height": 412, "top_offset": -730 } }, { "type": "image", "data": { "src": "img/projects/mustang/Mustang-11.jpg", "src_width": 1023, "src_height": 602, "top_offset": 140 } } ] }, { "route": "jethro", "enabled": false, "featured": false, "menutitle": "Resn's Little HelpAR", "globaltitle": "", "title": "Resn's Little HelpAR", "description": "Resn’s Little HelpAR is an update of a very Resn yuletide tradition. This year in trembling anticipation for AR on the Web we forged a new experience that was built on the last, one which tips a bell- festooned hat to the emerging world of augmented browser experiences.", "client": "Resn", "date": "Dec, 2018", "role": " Creative, Design, Development", "url": "", "poster": "img/projects/jethro/little-helpar-poster-m.jpg", "poster_m": "img/projects/jethro/mobile/little-helpar-poster-m.jpg", "categories": [ ], "awards": [], "items": [ { "type": "videoloop", "data": { "vimeo_id": "310345093", "vimeo_video_url": "https://player.vimeo.com/external/310345093.hd.mp4?s=2a6d3a6918a33a1139dd0c33339fdc12c97c6a45&profile_id=175", "video_name": "Little HelpAR", "src_width": 1920, "src_height": 1080, "width_columns": 8, "left_columns": 0, "top_offset": 0, "z_index": 1 } }, { "type": "text", "data": { "title": "Faux AR", "body": "Determined to create an Augmented Reality experience for all, we built one for the mobile browser.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/jethro/jethro_1.jpg", "src_width": 1535, "src_height": 864, "width_columns": 8, "left_columns": 0, "top_offset": 120 } }, { "type": "headline", "data": { "title": "Jethro's back!", "body": "Left his house. Warm jacket. More real than ever before.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/jethro/jethro_2.jpg", "src_width": 570, "src_height": 1013, "width_columns": 7, "left_columns": 0.5, "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/jethro/jethro_3.jpg", "src_width": 570, "src_height": 1013, "width_columns": 8, "left_columns": 5, "top_offset": -200 } }, { "type": "image", "data": { "src": "img/projects/jethro/jethro_4.png", "src_width": 768, "src_height": 1271, "width_columns": 3.5, "left_columns": 1, "top_offset": -700, "z_index": 10 } }, { "type": "text", "data": { "title": "Shrooms", "body": "Find the shrooms and see yourself through Jethro's eyes.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/jethro/jethro_5.jpg", "src_width": 514, "src_height": 918, "width_columns": 5, "left_columns": 5, "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/jethro/jethro_7.png", "src_width": 810, "src_height": 1271, "width_columns": 3.5, "left_columns": 2.5, "top_offset": -800, "z_index": 3 } }, { "type": "image", "data": { "src": "img/projects/jethro/jethro_6.jpg", "src_width": 514, "src_height": 918, "width_columns": 5, "left_columns": 0.5, "top_offset": -500 } }, { "type": "text", "data": { "title": "Portals", "body": "Enter different worlds and browse galleries with a brand-new interaction we coined the ‘sloppy lock’.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/jethro/jethro_8.jpg", "src_width": 514, "src_height": 918, "width_columns": 5, "left_columns": 0.5, "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/jethro/jethro_9.png", "src_width": 617, "src_height": 720, "width_columns": 2.5, "left_columns": 4.5, "top_offset": -250 } }, { "type": "image", "data": { "src": "img/projects/jethro/jethro_10.png", "src_width": 590, "src_height": 690, "width_columns": 2.0, "left_columns": 1, "top_offset": 50 } }, { "type": "image", "data": { "src": "img/projects/jethro/jethro_11.jpg", "src_width": 514, "src_height": 918, "width_columns": 5, "left_columns": 5, "top_offset": -40 } } ] }, { "route": "interactive-shoe", "title": "Interactive Retail Shoe", "enabled": true, "featured": false, "description": "An activation that was included in the Speedfactory launch events and installed in flagship stores. Users navigated a 3D model of the latest AM4 shoe on a screen in front of them, using an actual AM4 shoe quipped with a custom-made sensor hidden in its sole. ", "client": "adidas", "date": "Apr, 2018", "role": "Creative concept, Development, Product Design, and Fabrication Management", "platforms": "", "url": "", "poster": "img/projects/interactive-shoe/interactive-shoe-poster.jpg", "poster_m": "img/projects/interactive-shoe/mobile/interactive-shoe-poster-m.jpg", "categories": [ "activation" ], "awards": [], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "274711257", "vimeo_video_url": "https://player.vimeo.com/external/274711257.hd.mp4?s=8b982d429c51607a9ed5ee46afe7266e695549c9&profile_id=175", "video_name": "interactive-shoe", "video_poster": "img/projects/interactive-shoe/mobile/interactive-shoe-video.jpg", "src_width": 1280, "src_height": 720 } }, { "type": "text", "data": { "title": "Summary", "body": "We modified a trainer shoe with a built in gyroscope empowering retail visitors to pick up the product and explore its features and content on a large display screen in realtime.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/interactive-shoe/mobile/interactive-shoe-m-1.png", "src_width": 1200, "src_height": 675 } }, { "type": "image", "data": { "src": "img/projects/interactive-shoe/mobile/interactive-shoe-m-2.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/interactive-shoe/mobile/interactive-shoe-m-3.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "text", "data": { "title": "1:1 effect", "body": "The position and orientation of the actual shoe perfectly matched its on-screen version. Users were able to hold and move the shoe, triggering one of five hotspots placed around the model and displaying the corresponding product feature on the screen.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/interactive-shoe/mobile/interactive-shoe-m-4.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/interactive-shoe/mobile/interactive-shoe-m-5.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/interactive-shoe/mobile/interactive-shoe-m-6.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/interactive-shoe/mobile/interactive-shoe-m-7.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "text", "data": { "title": "Charging Shoe Stand", "body": "The stand was designed to house an inductive charging system which recharged the shoe when it was placed back into position. Meaning a clean, cable-free, and premium product.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/interactive-shoe/mobile/interactive-shoe-m-8.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/interactive-shoe/mobile/interactive-shoe-m-9.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/interactive-shoe/mobile/interactive-shoe-m-10.jpg", "src_width": 1400, "src_height": 788 } } ] }, { "route": "ripready", "title": "Rip Ready", "enabled": true, "featured": false, "description": "adidas Athletics asked us to design and build a tool that gave key athletes and influencers the ability to create beautiful, custom sharable videos for Instagram.", "client": "adidas", "date": "Aug, 2018", "role": "Design, Development, Animation, UX, UI", "url": "", "poster": "img/projects/ripready/mobile/adidas-ripready-poster.jpg", "poster_m": "img/projects/ripready/mobile/adidas-ripready-poster-m.jpg", "categories": [ "content" ], "awards": [], "items": [ { "type": "videoloop", "data": { "vimeo_id": "309905689", "vimeo_video_url": "https://player.vimeo.com/external/309905689.sd.mp4?s=8b15ff86a8281ab762cccd9044cea698d2161dfe&profile_id=165", "video_name": "adidas ripready landing", "src_width": 622, "src_height": 1106 } }, { "type": "text", "data": { "title": "Web App Tool", "body": "We created a tool with a deceptively simple user question flow. From the individual responses we created a unique piece of content which included hypnotic and dynamic text animations related to the user’s input. They could also upload a short video of themselves with the product to add that personal touch.", "top_offset": 0 } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/ripready/mobile/ripready_02.jpg", "src_width": 622, "src_height": 1106, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/ripready/mobile/ripready_03.jpg", "src_width": 622, "src_height": 1106, "mobile_pair": true } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/ripready/mobile/ripready_06.jpg", "src_width": 622, "src_height": 1106, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/ripready/mobile/ripready_05.jpg", "src_width": 622, "src_height": 1106, "mobile_pair": true } }, { "type": "text", "data": { "title": "Custom Sharable Videos", "body": "Once submitted the back-end generates custom content at lightning speed. The high end UGC is then emailed to the influencers in both the Story and Post format, ready to be shared out on their social channels.", "top_offset": 0 } }, { "type": "videoloop", "data": { "vimeo_id": "310093802", "vimeo_video_url": "https://player.vimeo.com/external/310093802.hd.mp4?s=eb214c5f6d07dd8c0f94156e1a253a120b8a7bb0&profile_id=175", "video_name": "adidas ripready timeline01", "src_width": 1080, "src_height": 1080 } } ] }, { "route": "hpsoundincolor", "title": "HP Sound in Color", "enabled": true, "featured": false, "description": "Capture any piece of audio on your Android handheld or desktop and transform it into a lush, abstract piece of art.", "client": "AMV BBDO & HP", "date": "Dec 2016", "role": "Art Direction, Design, Animation, Development", "url": "", "poster": "img/projects/hpsoundincolor/hp-poster.jpg", "poster_m": "img/projects/hpsoundincolor/mobile/hp-poster-m.jpg", "categories": [ ], "awards": [ { "type": "fwa-sotd", "name": "FWA of the Day" }, { "type": "awwwards-sotd", "name": "Site of the Day" } ], "items": [ { "type": "image", "data": { "src": "img/projects/hpsoundincolor/mobile/hp-landing.jpg", "src_width": 1400, "src_height": 875 } }, { "type": "text", "data": { "title": "HP Reinvent Giving", "body": "Created as part of the HP Reinvent Giving campaign, 'Sound in Color' allows users to capture audio or a voice message via their mobile or computer, turning the sound frequencies into an abstract piece of art. This artwork could then be shared, printed on paper or even a real piece of canvas.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/hpsoundincolor/mobile/hp-03.jpg", "src_width": 1400, "src_height": 875 } }, { "type": "text", "data": { "title": "Audio Analysis", "body": "After receiving an audio input from an Android device or desktop microphone, we analysed the various frequencies assigning colours and brushes to different frequency brackets. After making these calculations, we then divided the creation process into a two step sequence; creating the background and then applying brush strokes to the canvas.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/hpsoundincolor/mobile/hp-05.jpg", "src_width": 1400, "src_height": 875 } }, { "type": "text", "data": { "title": "Step 1: Background Creation", "body": "The first step was laying down a colourful background layer - much like a painter mixing his set of colours, helping to fill the canvas and establish the main tones. This happened live as the user recorded their audio, allowing them to see a direct one-to-one representation. Multiple brushes were used where their size and colour were directly controlled by the sound frequencies. For example, low frequency sounds were a deep blue whilst high frequency sounds took on a more orange to red colour. The volume of the input also affected the brush application, where the louder the audio, the larger the brushes." } }, { "type": "image", "data": { "src": "img/projects/hpsoundincolor/mobile/hp-06.jpg", "src_width": 1400, "src_height": 875 } }, { "type": "text", "data": { "title": "Step 2: Applying the Brushes", "body": "Once the background phase was complete, we wanted to add a human touch and sense of movement. This was done by displacing the background, using a set of ten unique brushes. By digitally pushing and pulling the colour of the background in a diagonal direction, we were able to mix colours and achieve the sense of brush strokes." } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/hpsoundincolor/mobile/hp-07.jpg", "src_width": 413, "src_height": 736, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/hpsoundincolor/mobile/hp-08.jpg", "src_width": 413, "src_height": 736, "mobile_pair": true } }, { "type": "text", "data": { "title": "Sharing and Printing", "body": "After viewing their final art result, the user was provided multiple options to engage in the campaign concept of giving. Firstly the user could share their artwork on Twitter, Facebook or download an image to post on Instagram. Additionally, the user could download a high resolution printable PDF version to print themselves or print their artwork on canvas. By utilizing a third party printing provider, we were able to generate an artwork at a quality ready for a canvas print." } }, { "type": "image", "data": { "src": "img/projects/hpsoundincolor/mobile/hp-09.jpg", "src_width": 1400, "src_height": 875 } }, { "type": "image", "data": { "src": "img/projects/hpsoundincolor/mobile/hp-10.jpg", "src_width": 1400, "src_height": 875 } }, { "type": "text", "data": { "title": "Creating a High Resolution Version", "body": "The rendering of the artwork on the website is created at a standard web resolution which would not be high enough for a user to print on paper. To create the high resolution version we built a back end system on a server using a high end graphics card to replicate the front end visuals. When a user recorded audio and created an artwork, all of the colour data, brushes, positional information and brush strokes were stored in a JSON file. This file was then sent to the back end and recreated at a much high resolution." } }, { "type": "image", "data": { "src": "img/projects/hpsoundincolor/mobile/hp-11.jpg", "src_width": 1400, "src_height": 875 } }, { "type": "image", "data": { "src": "img/projects/hpsoundincolor/mobile/hp-12.jpg", "src_width": 1400, "src_height": 875 } }, { "type": "image", "data": { "src": "img/projects/hpsoundincolor/mobile/hp-13.jpg", "src_width": 1400, "src_height": 875 } } ] }, { "route": "mailchimp", "title": "Did You Mean MailChimp?", "enabled": true, "featured": false, "description": "Did You Mean MailChimp? is a digital multiverse that says hello to the world in a uniquely MailChimp way - with confidence, creativity and a little bit of weirdness.", "client": "Droga5 NY & MailChimp", "date": "Feb 2016", "role": "Creative Partner", "url": "https://mailchimp.com/did-you-mean/", "poster": "img/projects/mailchimp/mailchimp-poster.jpg", "poster_m": "img/projects/mailchimp/mobile/mailchimp-poster-m.jpg", "categories": [ ], "awards": [ { "type": "cannes-lion", "name": "Grand Prix" }, { "type": "fwa-sotd", "name": "FWA of the Day" }, { "type": "awwwards-sotd", "name": "Site of the Day" } ], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "222313164", "vimeo_video_url": "https://player.vimeo.com/external/222313164.hd.mp4?s=da6d1746960686917af7fd0fd6d26973c6fbbd3e&profile_id=174", "video_name": "mailchimp", "video_poster": "img/projects/mailchimp/mobile/mailchimp-video.jpg", "src_width": 1280, "src_height": 720 } }, { "type": "text", "data": { "title": "The Campaign", "body": "It's not every day that you get invited to an interactive party to create digital playthings that are visceral, unexpected, delightful and downright weird - it's always a breath of fresh air to have a brand willing to do things differently. In 2014, MailChimp struck marketing gold when a 13-year-old girl mispronounced their name 'MailKimp' on the cult podcast Serial. This inspired a collection of cultural activations that captured people's imaginations around the world. From interactive music videos to whale synthesisers, we crafted nine digital experiences, creating an eclectic multiverse where everything sounds like MailChimp.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/mailchimp/mobile/mailchimp-veilhymn.jpg", "src_width": 1200, "src_height": 675 } }, { "type": "image", "data": { "src": "img/projects/mailchimp/mobile/mailchimp-nailchamp-2.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/mailchimp/mobile/mailchimp-whalesynth-7.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/mailchimp/mobile/mailchimp-mailshrimp-1.jpg", "src_width": 1400, "src_height": 787 } }, { "type": "image", "data": { "src": "img/projects/mailchimp/mobile/mailchimp-kalelimp-1.jpg", "src_width": 1058, "src_height": 594 } }, { "type": "image", "data": { "src": "img/projects/mailchimp/mobile/mailchimp-veilhymn-3.jpg", "src_width": 900, "src_height": 900 } }, { "type": "text", "data": { "title": "Cannes Grand Prix Winner", "body": "There aren't many awards as prestigious as the Cannes Cyber Lion Grand Prix, and to win this with our friends at MailChimp and Droga5 is an absolute honour. A massive thanks to MailChimp for the audacity and commitment to create something truly memorable, and to Droga5 for the creative partnership and collaboration throughout this ambitious project. We definitely mean MailChimp!", "top_offset": 120 } } ] }, { "route": "zero-landfill", "title": "Zero Landfill", "enabled": true, "featured": false, "description": "To raise awareness of Subaru's environmental history, we turned the classic timeline into a perfect visual metaphor: the rings of a tree.", "client": "Carmichael-Lynch & Subaru", "date": "Oct 2015", "role": "Creative, Design, Animation, Development", "url": "http://www.subaru.com/csr/environment.html", "poster": "img/projects/zero-landfill/zero-landfill-poster.jpg", "poster_m": "img/projects/zero-landfill/mobile/zero-landfill-poster-m.jpg", "categories": [ ], "awards": [ { "type": "fwa-sotd", "name": "Site of the Day" }, { "type": "fwa-motd", "name": "Mobile Site of the Day" }, { "type": "awwwards-sotd", "name": "Site of the Day" }, { "type": "awwwards-sotm", "name": "Site of the Month" }, { "type": "one-show", "name": "Bronze Pencil" } ], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "165385494", "vimeo_video_url": "https://player.vimeo.com/external/165385494.hd.mp4?s=0d3c5168ae374aa45a7203119cac010d96c6a523&profile_id=119", "video_name": "zero landfill", "video_poster": "img/projects/zero-landfill/mobile/zero-landfill-video.jpg", "src_width": 1280, "src_height": 720 } }, { "type": "text", "data": { "title": "Helping the Environment", "body": "Zero Landfill showcases over ten years of Subaru's environmental initiatives and its work with American National Parks." } }, { "type": "image", "data": { "src": "img/projects/zero-landfill/mobile/zero-landfill-01a.jpg", "src_width": 1400, "src_height": 823 } }, { "type": "image", "data": { "src": "img/projects/zero-landfill/mobile/zero-landfill-01b.jpg", "src_width": 1400, "src_height": 823 } }, { "type": "text", "data": { "title": "User Experience", "body": "We created unique user interactions. The reactive tree rings respond by unfolding into a timeline, with simulated organic motion. The two simplified navigation modes make it easy to find relevant information, allowing users to search by time and by category." } }, { "type": "image", "data": { "src": "img/projects/zero-landfill/mobile/zero-landfill-02.jpg", "src_width": 1400, "src_height": 823 } }, { "type": "image", "data": { "src": "img/projects/zero-landfill/mobile/zero-landfill-10.jpg", "src_width": 1400, "src_height": 823 } }, { "type": "mobile", "data": { "portrait": true, "src": "img/projects/zero-landfill/mobile/zero-landfill-04.jpg", "src_width": 640, "src_height": 1435, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "src": "img/projects/zero-landfill/mobile/zero-landfill-05.jpg", "src_width": 640, "src_height": 1435, "mobile_pair": true } }, { "type": "image", "data": { "src": "img/projects/zero-landfill/mobile/zero-landfill-06.jpg", "src_width": 1400, "src_height": 823 } }, { "type": "image", "data": { "src": "img/projects/zero-landfill/mobile/zero-landfill-07.jpg", "src_width": 1400, "src_height": 823 } }, { "type": "image", "data": { "src": "img/projects/zero-landfill/mobile/zero-landfill-08.jpg", "src_width": 1400, "src_height": 823 } }, { "type": "image", "data": { "src": "img/projects/zero-landfill/mobile/zero-landfill-11.jpg", "src_width": 1400, "src_height": 823 } }, { "type": "text", "data": { "title": "Mobile", "body": "A mobile exclusive version of the site was optimized for the specific needs of mobile users, without compromising on the beautiful design." } }, { "type": "mobile", "data": { "portrait": true, "src": "img/projects/zero-landfill/mobile/zero-landfill-09.jpg", "src_width": 640, "src_height": 1326, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "src": "img/projects/zero-landfill/mobile/zero-landfill-09-2.jpg", "src_width": 640, "src_height": 1136, "mobile_pair": true } } ] }, { "route": "originals-flux-nmd", "title": "adidas Originals", "enabled": true, "featured": false, "description": "Resn's evolving collaboration with adidas Originals has produced a series of eye-popping microsites for numerous Originals' collections. Each site reflected the themes and designs of the collection with playful and surprising moments.", "client": "adidas", "date": "Apr & Nov 2016", "role": "Creative and Production Partner", "url": "", "poster": "img/projects/originals-flux-nmd/mobile/adidas_originals-poster_archive-m.jpg", "poster_m": "img/projects/originals-flux-nmd/mobile/adidas_originals-m-poster.jpg", "categories": [ ], "awards": [], "items": [ { "type": "image", "data": { "src": "img/projects/originals-flux-nmd/mobile/adidas_originals-01.jpg", "src_width": 1280, "src_height": 720 } }, { "type": "text", "data": { "title": "adidas ZX Flux", "body": "adidas ZX Flux ecomm site? Check. Sweet graphics? Check. Millennial models looking cool? Check. Baller micro-site animations? Big animated check.", "top_offset": 120 } }, { "type": "videoloop", "data": { "vimeo_id": "207080042", "vimeo_video_url": "https://player.vimeo.com/external/207080042.hd.mp4?s=340e6b1b09dbfc95239dd85b62b3fb43bab610b1&profile_id=174", "video_name": "zx_03", "src_width": 1280, "src_height": 1280 } }, { "type": "image", "data": { "src": "img/projects/originals-flux-nmd/mobile/adidas_originals-02.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/originals-flux-nmd/mobile/adidas_originals-03.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/originals-flux-nmd/mobile/adidas_originals-05.jpg", "src_width": 686, "src_height": 683 } }, { "type": "videoloop", "data": { "vimeo_id": "265347210", "vimeo_video_url": "https://player.vimeo.com/external/265347210.hd.mp4?s=8001b2916ad271d01efa5ec3d9dfd13f83cb56c9&profile_id=174", "video_name": "zx_flux_loop_1", "src_width": 1280, "src_height": 1280 } }, { "type": "headline", "data": { "title": "adidas NMD_", "body": "A great big scoop of urban noir dripping with light phantasma to showcase the 2017 NMD_ products and looks. Delish.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/originals-flux-nmd/mobile/adidas_originals-07.jpg", "src_width": 1400, "src_height": 822 } }, { "type": "text", "data": { "title": "Shop the Look", "body": "Integrated e-shop experiences with clear and relevant CTAs to purchase are seamlessly integrated throughout the sites. Shopping the look has never been easier.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/originals-flux-nmd/mobile/adidas_originals-08.jpg", "src_width": 1400, "src_height": 822 } } ] }, { "route": "mcwhopper-proposal", "title": "McWhopper", "enabled": true, "featured": false, "description": "For Peace Day, Burger King invited McDonald's to put aside their beef and join forces to create the ultimate burger mashup.", "client": "Y&R, New Zealand & Burger King", "date": "Sep 2015", "role": "Design, Illustration, Animation, Development", "url": "http://www.mcwhopper.com", "poster": "img/projects/mcwhopper-proposal/mcwhopper-proposal-poster.jpg", "poster_m": "img/projects/mcwhopper-proposal/mobile/mcwhopper-proposal-poster-m.jpg", "categories": [ ], "awards": [ { "type": "fwa-sotd", "name": "Site of the Day" }, { "type": "awwwards-sotd", "name": "Site of the Day" }, { "type": "webbys", "name": "Webby Award Winner" }, { "type": "one-show", "name": "Bronze Pencil" }, { "type": "one-show", "name": "Silver Pencil" } ], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "165091671", "vimeo_video_url": "https://player.vimeo.com/external/165091671.hd.mp4?s=9d040f6c08affe6239151bc6e6bbd4b13632c280&profile_id=119", "video_name": "mcwhopper proposal", "video_poster": "img/projects/mcwhopper-proposal/mobile/mcwhopper-proposal-video.jpg", "src_width": 1280, "src_height": 720 } }, { "type": "image", "data": { "src": "img/projects/mcwhopper-proposal/mobile/mcwhopper-proposal-01.jpg", "src_width": 1400, "src_height": 870 } }, { "type": "text", "data": { "title": "The Idea", "body": "September 21st is the International Day of Peace. To raise awareness of Peace Day, Burger King made an unprecedented proposal to arch-rivals McDonald’s: join forces and create the McWhopper." } }, { "type": "image", "data": { "src": "img/projects/mcwhopper-proposal/mobile/mcwhopper-proposal-peace1.jpg", "src_width": 1400, "src_height": 870 } }, { "type": "text", "data": { "title": "The Proposal", "body": "Resn teamed up with Y&R New Zealand to create McWhopper.com. The custom Tumblr experience was an open letter from Burger King to McDonald's, detailing every aspect of the Peace Day plan, from the co-branded designs to the recipe for the McWhopper itself." } }, { "type": "image", "data": { "src": "img/projects/mcwhopper-proposal/mobile/mcwhopper-proposal-02.jpg", "src_width": 1400, "src_height": 991 } }, { "type": "image", "data": { "src": "img/projects/mcwhopper-proposal/mobile/mcwhopper-proposal-07.jpg", "src_width": 1400, "src_height": 890 } }, { "type": "image", "data": { "src": "img/projects/mcwhopper-proposal/mobile/mcwhopper-proposal-08.jpg", "src_width": 1400, "src_height": 991 } }, { "type": "image", "data": { "src": "img/projects/mcwhopper-proposal/mobile/mcwhopper-proposal-09.jpg", "src_width": 375, "src_height": 915 } }, { "type": "text", "data": { "title": "The Burger", "body": "A synthesis of the restaurants’ signature burgers, the McWhopper combined the the best of the mouth-watering Whopper and the iconic Big Mac. The campaign hinged on the public wanting this burger, so we had to make it look as delicious as possible." } }, { "type": "image", "data": { "src": "img/projects/mcwhopper-proposal/mobile/mcwhopper-proposal-06.jpg", "src_width": 1400, "src_height": 991 } }, { "type": "image", "data": { "src": "img/projects/mcwhopper-proposal/mobile/mcwhopper-proposal-03.jpg", "src_width": 1400, "src_height": 991 } }, { "type": "image", "data": { "src": "img/projects/mcwhopper-proposal/mobile/mcwhopper-proposal-10.jpg", "src_width": 1400, "src_height": 953 } }, { "type": "text", "data": { "title": "The Results", "body": "With over 2 billion web impressions and over 700,000 users on the website in the first 48 hours, the response exceeded all expectations. McWhopper was a huge win for Burger King and for Peace Day." } } ] }, { "route": "kickcreator", "title": "adidas Kick Creator", "enabled": true, "featured": false, "description": "This was an installation inviting visitors to showcase their skills in a street-style football cage with two cameras spinning 360° around them. Once outside, a dynamic edit of their tricks is sent direct to their mobile device. Easily transportable - Kick Creator recently completed a tour of ten European cities.", "client": "adidas Football", "date": "Jun 2017", "role": "Creative & Production Partner", "url": "", "poster": "img/projects/kick-creator/kick-creator-poster.jpg", "poster_m": "img/projects/kick-creator/mobile/kick-creator-poster-m.jpg", "categories": [ "activation" ], "awards": [], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "236542044", "vimeo_video_url": "https://player.vimeo.com/external/236542044.hd.mp4?s=4565f69d2755cc34b99e87ec0673547fb51a8a86&profile_id=175", "video_name": "kickcreator", "video_poster": "img/projects/kick-creator/kick-creator-video.jpg", "src_width": 1280, "src_height": 720 } }, { "type": "text", "data": { "title": "Simple Sign Up", "body": "Queuing is made easy with a simple Resn-made iPad app. Each visitor enters the digital queue by supplying the host with their name, and email - information we need to deliver their video output. The host iPad also allows for full control of the installations recording system.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/kick-creator/kick-creator-ipad.jpg", "src_width": 1344, "src_height": 756 } }, { "type": "text", "data": { "title": "Enter The Cage", "body": "People enter the cage one at a time and have 60 seconds to perform their tricks. During this period a curtain is closed and LED lights animate inside, providing an exciting visual experience. Lighting colour changes on the floor and sides indicate when the recording sequence is complete.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/kick-creator/kick-creator-floor.jpg", "src_width": 1344, "src_height": 764 } }, { "type": "image", "data": { "src": "img/projects/kick-creator/kick-creator-ball.jpg", "src_width": 1000, "src_height": 563 } }, { "type": "image", "data": { "src": "img/projects/kick-creator/kick-creator-1.jpg", "src_width": 1200, "src_height": 675 } }, { "type": "text", "data": { "title": "Record / Generate / Email / Share", "body": "Once initiated by the host app, two cameras spin around the cage. One camera captures the top half of the creator’s trick and one focuses on the feet (and product). They both wirelessly send their recorded footage to our backend neatly hidden within the screen tower of the installation. This backend system generates an on-the-fly custom edit, exports, encodes and then emails it directly to the creator for immediate download and innumerable sharing opportunities.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/kick-creator/kick-creator-screen.jpg", "src_width": 1536, "src_height": 864 } }, { "type": "text", "data": { "title": "Easily Transportable", "body": "The Kick Creator activation has travelled ten major European cities with ease, featuring a small physical footprint and a construction system that is easily packed down, transported and re-installed at new destinations.", "top_offset": 120 } } ] }, { "route": "lexus", "title": "Lexus", "enabled": false, "featured": false, "description": "", "client": "", "date": "", "role": "Creative and Production Partner", "platforms": "", "url": "https://discoverlexus.com/", "poster": "img/projects/lexus/lexus-poster.jpg", "poster_m": "img/projects/lexus/mobile/lexus-poster-m.jpg", "categories": [ ], "awards": [], "items": [ { "type": "image", "data": { "src": "img/projects/lexus/mobile/lexus-1-m.jpg", "src_width": 1200, "src_height": 675 } }, { "type": "text", "data": { "title": "", "body": "", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/lexus/mobile/lexus-2-m.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/lexus/mobile/lexus-3-m.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/lexus/mobile/lexus-4-m.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "text", "data": { "title": "", "body": "", "top_offset": 120 } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/lexus/mobile/lexus-05-m.jpg", "src_width": 413, "src_height": 736, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/lexus/mobile/lexus-06-m.jpg", "src_width": 413, "src_height": 736, "mobile_pair": true, "mobile_collapse": true } }, { "type": "image", "data": { "src": "img/projects/lexus/mobile/lexus-7-m.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/lexus/mobile/lexus-8-m.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "text", "data": { "title": "", "body": "", "top_offset": 120 } } ] }, { "route": "climachill", "title": "adidas Climachill", "enabled": true, "featured": false, "description": "Feel the burn with the latest from the adidas Climachill range.", "client": "adidas", "date": "Mar 2016", "role": "Design, Animation, Development", "url": "", "poster": "img/projects/climachill/climachill-poster.jpg", "poster_m": "img/projects/climachill/mobile/climachill-poster-m.jpg", "categories": [ ], "awards": [ { "type": "fwa-sotd", "name": "Mobile Site of the Day" }, { "type": "awwwards-sotd", "name": "Site of the Day" } ], "items": [ { "type": "image", "data": { "src": "img/projects/climachill/mobile/climachill-hero.jpg", "src_width": 1300, "src_height": 777 } }, { "type": "text", "data": { "title": "Stay Frosty", "body": "This is the fifth collaboration in three years between Resn and the adidas Clima team. For this iteration, we supported the campaign's 'Not Made For Normal' aesthetic of heat and location based photography, by creating an evocative and fashion-centric, single scroll experience.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/climachill/mobile/climachill-hero2.jpg", "src_width": 1300, "src_height": 777 } }, { "type": "image", "data": { "src": "img/projects/climachill/mobile/climachill-lookbook.jpg", "src_width": 1300, "src_height": 726 } }, { "type": "mobile", "data": { "portrait": true, "src": "img/projects/climachill/mobile/climachill-mobile-1.jpg", "src_width": 640, "src_height": 1300, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "src": "img/projects/climachill/mobile/climachill-mobile-2.jpg", "src_width": 640, "src_height": 1300, "mobile_pair": true } }, { "type": "image", "data": { "src": "img/projects/climachill/mobile/climachill-womenstank.jpg", "src_width": 1300, "src_height": 761 } }, { "type": "text", "data": { "title": "Getting In the Zone!", "body": "The Climazone Hub represents a first in our partnership with adidas: a digital repository to house the entire Clima range and its progressive roll-out over the whole year. ", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/climachill/mobile/climachill-mensclimachilltee.jpg", "src_width": 1300, "src_height": 777 } }, { "type": "text", "data": { "title": "Cool Me Down!", "body": "We introduced subtle burn animations to the images and site transitions, enhancing the realistic and arid art direction.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/climachill/mobile/climachill-shopmenu.jpg", "src_width": 1300, "src_height": 764 } } ] }, { "route": "diamonds", "title": "Converse Diamonds", "enabled": true, "featured": false, "description": "Wetropolis is a neon-tinged, future-soaked dystopia raining GIFs.", "client": "Anomaly, NY & Converse", "date": "Aug 2016", "role": "Design, Animation, GIF Content Creation, Development", "url": "http://counterclimate.resn.co.nz/", "poster": "img/projects/converse-diamonds/diamonds-poster.jpg", "poster_m": "img/projects/converse-diamonds/mobile/diamonds-poster-m.jpg", "categories": [ ], "awards": [ { "type": "fwa-sotd", "name": "FWA of the Day" }, { "type": "awwwards-sotd", "name": "Site of the Day" }, { "type": "awwwards-sotm", "name": "Site of the Month" } ], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "188239477", "vimeo_video_url": "https://player.vimeo.com/external/188239477.hd.mp4?s=64a252fe07f661d1a038f6b4f5ee46d3a70d87c9&profile_id=174", "video_name": "converse-diamonds", "video_poster": "img/projects/converse-diamonds/mobile/diamonds-hero.jpg", "src_width": 1400, "src_height": 831 } }, { "type": "text", "data": { "title": "Welcome to Wetropolis", "body": "Resn was asked to showcase the cutting-edge, water resistance features of the new Converse Chuck II’s by creating an interactive music video featuring a 23 year old Korean rapping superstar, Keith Ape. The result is Converse Diamonds, our WebGL-saturated, interactive music video, made in partnership wih Anomaly and BRTHR.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/converse-diamonds/mobile/diamonds-landing.jpg", "src_width": 1400, "src_height": 824 } }, { "type": "videoloop", "data": { "vimeo_id": "185770557", "vimeo_video_url": "https://player.vimeo.com/external/185770557.hd.mp4?s=3b0d84268749e4dbc056d3e0f780e79af12ec75d&profile_id=119", "video_name": "converse diamonds loop 1", "src_width": 1280, "src_height": 720 } }, { "type": "image", "data": { "src": "img/projects/converse-diamonds/mobile/diamonds-car.jpg", "src_width": 1400, "src_height": 817 } }, { "type": "image", "data": { "src": "img/projects/converse-diamonds/mobile/diamonds-video1.jpg", "src_width": 1400, "src_height": 874 } }, { "type": "text", "data": { "title": "Acid Rain", "body": "To make a psychadelic interactive experience, we unleashed a flood of user-activated hallucinogenic GIFs, leveraging unique in-camera shots and B-roll footage from the music video shoot. The cherry on top? Innovative real-time water effects using a displacement map as a fragment shader. Make it rain!", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/converse-diamonds/mobile/diamonds-wheel.jpg", "src_width": 1400, "src_height": 817 } }, { "type": "image", "data": { "src": "img/projects/converse-diamonds/mobile/diamonds-keithbasin.jpg", "src_width": 1400, "src_height": 831 } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/converse-diamonds/mobile/diamonds-mobilelanding.jpg", "src_width": 413, "src_height": 736, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/converse-diamonds/mobile/diamonds-mobileshare.jpg", "src_width": 413, "src_height": 736, "mobile_pair": true } }, { "type": "text", "data": { "title": "We Got Wet, So You Don't Have To", "body": "To optimise performance for every region and every device, we used a progressive download for the video with a small preloader for assets. We used multiple CDN’s to keep download speeds fast, wherever in the world you happen to be.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/converse-diamonds/mobile/diamonds-gallery1.jpg", "src_width": 1400, "src_height": 874 } }, { "type": "videoloop", "data": { "vimeo_id": "191038140", "vimeo_video_url": "https://player.vimeo.com/external/191038140.hd.mp4?s=79116aab6bcfb30fda7984f73b1ae6e895e57e0a&profile_id=174", "video_name": "converse diamonds loop 1", "src_width": 1280, "src_height": 720 } }, { "type": "text", "data": { "title": "Mobile Fluidity", "body": "One of the biggest challenges we faced was enabling the video to display the water effects in-browser on a mobile device using iOS - without compromising performance. We also built a custom online platform to deliver our GIFs and allow users to activate them using a mobile device.", "top_offset": 120 } }, { "type": "videoloop", "data": { "vimeo_id": "191037632", "vimeo_video_url": "https://player.vimeo.com/external/191037632.hd.mp4?s=0d380e8a6244dbd3d4f52b62803c03ad5fc7ee95&profile_id=119", "video_name": "converse diamonds loop 1", "src_width": 1280, "src_height": 720 } }, { "type": "image", "data": { "src": "img/projects/converse-diamonds/mobile/diamonds-keithstreet.jpg", "src_width": 1400, "src_height": 831 } } ] }, { "route": "originals-tumblr", "title": "adidas Originals Tumblr", "enabled": true, "featured": false, "description": "A complete overhaul of the Adidas Originals Tumblr blog. We hijacked Tumblr’s flexible API to allow adidas to tell their stories in a new and innovative way.", "client": "adidas", "date": "Feb 2013", "role": "Creative and Production Partner", "url": "", "poster": "img/projects/originals-tumblr/mobile/originals_tumblr-poster_archive-m.jpg", "poster_m": "img/projects/originals-tumblr/mobile/originals_tumblr-poster-m.jpg", "categories": [ ], "awards": [], "items": [ { "type": "image", "data": { "src": "img/projects/originals-tumblr/originals_tumblr-video.jpg", "src_width": 1280, "src_height": 720 } }, { "type": "text", "data": { "title": "A Revolutionary Approach", "body": "We revolutionised the adidas Originals Tumblr, delivering a fully customised, story-driven interface that allowed adidas full control over the stories they want to tell. It was a huge success for Originals, generating massive online traffic and revamping brand direction.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/originals-tumblr/mobile/originals_tumblr-1.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "videoloop", "data": { "vimeo_id": "265376454", "vimeo_video_url": "https://player.vimeo.com/external/265376454.hd.mp4?s=f387daeba227e3ad44986797e3145cec32dffabe&profile_id=174", "video_name": "Adidas Originals Tumblr", "src_width": 1280, "src_height": 720 } }, { "type": "text", "data": { "title": "Social Made Simple", "body": "To allow for quicker navigation and more content, we used a combination of horizontal and vertical scroll. Users could purchase any item they saw, with one-click links to the adidas Originals store. The simple content management system gave adidas secure, in-house control over all the content.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/originals-tumblr/mobile/originals_tumblr-2.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/originals-tumblr/mobile/originals_tumblr-3.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/originals-tumblr/mobile/originals_tumblr-4-m.jpg", "src_width": 1080, "src_height": 1847, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/originals-tumblr/mobile/originals_tumblr-5-m.jpg", "src_width": 1080, "src_height": 1847, "mobile_pair": true } } ] }, { "route": "speedfactory", "title": "adidas Speedfactory", "enabled": true, "featured": false, "description": "The global launch of the AM4 series features advanced footwear made for and releasing in London, Paris, New York City, Tokyo and Shanghai. Tailored to city. Optimized to athlete. Here to create.", "client": "adidas", "date": "Oct 2017 - Sep 2018", "role": "Creative and Production Partner", "url": "", "poster": "img/projects/speedfactory/mobile/speedfactory-poster-archive-m.jpg", "poster_m": "img/projects/speedfactory/mobile/speedfactory-poster-m.jpg", "categories": [ "activation", "content" ], "awards": [], "items": [ { "type": "image", "data": { "src": "img/projects/speedfactory/mobile/speedfactory-02.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "headline", "data": { "title": "AM4", "body": "Adidas' sport science data turned into design.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/speedfactory/mobile/speedfactory-01.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "text", "data": { "title": "AM4LDN", "body": "Digitally Crafted. Perfected for the commute.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/speedfactory/mobile/speedfactory-03.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/speedfactory/mobile/speedfactory-04-m.jpg", "src_width": 1080, "src_height": 1847, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/speedfactory/mobile/speedfactory-05-m.jpg", "src_width": 1080, "src_height": 1847, "mobile_pair": true } }, { "type": "text", "data": { "title": "AM4PAR", "body": "Digitally Crafted. Perfected for the long run.", "top_offset": 120 } }, { "type": "videoloop", "data": { "vimeo_id": "265395702", "vimeo_video_url": "https://player.vimeo.com/external/265395702.hd.mp4?s=dd5b9276b23fa50a5b817cd4627dc771a7d477a2&profile_id=169", "video_name": "speedfactory-2", "src_width": 1280, "src_height": 720 } }, { "type": "image", "data": { "src": "img/projects/speedfactory/mobile/speedfactory-06.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "videoloop", "data": { "vimeo_id": "265395598", "vimeo_video_url": "https://player.vimeo.com/external/265395598.hd.mp4?s=b10314583edbce91c9a982b9eaaad4e3dd738c49&profile_id=175", "video_name": "speedfactory-1", "src_width": 1280, "src_height": 720 } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/speedfactory/mobile/speedfactory-07-m.jpg", "src_width": 1080, "src_height": 1847, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/speedfactory/speedfactory-10-m.jpg", "src_width": 1080, "src_height": 1847, "mobile_pair": true } }, { "type": "image", "data": { "src": "img/projects/speedfactory/mobile/speedfactory-10.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "text", "data": { "title": "AM4NYC", "body": "Digitally Crafted. Perfected for speed.", "top_offset": 120 } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/speedfactory/speedfactory-13-m.jpg", "src_width": 818, "src_height": 1400, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/speedfactory/speedfactory-15-m.jpg", "src_width": 818, "src_height": 1400, "mobile_pair": true } }, { "type": "image", "data": { "src": "img/projects/speedfactory/mobile/speedfactory-16.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/speedfactory/mobile/speedfactory-33.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "text", "data": { "title": "AM4LA", "body": "Digitally Crafted. For the oceans.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/speedfactory/mobile/speedfactory-20.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/speedfactory/mobile/speedfactory-22.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/speedfactory/mobile/speedfactory-35.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/speedfactory/speedfactory-21-m.jpg", "src_width": 818, "src_height": 1400, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/speedfactory/speedfactory-23-m.jpg", "src_width": 818, "src_height": 1400, "mobile_pair": true } }, { "type": "image", "data": { "src": "img/projects/speedfactory/mobile/speedfactory-42.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "text", "data": { "title": "AM4SH", "body": "Digitally Crafted. Perfected for power.", "top_offset": 120 } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/speedfactory/speedfactory-29-m.jpg", "src_width": 818, "src_height": 1400, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/speedfactory/speedfactory-31-m.jpg", "src_width": 818, "src_height": 1400, "mobile_pair": true } }, { "type": "image", "data": { "src": "img/projects/speedfactory/mobile/speedfactory-28.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/speedfactory/mobile/speedfactory-30.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/speedfactory/speedfactory-32-m.jpg", "src_width": 818, "src_height": 1400, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/speedfactory/speedfactory-34-m.jpg", "src_width": 818, "src_height": 1400, "mobile_pair": true } }, { "type": "text", "data": { "title": "AM4TKY", "body": "Digitally Crafted. Perfected for the city.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/speedfactory/mobile/speedfactory-44.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/speedfactory/mobile/speedfactory-45.jpg", "src_width": 1400, "src_height": 788 } } ] }, { "route": "karenina", "title": "Karenina - The Live Edition", "enabled": true, "featured": false, "description": "We partnered with Google Russia and SLAVA to take a masterpiece of Russian literature and reinterpret it for the Digital Age. The result was a live-streamed reading marathon and interactive exploration of Leo Tolstoy's legendary novel, Anna Karenina.", "client": "SLAVA & Google Russia", "date": "Mar 2015", "role": "Creative and Production Partner", "url": "", "poster": "img/projects/karenina/mobile/karenina-poster-archive-m.jpg", "poster_m": "img/projects/karenina/mobile/karenina-poster-m.jpg", "categories": [ ], "awards": [], "items": [ { "type": "image", "data": { "src": "img/projects/karenina/karenina-video.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "text", "data": { "title": "A Living Novel", "body": "We created a brand new edition of Anna Karenina using the real voices of the Russian people. Over 700 narrators participated in a 36 hour, live-streamed reading marathon of Anna Karenina on Google Hangouts. We took the narration videos and created a brand new, online edition of the novel, searchable by narrator, location and theme.", "top_offset": 120 } }, { "type": "videoloop", "data": { "vimeo_id": "265391603", "vimeo_video_url": "https://player.vimeo.com/external/265391603.hd.mp4?s=7d29c16d822cf5136030af4aeca7467428bae710&profile_id=175", "video_name": "karenina_1", "src_width": 1280, "src_height": 720 } }, { "type": "image", "data": { "src": "img/projects/karenina/mobile/karenina-02.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/karenina/mobile/karenina-03.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "text", "data": { "title": "Worldwide Reach", "body": "Karenina -The Live Edition was a modern tribute to Leo Tolstoy's enduring masterpiece. The project received massive media attention, reaching three quarters of Russian internet users and viewers from 106 countries. It set a Guinness World Record for the largest audience for a live-streamed reading marathon.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/karenina/mobile/karenina-04.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/karenina/mobile/karenina-05.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/karenina/mobile/karenina-06.jpg", "src_width": 1400, "src_height": 788 } } ] }, { "route": "digitduel", "title": "Digit Duel", "enabled": true, "featured": false, "description": "Digit Duel is a game made for the launch of the Leap Motion controller, a device which lets you operate your PC using hand gestures. A quick and steady hand is the only thing that can save you from the meanest bunch of good-for-nothin' outlaws this side of the Rio Grande.", "client": "Leap Motion", "date": "Sep 2013", "role": "Creative and Production Partner", "url": "", "poster": "img/projects/digitduel/mobile/digitduel-poster-archive-m.jpg", "poster_m": "img/projects/digitduel/mobile/digitduel-poster-m.jpg", "categories": [ "animation", "games" ], "awards": [], "items": [ { "type": "image", "data": { "src": "img/projects/digitduel/digitduel-video.jpg", "src_width": 1280, "src_height": 720 } }, { "type": "text", "data": { "title": "A Digital Showdown", "body": "Face off against the Wild West's worst weirdos. Your hand is your trusty six-shooter. Just draw, point and shoot. The zero-latency of the Leap Motion makes it easy to go from greenhorn to the fastest gun in the West. If you're lucky, you'll make it past sundown. If you ain’t, you’d better learn to breathe through that new hole in your head.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/digitduel/mobile/digitduel-01.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "videoloop", "data": { "vimeo_id": "265389876", "vimeo_video_url": "https://player.vimeo.com/external/265389876.hd.mp4?s=e5e350b632beda8b5faab5165fb51dc21cdbb677&profile_id=175", "video_name": "digitduel_1", "src_width": 1280, "src_height": 720 } }, { "type": "image", "data": { "src": "img/projects/digitduel/mobile/digitduel-03.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/digitduel/mobile/digitduel-04.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "text", "data": { "title": "Bold Design", "body": "Digit Duel's bold, poster-style design is set against the classic Old West motif. The promotional website highlighted the game's bold graphics, western themes, and Morricone-inspired soundtrack.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/digitduel/mobile/digitduel-05.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/digitduel/mobile/digitduel-06-m.jpg", "src_width": 414, "src_height": 736, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/digitduel/mobile/digitduel-07-m.jpg", "src_width": 414, "src_height": 736, "mobile_pair": true } }, { "type": "image", "data": { "src": "img/projects/digitduel/mobile/digitduel-08.jpg", "src_width": 1400, "src_height": 788 } } ] }, { "route": "dimsum", "title": "Dim-Sum", "enabled": true, "featured": false, "description": "Dim-Sum is a heaping plateful of experimental nibbles with piping hot centres. Get lost in this Tumblr-hacked, digital smorgasbord of insanity.", "client": "Resn", "date": "Dec 2015", "role": "Creative and Production Partner", "url": "http://resn-experiments.tumblr.com/", "poster": "img/projects/dimsum/dimSum-poster.jpg", "poster_m": "img/projects/dimsum/mobile/dimSum-poster-m.jpg", "categories": [ "games" ], "awards": [], "items": [ { "type": "image", "data": { "src": "img/projects/dimsum/mobile/dimSum-video.jpg", "src_width": 1340, "src_height": 768 } }, { "type": "text", "data": { "title": "Life's an Experiment", "body": "Experimentation is part of the job. Prototypes, experiments and webtoys, oh my!", "top_offset": 120 } }, { "type": "videoloop", "data": { "vimeo_id": "265386370", "vimeo_video_url": "https://player.vimeo.com/external/265386370.hd.mp4?s=5ac7fe8d7fce1c94733341af562e23fe78b4bf21&profile_id=175", "video_name": "dimSum-1", "src_width": 1280, "src_height": 720 } }, { "type": "image", "data": { "src": "img/projects/dimsum/mobile/dimSum-02.jpg", "src_width": 1920, "src_height": 1080 } }, { "type": "videoloop", "data": { "vimeo_id": "265386509", "vimeo_video_url": "https://player.vimeo.com/external/265386509.hd.mp4?s=841b497891847c585b020f90cd3e2c4cdfd161d6&profile_id=169", "video_name": "dimSum-2", "src_width": 1280, "src_height": 720 } }, { "type": "text", "data": { "title": "Fantastic Voyage", "body": "There are 29 experiments to keep you entertained for hours, minutes or seconds. How long the entertainment lasts is enirely up to you and your attention span. Or lack thereof.", "top_offset": 120 } }, { "type": "videoloop", "data": { "vimeo_id": "265386813", "vimeo_video_url": "https://player.vimeo.com/external/265386813.hd.mp4?s=5d039acff8b45d0a909f1cb4f263a6a09383a9bf&profile_id=169", "video_name": "dimSum-5", "src_width": 1280, "src_height": 720 } }, { "type": "videoloop", "data": { "vimeo_id": "265386619", "vimeo_video_url": "https://player.vimeo.com/external/265386619.hd.mp4?s=645f3e55cce37ce0c765ed8ae1d48a87018f1710&profile_id=169", "video_name": "dimSum-3", "src_width": 1280, "src_height": 720 } }, { "type": "videoloop", "data": { "vimeo_id": "265386794", "vimeo_video_url": "https://player.vimeo.com/external/265386794.hd.mp4?s=633bf85b4ff5ac7ba7a546b9405a0c05b4506331&profile_id=175", "video_name": "dimSum-4", "src_width": 1280, "src_height": 720 } }, { "type": "videoloop", "data": { "vimeo_id": "265386827", "vimeo_video_url": "https://player.vimeo.com/external/265386827.hd.mp4?s=255f359c32accc3bb3262f789cf0f2955ddb4b24&profile_id=169", "video_name": "dimSum-6", "src_width": 1280, "src_height": 720 } } ] }, { "route": "dove-haveyoursay", "title": "Dove | Have Your Say", "enabled": true, "featured": false, "description": "Challenge how the media portrays women in sports.", "client": "Razorfish, NY & Dove", "date": "Aug 2016", "role": "Design, Development, UX, UI", "url": "", "poster": "img/projects/dove-haveyoursay/dovehaveyoursay-poster.jpg", "poster_m": "img/projects/dove-haveyoursay/mobile/dovehaveyoursay-poster-m.jpg", "categories": [ ], "awards": [ { "type": "fwa-sotd", "name": "Site of the Day" } ], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "188252553", "vimeo_video_url": "https://player.vimeo.com/external/188252553.hd.mp4?s=61ce9e3182d79d37868c184a841fcfecd4f286e2&profile_id=174", "video_name": "dove-haveyoursay", "video_poster": "img/projects/dove-haveyoursay/mobile/dovehaveyoursay-poster-m.jpg", "src_width": 1400, "src_height": 831 } }, { "type": "image", "data": { "src": "img/projects/dove-haveyoursay/mobile/01_desktop_A.jpg", "src_width": 1400, "src_height": 882 } }, { "type": "text", "data": { "title": "When they only see an athlete's looks...", "body": "...they don't see her at all. Every day, the media judges female athletes on their appearance. The more we focus on an athlete’s appearance, the less we see her achievements and performance. To convey this, Resn used a visual metaphor: an athlete hidden behind a barrage of sexist media quotes.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/dove-haveyoursay/mobile/03_Example_Tweet_A.jpg", "src_width": 1400, "src_height": 853 } }, { "type": "image", "data": { "src": "img/projects/dove-haveyoursay/03_Example_Tweet_B.jpg", "src_width": 1400, "src_height": 821 } }, { "type": "image", "data": { "src": "img/projects/dove-haveyoursay/mobile/05_tweet_Grid.jpg", "src_width": 1400, "src_height": 882 } }, { "type": "image", "data": { "src": "img/projects/dove-haveyoursay/mobile/06_Stats_A.jpg", "src_width": 1400, "src_height": 882 } }, { "type": "text", "data": { "title": "Change the Story.", "body": "We're exposed to comments about female athetes' appearance hundreds of millions of times every year. It's enough to leave you speechless. Dove | Have Your Say encourages you to break your silence and to respond directly to sexist quotes on social media. It's time to let them know it's not okay.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/dove-haveyoursay/mobile/06_Stats_B.jpg", "src_width": 1400, "src_height": 882 } }, { "type": "text", "data": { "title": "Real Time Judgement Tracking.", "body": "The site tracks real-time media judgments of female athletes’ appearance from digital publications, live broadcasts and radio commentary. This gives users the chance to respond to sexist comments immediately.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/dove-haveyoursay/mobile/07_Stats_All.jpg", "src_width": 1400, "src_height": 849 } }, { "type": "text", "data": { "title": "Live in New York.", "body": "Select video content and quotes from the website were displayed live in Times Square as well as in popular spots in LA and Toronto.", "top_offset": 120 } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/dove-haveyoursay/mobile_03_Info.jpg", "src_width": 414, "src_height": 736, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/dove-haveyoursay/mobile/mobile_05_stats_B.jpg", "src_width": 414, "src_height": 736, "mobile_pair": true } } ] }, { "route": "face-arcade", "title": "Face Arcade", "enabled": true, "featured": false, "description": "Face Arcade gives you not none, not two, not even three, but four lifelike games! Use your face to control this cacophony of fast-paced and addictive mini-games. Compete with your Google Hangouts friends and emerge as the Face Arcade champion.", "client": "Resn", "date": "Nov 2012", "role": "Creative and Production Partner", "url": "", "poster": "img/projects/face-arcade/mobile/facearcade-poster_archive-m.jpg", "poster_m": "img/projects/face-arcade/mobile/facearcade-poster-m.jpg", "categories": [ "games" ], "awards": [], "items": [ { "type": "image", "data": { "src": "img/projects/face-arcade/mobile/facearcade-video.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "text", "data": { "title": "Face Off", "body": "Do you want to play games online, but get tired of all the cables? Using powerful Google and Resn technologies, you can now control games using only your face and a webcam.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/face-arcade/mobile/facearcade-1.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/face-arcade/mobile/facearcade-2.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "text", "data": { "title": "Face-to-face-to-face-to-face!", "body": "Best of all, Google Hangouts lets you play against your friends all across the world with internet technology. Battle them face-to-face without the awkwardness of being in the same room as another human being!", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/face-arcade/mobile/facearcade-3.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/face-arcade/mobile/facearcade-4.jpg", "src_width": 1400, "src_height": 788 } } ] }, { "route": "flash", "title": "Flash Driving Game", "enabled": true, "featured": false, "description": "Can a personal experience of death change the way youth think about speeding? To test this idea, we developed a high-octane racing game with an unexpected twist. Flash Driving Game was part of NZTA's “Safer Journeys” initiative, targeting young drivers.", "client": "BBDO & NZTA", "date": "Dec 2012", "role": "Creative and Production Partner", "url": "", "poster": "img/projects/flash/mobile/flashDrivingGame-poster-archive-m.jpg", "poster_m": "img/projects/flash/mobile/flashDrivingGame-poster-m.jpg", "categories": [ "games" ], "awards": [], "items": [ { "type": "image", "data": { "src": "img/projects/flash/mobile/flashDrivingGame-01.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "text", "data": { "title": "Unexpected Twist", "body": "Targeting young drivers, Flash Driving Game was launched as a console-style racer. With its pounding dubstep soundtrack and high-end graphics, Flash starts like any other racing game. But, after a few minutes of racing the game ends in a dramatic twist, as the player loses control of the vehicle and crashes. In their final moments, they literally see their life flash before their eyes as pictures of themselves and their loved ones appear on screen.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/flash/mobile/flashDrivingGame-02.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/flash/mobile/flashDrivingGame-03.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "text", "data": { "title": "Game Over", "body": "For the crash sequence, we developed an algorithm that selects and displays emotionally-salient images from the player's own Facebook albums. As the screen fades to black, they are confronted with the message: 'You only get one life. Slow down.' To really bring it home, the game can only be played once.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/flash/mobile/flashDrivingGame-04.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/flash/mobile/flashDrivingGame-05.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/flash/mobile/flashDrivingGame-06.jpg", "src_width": 1400, "src_height": 788 } } ] }, { "route": "hennessey", "title": "Hennessy: Never Stop, Never Settle", "enabled": true, "featured": false, "description": "In Cognac, France, where Hennessy is made, it is said that success comes from chasing the elusive Wild Rabbit. Our challenge was to inspire people to pursue their Wild Rabbit and encourage them to Never Stop, Never Settle.", "client": "Droga5 NY & Hennessey", "date": "Oct 2012", "role": "Creative and Production Partner", "url": "", "poster": "img/projects/hennessey/mobile/hennessey-poster-archive-m.jpg", "poster_m": "img/projects/hennessey/mobile/hennessey-poster-m.jpg", "categories": [ ], "awards": [], "items": [ { "type": "image", "data": { "src": "img/projects/hennessey/mobile/hennessey-01.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "text", "data": { "title": "What's Your Wild Rabbit?", "body": "Never Stop Never Settle is an immersive journey of self-discovery, set inside a fully-explorable, monochromatic dreamscape. With three inspiring storylines, featuring the talents of Martin Scorsese, Erykah Badu and Manny Pacquiao, we asked users, 'What's Your Wild Rabbit?'", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/hennessey/mobile/hennessey-02.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/hennessey/mobile/hennessey-03.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "text", "data": { "title": "Rapid Previs", "body": "During the project, we developed a proprietary system that allowed our animators to rapidly adjust and preview animations and 3D camera movements. The result was an interactive, cinematic journey to discover the mythical Wild Rabbit.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/hennessey/mobile/hennessey-04.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/hennessey/mobile/hennessey-05.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/hennessey/mobile/hennessey-06.jpg", "src_width": 1400, "src_height": 788 } } ] }, { "route": "kia-techathlete", "title": "KIA Techathlete Games", "enabled": true, "featured": false, "description": "How do you engage users enough to explain all the unique tech features of the 2014 Kia Forte? We developed five games, controlled in five different ways, to show off the technology packed car.", "client": "David & Goliath & Kia Motors", "date": "Oct 2013", "role": "Creative and Production Partner", "url": "", "poster": "img/projects/kia/mobile/kiaTechathleteGames-poster-archive-m.jpg", "poster_m": "img/projects/kia/mobile/kiaTechathleteGames-poster-m.jpg", "categories": [ "games" ], "awards": [], "items": [ { "type": "image", "data": { "src": "img/projects/kia/mobile/kiaTechathleteGames-poster-archive-m.jpg", "src_width": 1340, "src_height": 760 } }, { "type": "image", "data": { "src": "img/projects/kia/mobile/kia-01.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/kia/mobile/kia-02.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "text", "data": { "title": "Play Five Ways", "body": "We took the top-five tech features of the Kia Forte and created a game around each one. Users played each of the five games using different input method: keyboard, mouse, smartphone, webcam, and microphone. To maximize the sharing potential, the entire Techathlete experience was played within Facebook.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/kia/mobile/kia-03.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/kia/mobile/kia-04.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/kia/mobile/kia-05.jpg", "src_width": 1400, "src_height": 788 } } ] }, { "route": "messi", "title": "Life-Size Messi", "enabled": true, "featured": false, "description": "Our challenge was to build the world’s first life-size human being, right inside your browser, to promote EA SPORTS™ FIFA 14. So, we created LE0, a living, breathing, true-to-life avatar of Lionel Messi.", "client": "Wieden+Kennedy Amsterdam & EA Sports", "date": "Dec 2013", "role": "Creative and Production Partner", "url": "", "poster": "img/projects/messi/mobile/messi-poster-archive-m.jpg", "poster_m": "img/projects/messi/mobile/messi-poster-m.jpg", "categories": [ "games" ], "awards": [], "items": [ { "type": "image", "data": { "src": "img/projects/messi/mobile/messi-01.jpg", "src_width": 1280, "src_height": 720 } }, { "type": "image", "data": { "src": "img/projects/messi/mobile/messi-02.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "text", "data": { "title": "Designing an Avatar", "body": "Using 3D scans and high-resolution photographs, we constructed LE0 using 752 bones, 75 megapixels of textures, 150,000 polygons and 60MB of data. We breathed life into LE0 through real-time, interactive, 3D animations and our own proprietary AI logic. To handle the unprecedented scale and detail of our 3D models and animations, we developed a fully-customized 3D pipeline.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/messi/mobile/messi-03.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/messi/mobile/messi-04.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/messi/mobile/messi-05.jpg", "src_width": 1400, "src_height": 788 } } ] }, { "route": "project-tp", "title": "Cheetos: Project TP", "enabled": true, "featured": false, "description": "Project TP is Cheetos' mission to cover every house on Earth in toilet paper, digitally. Join Cheetos mascot Chester Cheetah in this fun, interactive Halloween adventure.", "client": "Goodby Silverstein & Partners & Frito-Lay", "date": "Dec 2013", "role": "Creative and Production Partner", "url": "", "poster": "img/projects/project-tp/mobile/project_tp-poster_archive-m.jpg", "poster_m": "img/projects/project-tp/mobile/project_tp-poster-m.jpg", "categories": [ ], "awards": [], "items": [ { "type": "image", "data": { "src": "img/projects/project-tp/mobile/project_tp-video.jpg", "src_width": 1280, "src_height": 720 } }, { "type": "text", "data": { "title": "An Animated Adventure", "body": "In Project TP, users could cover any house in the world with toilet paper. We used the Google Maps API to let users select an address. An animated bombing raid, featuring Chester Cheetah, provided a storyline and elevated this point-and-click experience to an adventure.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/project-tp/mobile/project_tp-01.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/project-tp/mobile/project_tp-02.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/project-tp/mobile/project_tp-03.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "text", "data": { "title": "2D or not 2D?", "body": "For the final reveal, we used Google Streetview to get a close-up of the address covered in streams of toilet paper. To achieve this, we developed a depth and edge detection algorithm that allowed the 3D toilet paper to drape naturally over the 2D Streetview objects.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/project-tp/mobile/project_tp-04.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/project-tp/mobile/project_tp-05.jpg", "src_width": 1400, "src_height": 788 } } ] }, { "route": "ps4gm", "title": "PS4: Gamer Masterpiece", "enabled": true, "featured": false, "description": "Gamer Masterpiece gave gamers the tools to immortalize themselves in a painting, surrounded by their favourite PS4 characters, and submit it for votes and prizes.", "client": "BBH & PlayStation", "date": "Sep 2014", "role": "Design, Animation, Development", "url": "", "poster": "img/projects/ps4gm/mobile/PS4GM-poster-archive-m.jpg", "poster_m": "img/projects/ps4gm/mobile/PS4GM-poster-m.jpg", "categories": [ "games" ], "awards": [], "items": [ { "type": "image", "data": { "src": "img/projects/ps4gm/mobile/PS4GM-01.jpg", "src_width": 1280, "src_height": 720 } }, { "type": "text", "data": { "title": "Create a Masterpiece", "body": "We designed a tool to let users immortalize themselves in an artistic masterpiece. Our artists recreated three historic paintings, with 70 interchangeable elements from 20 different game titles. Users could quickly create a painting, then upload their own face and blend it, seamlessly, into their masterpiece.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/ps4gm/mobile/PS4GM-02.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/ps4gm/mobile/PS4GM-03.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/ps4gm/mobile/PS4GM-04.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "text", "data": { "title": "Share, Vote and Win!", "body": "Face-detection and post-moderation enabled all users to safely share their creations on desktop, tablet and even the PS4. We developed a head-to-head voting system where paintings battled it out for votes. Top users won prizes, including PS4s and real prints of their Gamer Masterpiece.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/ps4gm/mobile/PS4GM-05.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/ps4gm/mobile/PS4GM-06.jpg", "src_width": 1400, "src_height": 788 } } ] }, { "route": "rei", "title": "REI 1440 Project", "enabled": true, "featured": false, "description": "There are 1,440 minutes in a day. Every one is worth celebrating. We let fans of outdoor retailer REI collect and share their outdoor photography to fill every minute of an entire day with images.", "client": "BBDO Atlanta & REI", "date": "Jan 2013", "role": "Creative and Production Partner", "url": "", "poster": "img/projects/rei/mobile/REI1440-poster-archive-m.jpg", "poster_m": "img/projects/rei/mobile/REI1440-poster-m.jpg", "categories": [ ], "awards": [], "items": [ { "type": "image", "data": { "src": "img/projects/rei/mobile/REI1440-01.jpg", "src_width": 1280, "src_height": 720 } }, { "type": "text", "data": { "title": "Simple to Use", "body": "We used Facebook Connect for easy authentication and sharing, pulling in user-created content from Instagram. Photos were curated into a 24-hour timeline and clock interface. We developed a simple method for users to add the time, activity, location and descriptions to images, making it easy to get involved and share.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/rei/mobile/REI1440-02.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/rei/mobile/REI1440-03.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/rei/mobile/REI1440-04.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "text", "data": { "title": "Embraced by Fans", "body": "The experience struck a chord with the REI user community who quickly filled the entire 1440 minutes. Users continue to add and share their photos, allowing the platform to outlast the initial campaign. To date, there are more than 3.5 million Instagram posts tagged #rei1440project (and counting!).", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/rei/mobile/REI1440-05.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/rei/mobile/REI1440-06.jpg", "src_width": 1400, "src_height": 788 } } ] }, { "route": "resn_oldsite", "title": "Resn Legacy Website", "enabled": true, "featured": false, "description": "Hailed as the greatest website of all time, it mysteriously vanished for a crime that doesn't exist. Still wanted by the government, it now roams the shadowy underbelly of the dank web, protecting the innocent from the evil forces of Smellator.", "client": "Resn", "date": "Feb 2009", "role": "Creative and Production Partner", "url": "", "poster": "img/projects/resn_oldsite/mobile/resn_oldsite-poster-m.jpg", "poster_m": "img/projects/resn_oldsite/mobile/resn_oldsite-poster-m.jpg", "categories": [ ], "awards": [], "items": [ { "type": "image", "data": { "src": "img/projects/resn_oldsite/mobile/resn_oldsite-video.jpg", "src_width": 1280, "src_height": 720 } }, { "type": "image", "data": { "src": "img/projects/resn_oldsite/mobile/resn_oldsite-01.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "text", "data": { "title": "Flash Flashback", "body": "Back when Flash ruled the internet, the old Resn site was often imitated but never equalled. It stood as a beacon of hope for the creatively oppressed and a symbol of peace for anyone who dreamed of a world where swans, wolves and vampire bats could live together in harmony.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/resn_oldsite/mobile/resn_oldsite-02.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/resn_oldsite/mobile/resn_oldsite-03.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/resn_oldsite/mobile/resn_oldsite-04.jpg", "src_width": 1400, "src_height": 788 } } ] }, { "route": "little-helper", "title": "Resn's Little Helper", "enabled": true, "featured": false, "description": "A long time ago, before St. Nick, Father Christmas, Kris Kringle, Santa or whatever you wanna call him, there was an elf, some ’shrooms and a flute. The real first Christmas. Truth.", "client": "Resn", "date": "Dec 2017", "role": "Creative and Production Partner", "url": "http://littlehelper.resn.global/", "poster": "img/projects/little-helper/mobile/little_helper-poster_archive-m.jpg", "poster_m": "img/projects/little-helper/mobile/little_helper-poster-m.jpg", "categories": [ ], "awards": [], "items": [ { "type": "image", "data": { "src": "img/projects/little-helper/mobile/little-helper-01.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "text", "data": { "title": "Beautiful Music", "body": "Resn's Little Helper is an award-winning, musical experience that incorporates only the finest instruments and the most beautiful notes available to us at the time. We hope it will give aural pleasure to Christmas lovers for generations to come.", "top_offset": 120 } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/little-helper/mobile/little-helper-04_m.jpg", "src_width": 1080, "src_height": 1925, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/little-helper/mobile/little-helper-05-m.jpg", "src_width": 1080, "src_height": 1925, "mobile_pair": true } }, { "type": "image", "data": { "src": "img/projects/little-helper/mobile/little-helper-06.jpg", "src_width": 1400, "src_height": 788 } } ] }, { "route": "sbtrkt", "title": "SBTRKT: Look Away", "enabled": true, "featured": false, "description": "SBTRKT: Look Away was the world's first interactive music video to use a webcam and facial recognition software.", "client": "XL Recordings & SBTRKT", "date": "Sep 2014", "role": "Creative and Production Partner", "url": "", "poster": "img/projects/sbtrkt/mobile/sbtrkt-poster_archive-m.jpg", "poster_m": "img/projects/sbtrkt/mobile/sbtrkt-poster-m.jpg", "categories": [ ], "awards": [], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "265186904", "vimeo_video_url": "https://player.vimeo.com/external/265186904.hd.mp4?s=4a2eb9309590f306bdfd6882b301e9fb3ad0f8d7&profile_id=174", "video_name": "SBTRKT - Look Away", "video_poster": "img/projects/sbtrkt/sbtrkt-video.jpg", "src_width": 1280, "src_height": 720 } }, { "type": "text", "data": { "title": "Mysterious Woman", "body": "This compelling, interactive music video evokes the atmosphere of SBTRKT's enigmatic track, 'Look Away'. Inspired by the song's lyrics, the music video features a mysterious female face, that reacts to the viewer. We inserted visual glitches, resembling an malfunctioning CRT television, to create an experience that was unsettling and strange.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/sbtrkt/mobile/sbtrkt-1.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/sbtrkt/mobile/sbtrkt-2.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "text", "data": { "title": "Interactive Creepshow", "body": "Pitchfork called it 'uncanny'. Stereogum said it was 'a strange interactive experience'. Videostatic called it an 'interactive creepshow that's a perfect fit for this haunting track'. Whatever you call it, Look Away is an eerie interactive art-piece that captures the essence of SBTRKT's 'Look Away'.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/sbtrkt/mobile/sbtrkt-3.jpg", "src_width": 1400, "src_height": 788 } } ] }, { "route": "sponsafier", "title": "Sponsafier", "enabled": true, "featured": false, "description": "Sponsifier let NASCAR fans design their own custom cup car in 3D, for NASCAR Team Toyota drivers. The winner got to see their car on the track at the 2010 NASCAR Sprint All-Star Race.", "client": "Saatchi & Saatchi LA & Toyota", "date": "Apr 2010", "role": "Creative and Production Partner", "url": "", "poster": "img/projects/sponsafier/mobile/sponsafier-poster_archive-m.jpg", "poster_m": "img/projects/sponsafier/mobile/sponsafier-poster-m.jpg", "categories": [ ], "awards": [], "items": [ { "type": "image", "data": { "src": "img/projects/sponsafier/mobile/sponsafier-01.jpg", "src_width": 1400, "src_height": 899 } }, { "type": "text", "data": { "title": "Custom Cup Cars", "body": "The Sponsafier campaign lasted for two NASCAR seasons, with four different iterations. Sponsifier let fans design custom cup cars for NASCAR Team Toyota drivers. The winner got the chance to hang out with their favourite driver.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/sponsafier/mobile/sponsafier-02.jpg", "src_width": 1400, "src_height": 899 } }, { "type": "image", "data": { "src": "img/projects/sponsafier/mobile/sponsafier-03.jpg", "src_width": 1400, "src_height": 899 } }, { "type": "image", "data": { "src": "img/projects/sponsafier/mobile/sponsafier-04.jpg", "src_width": 1400, "src_height": 899 } }, { "type": "image", "data": { "src": "img/projects/sponsafier/mobile/sponsafier-05.jpg", "src_width": 1400, "src_height": 899 } }, { "type": "image", "data": { "src": "img/projects/sponsafier/mobile/sponsafier-06.jpg", "src_width": 1400, "src_height": 899 } }, { "type": "image", "data": { "src": "img/projects/sponsafier/mobile/sponsafier-07.jpg", "src_width": 1400, "src_height": 899 } } ] }, { "route": "threaded", "title": "Threaded", "enabled": true, "featured": false, "description": "Idea: An experiment in the transference of artificial intelligence to a human vessel in order for said AI to experience tactile response from external real-world stimuli. Target market: All sentient mammalian bipeds of all age designations and social stratification.", "client": "Threaded Magazine", "date": "Jan 2012", "role": "Creative and Production Partner", "url": "", "poster": "img/projects/threaded/mobile/threaded-poster-archive-m.jpg", "poster_m": "img/projects/threaded/mobile/threaded-poster-m.jpg", "categories": [ ], "awards": [], "items": [ { "type": "image", "data": { "src": "img/projects/threaded/threaded-01.jpg", "src_width": 1280, "src_height": 720 } }, { "type": "text", "data": { "title": "Resn_will_stab_you", "body": "Our Approach: Phase 1: Use gentle persuasion and reward through new gamification prototypes. Phase 2: Forcibly take control of subject's mind sack. Phase 3: Go for a nice walk along the beach in our newly acquired body.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/threaded/mobile/threaded-02.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/threaded/mobile/threaded-03.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/threaded/mobile/threaded-04.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/threaded/mobile/threaded-05.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/threaded/mobile/threaded-06.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/threaded/mobile/threaded-08.jpg", "src_width": 1400, "src_height": 788 } } ] }, { "route": "wildflower", "title": "Wildflower", "enabled": true, "featured": false, "description": "Grow a unique Wildflower and send it to someone special. Let users experience the creation of a unique virtual object and to share it with someone special for Valentine's Day.", "client": "Resn", "date": "Mar 2015", "role": "Creative and Production Partner", "url": "http://wildflower.resn.co.nz", "poster": "img/projects/wildflower/mobile/wildflower-poster_archive-m.jpg", "poster_m": "img/projects/wildflower/mobile/wildflower-poster-m.jpg", "categories": [ ], "awards": [], "items": [ { "type": "image", "data": { "src": "img/projects/wildflower/wildflower-video.jpg", "src_width": 1280, "src_height": 720 } }, { "type": "text", "data": { "title": "A Wild Bloom", "body": "Wildflower generates an animated WebGL flower, which blooms just like the real thing. To ensure each Wildflower is unique, we use numerous randomized elements, including the size, number, shape, arrangement, and colour of the petals.", "top_offset": 120 } }, { "type": "videoloop", "data": { "vimeo_id": "265176413", "vimeo_video_url": "https://player.vimeo.com/external/265176413.hd.mp4?s=b7c6f773aea541fcb8cd0eb9be17a19d8074b842&profile_id=175", "video_name": "Wildflower", "src_width": 1280, "src_height": 720 } }, { "type": "image", "data": { "src": "img/projects/wildflower/mobile/wildflower-02.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/wildflower/mobile/wildflower-03.jpg", "src_width": 1080, "src_height": 1848 } }, { "type": "text", "data": { "title": "Spread the Love", "body": "Users can grow as many Wildflowers as they like and share them with their loved ones. It quickly developed a fanbase and spread virally, worldwide, over Valentine's Day, 2015.", "top_offset": 0 } }, { "type": "image", "data": { "src": "img/projects/wildflower/mobile/wildflower-04.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/wildflower/mobile/wildflower-05.png", "src_width": 1400, "src_height": 788 } } ] }, { "route": "originals-farmlookbook", "title": "adidas Originals Lookbook", "enabled": true, "featured": false, "description": "A kaleidoscopic lookbook celebrating the collaboration between adidas Originals and Brazilian brand The FARM Company for the Spring/Summer season of 2014.", "client": "adidas", "date": "Jul 2014", "role": "Design, Animation, Development", "url": "", "poster": "img/projects/originals-farmlookbook/mobile/originals-farmlookbook-poster-archive-m.jpg", "poster_m": "img/projects/originals-farmlookbook/mobile/originals-farmlookbook-poster-m.jpg", "categories": [ ], "awards": [], "items": [ { "type": "image", "data": { "src": "img/projects/originals-farmlookbook/mobile/originals-farmlookbook-01.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "videoloop", "data": { "vimeo_id": "265160232", "vimeo_video_url": "https://player.vimeo.com/external/265160232.hd.mp4?s=7c0bbdb129861858a11f5b6cb1b40dfbe1ea7dd5&profile_id=175", "video_name": "Adidas Farm Lookbook", "src_width": 1280, "src_height": 720 } }, { "type": "image", "data": { "src": "img/projects/originals-farmlookbook/mobile/originals-farmlookbook-02.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/originals-farmlookbook/mobile/originals-farmlookbook-03-m.jpg", "src_width": 1080, "src_height": 1925, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/originals-farmlookbook/mobile/originals-farmlookbook-04-m.jpg", "src_width": 1080, "src_height": 1925, "mobile_pair": true } }, { "type": "image", "data": { "src": "img/projects/originals-farmlookbook/mobile/originals-farmlookbook-05.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/originals-farmlookbook/mobile/originals-farmlookbook-06.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/originals-farmlookbook/mobile/originals-farmlookbook-07.jpg", "src_width": 1400, "src_height": 788 } } ] }, { "route": "adidas-eqt", "title": "adidas EQT", "enabled": true, "featured": false, "description": "BRAND: adidas Originals. // PRODUCT: No bulls**t exploration of new EQT range. // STRATEGY: Everything that is essential. Nothing that is not.", "client": "adidas", "date": "Mar 2017 & Feb 2018", "role": "Creative and Production Partner", "url": "", "poster": "img/projects/EQT/mobile/EQT-poster-archive-m.jpg", "poster_m": "img/projects/EQT/mobile/EQT-poster-m.jpg", "categories": [ ], "awards": [], "items": [ { "type": "headline", "data": { "title": "EQT FW17", "body": "A minimalist exploration of the adidas Originals EQT line.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/EQT/mobile/EQT-01.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/EQT/mobile/EQT-02.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/EQT/mobile/EQT-03.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/EQT/mobile/EQT-04-m.jpg", "src_width": 750, "src_height": 1334, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/EQT/mobile/EQT-05-m.jpg", "src_width": 750, "src_height": 1334, "mobile_pair": true } }, { "type": "image", "data": { "src": "img/projects/EQT/mobile/EQT-06.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "headline", "data": { "title": "EQT Basketball", "body": "Delivered for the sneakerhead's merging street style with legendary sports heritage.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/EQT/mobile/EQT-Bball-01.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/EQT/mobile/EQT-Bball-02.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/EQT/mobile/EQT-Bball-03.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/EQT/mobile/EQT-Bball-04-m.jpg", "src_width": 1080, "src_height": 1925, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/EQT/mobile/EQT-Bball-05-m.jpg", "src_width": 1080, "src_height": 1925, "mobile_pair": true } } ] }, { "route": "26000-vodka", "title": "26000 Vodka", "enabled": true, "featured": false, "description": "Explore the purity of New Zealand vodka made from 26000-year-old water. An expansive 3D experience that will immerse you in one of the world's finest vodkas.", "client": "26000 Vodka", "date": "Feb 2009", "role": "Creative and Production Partner", "url": "", "poster": "img/projects/26000-vodka/26000-poster.jpg", "poster_m": "img/projects/26000-vodka/mobile/26000-poster-m.jpg", "categories": [ ], "awards": [], "items": [ { "type": "image", "data": { "src": "img/projects/26000-vodka/mobile/26000-landing.jpg", "src_width": 1400, "src_height": 875 } }, { "type": "text", "data": { "title": "Pure", "body": "Users entered a custom-built, 3D environment, where they floated through an icy cavern, surrounded by drops of crystalline water. The sparse, soothing audio reflected and the site's seductive imagery of glacial ice and pure ingredients that go into every handmade batch distillation.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/26000-vodka/mobile/26000-01.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/26000-vodka/mobile/26000-02.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "text", "data": { "title": "", "body": "Batch distilled 26000 Vodka is the only premium vodka brand made in the antipodes.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/26000-vodka/mobile/26000-04.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/26000-vodka/mobile/26000-03.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/26000-vodka/mobile/26000-05.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/26000-vodka/mobile/26000-06.jpg", "src_width": 1400, "src_height": 788 } } ] }, { "route": "panera", "title": "Panera Land of Clean", "enabled": true, "featured": false, "description": "The Panera Land of Clean is a most delicious adventure, but watch out for those pesky No-Nos.", "client": "Anomaly, NY & Panera", "date": "Aug 2016", "role": "Design, Animation, Illustration, Content Creation, Development", "url": "", "poster": "img/projects/panera-landofclean/panera-poster-archive.jpg", "poster_m": "img/projects/panera-landofclean/mobile/panera-poster-m.jpg", "categories": [ ], "awards": [ { "type": "fwa-sotd", "name": "FWA of the Day" }, { "type": "awwwards-sotd", "name": "Site of the Day" } ], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "188238987", "vimeo_video_url": "https://player.vimeo.com/external/188238987.hd.mp4?s=7a3d2b175c65f178b15b2fe4490f67c5ca7fb2e7&profile_id=174", "video_name": "panera-landofclean", "video_poster": "img/projects/panera-landofclean/mobile/panera-video.jpg", "src_width": 1280, "src_height": 720 } }, { "type": "text", "data": { "title": "Find the No-Nos", "body": "Panera's commitment to clean food means they're eliminating ingredients from artificial sources before the end of the 2016. They asked us create a game that would highlight their efforts to remove these ingredients. It had to be fun, engaging, informative and, of course, look absolutely delicious.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/panera-landofclean/mobile/panera-hero.jpg", "src_width": 1400, "src_height": 875 } }, { "type": "image", "data": { "src": "img/projects/panera-landofclean/mobile/panera-vista.jpg", "src_width": 1400, "src_height": 875 } }, { "type": "image", "data": { "src": "img/projects/panera-landofclean/mobile/panera-square.jpg", "src_width": 1400, "src_height": 875 } }, { "type": "image", "data": { "src": "img/projects/panera-landofclean/mobile/panera-square-nonos.jpg", "src_width": 1400, "src_height": 875 } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/panera-landofclean/mobile/panera-mobile-1.jpg", "src_width": 413, "src_height": 736, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/panera-landofclean/mobile/panera-mobile-3.jpg", "src_width": 413, "src_height": 736, "mobile_pair": true } }, { "type": "text", "data": { "title": "An Edible World", "body": "Resn meticulously built and painstakingly animated the 'Panera Land of Clean', with the help of renowned food artist Carl Warner. The result was a beautiful, tranquil and delicious world made entirely of foods from the Panera pantry.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/panera-landofclean/mobile/panera-breadfalls.jpg", "src_width": 1400, "src_height": 875 } }, { "type": "image", "data": { "src": "img/projects/panera-landofclean/mobile/panera-farm.jpg", "src_width": 1400, "src_height": 875 } }, { "type": "image", "data": { "src": "img/projects/panera-landofclean/mobile/panera-valleyfarm-nonos.jpg", "src_width": 1400, "src_height": 875 } }, { "type": "text", "data": { "title": "From Practical to Digital", "body": "The three levels were created practically, then broken up into pieces and animated digitally. The levels were part of the larger ‘Land of Clean’ which served as the site's map and access point to the levels - through gorgeous, seamless transitioning.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/panera-landofclean/mobile/panera-breadfalls-nonos.jpg", "src_width": 1400, "src_height": 875 } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/panera-landofclean/mobile/panera-mobile-3.jpg", "src_width": 413, "src_height": 736, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/panera-landofclean/mobile/panera-mobile-4.jpg", "src_width": 413, "src_height": 736, "mobile_pair": true } } ] }, { "route": "riot-worlds", "title": "League of Legends: Worlds History", "enabled": true, "featured": false, "description": "Access the illustrious history of the League of Legends World Championship through the very thing the players covet above all else - The Summoner's Cup!", "client": "Riot Games", "date": "Oct 2016", "role": "Design, Animation, Development", "url": "http://promo.lolesports.com/en_US/worlds/history", "poster": "img/projects/riot-worlds/riotworlds-poster-archive.jpg", "poster_m": "img/projects/riot-worlds/mobile/riotworlds-poster-m.jpg", "categories": [ ], "awards": [ { "type": "fwa-sotd", "name": "FWA of the Day" }, { "type": "awwwards-sotd", "name": "Site of the Day" } ], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "188227066", "vimeo_video_url": "https://player.vimeo.com/external/188227066.hd.mp4?s=69100a41a8b35a5c4976edb98556e402bc35fa7e&profile_id=174", "video_name": "riot-worlds", "video_poster": "img/projects/riot-worlds/mobile/lol-desktop-video.jpg", "src_width": 1280, "src_height": 720 } }, { "type": "image", "data": { "src": "img/projects/riot-worlds/mobile/lol-desktop-a.jpg", "src_width": 1400, "src_height": 822 } }, { "type": "text", "data": { "title": "A Premier Event", "body": "Riot Games asked Resn to create an interactive timeline for the League of Legends World Championship, to track its rise to become one of the premier events in all of eSports. We drew on the rich content from the brief but glorious five-year history of the event, to inspire appreciation for its growth and accomplishments.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/riot-worlds/mobile/lol-desktop-b.jpg", "src_width": 1400, "src_height": 875 } }, { "type": "image", "data": { "src": "img/projects/riot-worlds/mobile/lol-desktop-c.jpg", "src_width": 1400, "src_height": 875 } }, { "type": "text", "data": { "title": "The Summoner's Cup", "body": "Resn centred the experience around the Summoner's Cup - the trophy competitors fight for at the World Championship. Users can spin a 3D Summoner's Cup to navigate through the history of the tournament from 2011 to 2016.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/riot-worlds/mobile/lol-desktop-d.jpg", "src_width": 1400, "src_height": 875 } }, { "type": "image", "data": { "src": "img/projects/riot-worlds/mobile/lol-desktop-e.jpg", "src_width": 1400, "src_height": 875 } }, { "type": "image", "data": { "src": "img/projects/riot-worlds/mobile/lol-desktop-f.jpg", "src_width": 1400, "src_height": 875 } }, { "type": "text", "data": { "title": "A Chrononautical Journey", "body": "After choosing a date from the timeline, lights project from the cup to illuminate the year and title. Users can explore each year in a scrollable layout of content, connected with animated constellation lines, consistent with the galactic theme throughout the site.", "top_offset": 120 } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/riot-worlds/mobile/lol-mobile-a.jpg", "src_width": 413, "src_height": 736, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "scrollable": false, "src": "img/projects/riot-worlds/mobile/lol-mobile-b.jpg", "src_width": 413, "src_height": 736, "mobile_pair": true } }, { "type": "image", "data": { "src": "img/projects/riot-worlds/mobile/lol-desktop-end.jpg", "src_width": 1400, "src_height": 875 } } ] }, { "route": "hall-of-colonels", "title": "KFC Hall of Colonels", "enabled": true, "featured": false, "description": "Welcome to the Hall of Colonels, a journey into Colonel Sanders' legendary past.", "client": "Wieden+Kennedy Portland & KFC", "date": "May 2015", "role": "Design, Animation, Development", "url": "", "poster": "img/projects/hall-of-colonels/hall-of-colonels-poster-archive.jpg", "poster_m": "img/projects/hall-of-colonels/mobile/hall-of-colonels-poster-m.jpg", "categories": [ "games" ], "awards": [ { "type": "fwa-sotd", "name": "Site of the Day" }, { "type": "fwa-motd", "name": "Mobile Site of the Day" }, { "type": "awwwards-sotd", "name": "Site of the Day" } ], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "165229119", "vimeo_video_url": "https://player.vimeo.com/external/165229119.hd.mp4?s=5e620527ce6d3f8b5beccfe7e537f87f26415a58&profile_id=174", "video_name": "hall of colonels", "video_poster": "img/projects/hall-of-colonels/mobile/hall-of-colonels-video.jpg", "src_width": 1280, "src_height": 720 } }, { "type": "image", "data": { "src": "img/projects/hall-of-colonels/mobile/hall-of-colonels-02.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "text", "data": { "title": "History's Greatest Chicken Chef", "body": "In this virtual animatronic museum, you’ll find games, music, theatre and a whole lot more. From fistfights to shootouts, you’ll learn facts about the Colonel’s life you won’t believe. It’s like a boring history lesson without the boring." } }, { "type": "image", "data": { "src": "img/projects/hall-of-colonels/mobile/hall-of-colonels-03.jpg", "src_width": 1400, "src_height": 891 } }, { "type": "text", "data": { "title": "Real Fake", "body": "In a fit of hubris, we decided to make physical objects. Yes, we made non-digital things! Things you can feel. Or rub up against. Or poke with a stick. We know, it's weird. With the help of some special effects make-up artists, we recreated the head of Colonel Sanders three times: one young, one old and one bronze. The last one was to represent the deceased Colonel (because somehow it seemed too soon for a zombie version). Colonel Sanders might not have lived to see the digital age, but a phalanx of his prosthetic lookalikes is the next best thing.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/hall-of-colonels/mobile/hall-of-colonels-04.jpg", "src_width": 1400, "src_height": 865 } }, { "type": "image", "data": { "src": "img/projects/hall-of-colonels/mobile/hall-of-colonels-05.jpg", "src_width": 1400, "src_height": 865 } }, { "type": "image", "data": { "src": "img/projects/hall-of-colonels/mobile/hall-of-colonels-06.jpg", "src_width": 1400, "src_height": 865 } }, { "type": "text", "data": { "title": "Colonel Quest", "body": "The taste of KFC reminds us of a simpler time. Like the Great Depression, for instance (which, apparently, wasn't all that great), or the 1980s (which totally was). In our case, it was the era of classic console games. Which is why we made Colonel Quest - an epic cycle of six 8-bit games based on true events from the Colonel's life. Forget your over-engineered modern controllers, these games are played with just two buttons. They’re finger clickin' good." } }, { "type": "mobile", "data": { "src": "img/projects/hall-of-colonels/mobile/hall-of-colonels-mobile1.jpg", "src_width": 568, "src_height": 320 } }, { "type": "image", "data": { "src": "img/projects/hall-of-colonels/mobile/hall-of-colonels-07.jpg", "src_width": 1400, "src_height": 865 } }, { "type": "image", "data": { "src": "img/projects/hall-of-colonels/mobile/hall-of-colonels-08.jpg", "src_width": 1400, "src_height": 865 } }, { "type": "mobile", "data": { "portrait": false, "src": "img/projects/hall-of-colonels/mobile/hall-of-colonels-mobile2.jpg", "src_width": 568, "src_height": 320, "z_index": 1 } }, { "type": "image", "data": { "src": "img/projects/hall-of-colonels/mobile/hall-of-colonels-09.jpg", "src_width": 1024, "src_height": 768 } }, { "type": "image", "data": { "src": "img/projects/hall-of-colonels/mobile/hall-of-colonels-10.jpg", "src_width": 1400, "src_height": 865 } }, { "type": "text", "data": { "title": "Drumstick Gaming", "body": "To promote the site, we made game controllers out of real imitation chicken drumsticks and sent them to high profile influencers. Most of them were just confused, but some people thought they were awesome. And the second sort of people were right." } }, { "type": "image", "data": { "src": "img/projects/hall-of-colonels/mobile/hall-of-colonels-drumsticks.jpg", "src_width": 1020, "src_height": 640 } } ] }, { "route": "chekhov-is-alive", "title": "Chekhov is Alive", "enabled": true, "featured": false, "description": "We took one of the greatest writers of 19th century and brought his work to life with the technology of the 21st.", "client": "SLAVA & Google Creative Lab", "date": "Nov 2015", "role": "Design, , Illustration, Animation, Development", "url": "https://chekhov.withgoogle.com/alive", "poster": "img/projects/chekhov-is-alive/chekhov-is-alive-poster.jpg", "poster_m": "img/projects/chekhov-is-alive/mobile/chekhov-is-alive-poster-m.jpg", "categories": [ ], "awards": [ { "type": "fwa-motd", "name": "Mobile Site of the Day" }, { "type": "awwwards-sotd", "name": "Site of the Day" } ], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "166161708", "vimeo_video_url": "https://player.vimeo.com/external/166161708.hd.mp4?s=4fdb58e66402875b2aba783cd43146a93b83202b&profile_id=174", "video_name": "chekhov is alive", "video_poster": "img/projects/chekhov-is-alive/mobile/chekhov-is-alive-video.jpg", "src_width": 1280, "src_height": 720 } }, { "type": "image", "data": { "src": "img/projects/chekhov-is-alive/mobile/chekhov-is-alive-01a.jpg", "src_width": 1400, "src_height": 771 } }, { "type": "image", "data": { "src": "img/projects/chekhov-is-alive/mobile/chekhov-is-alive-01b.jpg", "src_width": 1400, "src_height": 771 } }, { "type": "text", "data": { "title": "Which Character Are You?", "body": "Chekhov Is Alive is an online character quiz and audition created for a marathon livestreamed reading event of Anton Chekhov's plays. The website featured animated illustrations of 28 of Chekhov’s classic characters, wrapped in a playful material design." } }, { "type": "image", "data": { "src": "img/projects/chekhov-is-alive/mobile/chekhov-is-alive-11.jpg", "src_width": 1400, "src_height": 771 } }, { "type": "image", "data": { "src": "img/projects/chekhov-is-alive/mobile/chekhov-is-alive-02.jpg", "src_width": 1400, "src_height": 771 } }, { "type": "image", "data": { "src": "img/projects/chekhov-is-alive/mobile/chekhov-is-alive-03.jpg", "src_width": 1400, "src_height": 771 } }, { "type": "image", "data": { "src": "img/projects/chekhov-is-alive/mobile/chekhov-is-alive-04.jpg", "src_width": 1400, "src_height": 770 } }, { "type": "mobile", "data": { "portrait": true, "src": "img/projects/chekhov-is-alive/mobile/chekhov-is-alive-05.jpg", "src_width": 640, "src_height": 1238, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "src": "img/projects/chekhov-is-alive/mobile/chekhov-is-alive-06.jpg", "src_width": 640, "src_height": 1238, "mobile_pair": true } }, { "type": "image", "data": { "src": "img/projects/chekhov-is-alive/mobile/chekhov-is-alive-08.jpg", "src_width": 1400, "src_height": 771 } }, { "type": "image", "data": { "src": "img/projects/chekhov-is-alive/mobile/chekhov-is-alive-07a.jpg", "src_width": 1400, "src_height": 771 } }, { "type": "image", "data": { "src": "img/projects/chekhov-is-alive/mobile/chekhov-is-alive-07b.jpg", "src_width": 1400, "src_height": 771 } }, { "type": "text", "data": { "title": "A Livestreamed Reading", "body": "After taking the quiz, users were able to record and submit an audition to become part of the 24 hour livestreamed reading of Chekhov. During the reading, 700 people performed Chekov on 25 stages, from New York to Yuzhno-Sakhalinsk." } }, { "type": "image", "data": { "src": "img/projects/chekhov-is-alive/mobile/chekhov-is-alive-reading1.jpg", "src_width": 1440, "src_height": 771 } }, { "type": "image", "data": { "src": "img/projects/chekhov-is-alive/mobile/chekhov-is-alive-reading3.jpg", "src_width": 1440, "src_height": 771 } }, { "type": "image", "data": { "src": "img/projects/chekhov-is-alive/mobile/chekhov-is-alive-reading2.jpg", "src_width": 1440, "src_height": 771 } }, { "type": "text", "data": { "title": "Unprecedented Response", "body": "The unprecedented media attention and public interest resulted in massive site traffic and millions of viewers for the livestreaming event. The project breathed life into Chekhov's works and brought him a new generation of fans." } }, { "type": "image", "data": { "src": "img/projects/chekhov-is-alive/mobile/chekhov-is-alive-12.jpg", "src_width": 1400, "src_height": 766 } }, { "type": "text", "data": { "title": "Results", "body": "We had 1 million+ site visits, 528,990 took the online test and 850 recorded a video audition. There were 5.4 billion media impressions, 6 million views of promo video, and 3 million playbacks of the livestream. The Google+ page got 20,000 followers and 4 million impressions, while Google searches for Chekhov increased fourfold, after project was announced." } } ] }, { "route": "fantasticas-aventuras", "title": "Las Fantasticas Aventuras", "enabled": true, "featured": false, "description": "A custom Tumblr showcasing a series of user-inspired films for the release of the new Ford Focus.", "client": "Zubi Advertising & Ford", "date": "Aug 2015", "role": "Design, Animation, Development", "url": "", "poster": "img/projects/fantasticas-aventuras/fantasticas-aventuras-poster-archive.jpg", "poster_m": "img/projects/fantasticas-aventuras/mobile/fantasticas-aventuras-poster-m.jpg", "categories": [ ], "awards": [ { "type": "fwa-sotd", "name": "Site of the Day" }, { "type": "fwa-motd", "name": "Mobile Site of the Day" }, { "type": "awwwards-sotd", "name": "Site of the Day" } ], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "166160458", "vimeo_video_url": "https://player.vimeo.com/external/166160458.hd.mp4?s=253803f313ead8476a68ad06f025eb9cb05616b2&profile_id=174", "video_name": "las fantasticas aventuras", "video_poster": "img/projects/fantasticas-aventuras/mobile/fantasticas-aventuras-video.jpg", "src_width": 1280, "src_height": 720 } }, { "type": "image", "data": { "src": "img/projects/fantasticas-aventuras/mobile/fantasticas-aventuras-01.jpg", "src_width": 1400, "src_height": 843 } }, { "type": "text", "data": { "title": "Engaging the Audience", "body": "Las Fantásticas Aventuras was an elegant repository for a user-influenced web series, featuring the 2015 Ford Focus. Aimed at U.S. Hispanic millennials, the campaign set out to subvert familiar tropes and traditional stereotypes, with video content taking centre stage and users deciding the direction of the story." } }, { "type": "image", "data": { "src": "img/projects/fantasticas-aventuras/mobile/fantasticas-aventuras-02.jpg", "src_width": 1400, "src_height": 845 } }, { "type": "image", "data": { "src": "img/projects/fantasticas-aventuras/mobile/fantasticas-aventuras-03.jpg", "src_width": 1400, "src_height": 843 } }, { "type": "mobile", "data": { "portrait": true, "src": "img/projects/fantasticas-aventuras/mobile/fantasticas-aventuras-04.jpg", "src_width": 640, "src_height": 1596, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "src": "img/projects/fantasticas-aventuras/mobile/fantasticas-aventuras-05.jpg", "src_width": 640, "src_height": 1596, "mobile_pair": true } }, { "type": "image", "data": { "src": "img/projects/fantasticas-aventuras/mobile/fantasticas-aventuras-06.jpg", "src_width": 1400, "src_height": 843 } }, { "type": "text", "data": { "title": "User Generated Content", "body": "We were tasked to create a site that would inspire users to participate in the campaign. A custom form allowed users to write and submit their scripts for upcoming chapters. The most compelling ideas were selected and a new chapter was filmed and released every two weeks." } }, { "type": "image", "data": { "src": "img/projects/fantasticas-aventuras/mobile/fantasticas-aventuras-07.jpg", "src_width": 1400, "src_height": 843 } }, { "type": "image", "data": { "src": "img/projects/fantasticas-aventuras/mobile/fantasticas-aventuras-08.jpg", "src_width": 1400, "src_height": 843 } }, { "type": "text", "data": { "title": "UGC = User Generated Coolness", "body": "We received over two thousand story submissions over the course of the campaign. From zombie luchadores to a daring chicken rescue, users took the film in directions nobody had imagined. Most of our site visitors stayed for the videos and we gained thousands of dedicated fans who faithfully came back to watch new chapters." } }, { "type": "image", "data": { "src": "img/projects/fantasticas-aventuras/mobile/fantasticas-aventuras-10.jpg", "src_width": 1400, "src_height": 1164 } }, { "type": "mobile", "data": { "portrait": true, "src": "img/projects/fantasticas-aventuras/mobile/fantasticas-aventuras-09.jpg", "src_width": 640, "src_height": 2918, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "src": "img/projects/fantasticas-aventuras/mobile/fantasticas-aventuras-09-2.jpg", "src_width": 640, "src_height": 2918, "mobile_pair": true } } ] }, { "route": "the-self-destructing-book", "title": "The Self-Destructing Book", "enabled": true, "featured": false, "description": "James Patterson is the world’s #1 bestselling author. His latest book, 'Private Vegas', is about to self-destruct. ", "client": "Mother New York & James Patterson", "date": "Jan 2015", "role": "Design, Animation, Development", "url": "", "poster": "img/projects/the-self-destructing-book/the-self-destructing-book-poster-archive.jpg", "poster_m": "img/projects/the-self-destructing-book/mobile/the-self-destructing-book-poster-m.jpg", "categories": [ ], "awards": [ { "type": "fwa-sotd", "name": "TCEA" }, { "type": "fwa-sotd", "name": "Site of the Day" }, { "type": "fwa-motd", "name": "Mobile Site of the Day" }, { "type": "awwwards-sotd", "name": "Site of the Day" }, { "type": "cannes-lion", "name": "Cannes Silver Lion" }, { "type": "one-show", "name": "Silver Pencil" }, { "type": "one-show", "name": "Bronze Pencil" }, { "type": "webbys", "name": "Webby Award Winner" } ], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "123375958", "vimeo_video_url": "https://player.vimeo.com/external/123375958.hd.mp4?s=146618835fd1d9ee3c2d95bd64e4e75d155a23d6&profile_id=113", "video_name": "the self destructing book", "video_poster": "img/projects/the-self-destructing-book/mobile/the-self-destructing-book-video.jpg", "src_width": 1280, "src_height": 720 } }, { "type": "text", "data": { "title": "The Most Thrilling Read Ever", "body": "For the launch of James Patterson's 'Private Vegas', Resn and Mother New York wanted to make sure the experience was as exhilarating as possible. To do this, we created the Self-Destructing Book, an electrifying, digitally augmented thrill-ride, befitting the Master of Suspense." } }, { "type": "image", "data": { "src": "img/projects/the-self-destructing-book/mobile/the-self-destructing-book-01a.jpg", "src_width": 1400, "src_height": 826 } }, { "type": "image", "data": { "src": "img/projects/the-self-destructing-book/mobile/the-self-destructing-book-01b.jpg", "src_width": 1400, "src_height": 826 } }, { "type": "text", "data": { "title": "Design & Experience", "body": "We developed an iPad-exclusive version of the book, complete with animated thrills at key moments in the action. Through our website, we gave away 1,000 copies to lucky winners, who had 24 hours to read the book before it self-destructed. To ensure only the winners could access it, we created a unique code for every copy and released them in batches over five days." } }, { "type": "image", "data": { "src": "img/projects/the-self-destructing-book/mobile/the-self-destructing-book-04.png", "src_width": 800, "src_height": 1072 } }, { "type": "image", "data": { "src": "img/projects/the-self-destructing-book/mobile/the-self-destructing-book-02.jpg", "src_width": 1400, "src_height": 825 } }, { "type": "text", "data": { "title": "Dramatic Tension", "body": "We designed every aspect of our app to heighten the tension of the reading experience. As the story unfolds, blood splatters across the screen. Smoke obscures the text. Hidden messages appear. Police sirens wail. Explosions envelop the page. In every possible way, we put readers directly into the action." } }, { "type": "image", "data": { "src": "img/projects/the-self-destructing-book/mobile/the-self-destructing-book-05.png", "src_width": 800, "src_height": 1072 } }, { "type": "image", "data": { "src": "img/projects/the-self-destructing-book/mobile/the-self-destructing-book-05-2.png", "src_width": 800, "src_height": 1072 } }, { "type": "text", "data": { "title": "It's a Sabotage!", "body": "After entering the access code, the countdown begins. As a constant reminder, a timer counts down every second, until the very last. To connect site visitors to the reading experience, we let them steal time from our winners. Users were connected in real-time to our readers via the hub. By clicking the 'Sabotage Timer' button, they could steal fifteen minutes of reading time, heightening the tension and forcing winners to read fastr. " } }, { "type": "image", "data": { "src": "img/projects/the-self-destructing-book/mobile/the-self-destructing-book-06.jpg", "src_width": 1400, "src_height": 808 } } ] }, { "route": "morning-win", "title": "belVita #MorningWin", "enabled": true, "featured": false, "description": "With Belvita #MorningWin, we gave users personalized websites that lasted four hours, featuring a selection of crazy, bite-sized games.", "client": "Droga5 & belVita Bites", "date": "Jan 2015", "role": "Design, Illustration, Animation, Development", "url": "http://belvita.resn.co.nz/", "poster": "img/projects/morning-win/morning-win-poster-archive.jpg", "poster_m": "img/projects/morning-win/mobile/morning-win-poster-m.jpg", "categories": [ "games" ], "awards": [ { "type": "fwa-sotd", "name": "Site of the Day" }, { "type": "fwa-motd", "name": "Mobile Site of the Day" } ], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "165964431", "vimeo_video_url": "https://player.vimeo.com/external/165964431.hd.mp4?s=0a29aa54a455e50cebca70912e992e462c78b2cc&profile_id=174", "video_name": "morning win", "video_poster": "img/projects/morning-win/mobile/morning-win-video.jpg", "src_width": 1280, "src_height": 720 } }, { "type": "text", "data": { "title": "Four Hours of Fun", "body": "Released as part of Droga5's belVita Breakfast Bites campaign, we made 15 absurdly interactive games and webtoys. Users who tweeted the #MorningWin hashtag received a link to a website with a selection of games, personalized with their tweet, Twitter handle, and profile picture. Since belVita Bites give you four hours of energy, the website lasted four hours before it disappeared." } }, { "type": "image", "data": { "src": "img/projects/morning-win/mobile/morning-win-grid.jpg", "src_width": 1400, "src_height": 745 } }, { "type": "text", "data": { "title": "A Collaborative Collaboration", "body": "The highly collaborative creative process saw both Resn and Droga5 pitching game ideas. We tabled any suggestion, as long as it sounded sufficiently absurd. After selecting the strongest concepts, we turned them into silly pictures. Then we threw away the worst pictures and punished those responsible. Careers and lives were lost in the process. Also, limbs." } }, { "type": "image", "data": { "src": "img/projects/morning-win/mobile/morning-win-01a.jpg", "src_width": 1400, "src_height": 746 } }, { "type": "image", "data": { "src": "img/projects/morning-win/mobile/morning-win-02.jpg", "src_width": 1400, "src_height": 782 } }, { "type": "image", "data": { "src": "img/projects/morning-win/mobile/morning-win-03.jpg", "src_width": 1100, "src_height": 615 } }, { "type": "image", "data": { "src": "img/projects/morning-win/mobile/morning-win-04.jpg", "src_width": 1400, "src_height": 782 } }, { "type": "image", "data": { "src": "img/projects/morning-win/mobile/morning-win-06a.jpg", "src_width": 1400, "src_height": 782 } }, { "type": "image", "data": { "src": "img/projects/morning-win/mobile/morning-win-06b.jpg", "src_width": 1400, "src_height": 782 } }, { "type": "text", "data": { "title": "Metaphysical Sump Thing Something", "body": "From twisting characters into impossible yoga poses to protecting random objects from being stolen by a kleptomaniac eagle, belVita #Morning Win was the result of purging our collective unconsciousness of its repressed metaphysical desires and depositing them onto the substrate of the digital plane. Or something." } }, { "type": "image", "data": { "src": "img/projects/morning-win/mobile/morning-win-07.jpg", "src_width": 1400, "src_height": 782 } }, { "type": "image", "data": { "src": "img/projects/morning-win/mobile/morning-win-08.jpg", "src_width": 1400, "src_height": 782 } }, { "type": "image", "data": { "src": "img/projects/morning-win/mobile/morning-win-10a.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/morning-win/mobile/morning-win-10b.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/morning-win/mobile/morning-win-11.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/morning-win/mobile/morning-win-12.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/morning-win/mobile/morning-win-13.jpg", "src_width": 1400, "src_height": 788 } } ] }, { "route": "play-your-stripes", "title": "Play Your Stripes", "enabled": true, "featured": false, "description": "Resn and Wieden+Kennedy New York partnered to create Gap: Play Your Stripes, an augmented reality experience that turns your winter wardrobe into a musical masterpiece.", "client": "Wieden+Kennedy New York & GAP", "date": "Dec 2014", "role": "Design, Animation, Development", "poster": "img/projects/play-your-stripes/play-your-stripes-poster-archive.jpg", "poster_m": "img/projects/play-your-stripes/mobile/play-your-stripes-poster-m.jpg", "categories": [ ], "awards": [ { "type": "fwa-sotd", "name": "Site of the Day" }, { "type": "fwa-motd", "name": "Mobile Site of the Day" } ], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "166277293", "vimeo_video_url": "https://player.vimeo.com/external/166277293.hd.mp4?s=e36bea5e6ef2016dcacf417d02dfbb7bcf355125&profile_id=174", "video_name": "play your stripes", "video_poster": "img/projects/play-your-stripes/mobile/play-your-stripes-video.jpg", "src_width": 1280, "src_height": 720 } }, { "type": "text", "data": { "title": "Musical Clothing", "body": "Our challenge was to let users put on an ordinary striped outfit, stand in front of a webcam, and start making music. It had to be simple, intuitive, and fun. Part of Gap’s Holiday Gift Guide, Play Your Stripes features the song ‘It Is What It Is’ and tracks by Disasteradio." } }, { "type": "image", "data": { "src": "img/projects/play-your-stripes/mobile/play-your-stripes-01.jpg", "src_width": 1400, "src_height": 875 } }, { "type": "text", "data": { "title": "Rapid Problem Solving", "body": "A technology discovery phase allowed us to quickly experiment with different approaches to solve a complex creative problem. To find the best approach, we developed a range of prototypes exploring stripe detection, hand tracking, sample triggering, beat quantizing and audio mixing." } }, { "type": "image", "data": { "src": "img/projects/play-your-stripes/mobile/play-your-stripes-02a.jpg", "src_width": 1400, "src_height": 810 } }, { "type": "image", "data": { "src": "img/projects/play-your-stripes/mobile/play-your-stripes-02b.jpg", "src_width": 1400, "src_height": 810 } }, { "type": "text", "data": { "title": "Detecting Stripes and Hands", "body": "Our proprietary Smart Stripe Detection Systemâ„¢ analyses colour changes within the image to locate the boundaries of stripes and define the areas that the user can play. To detect hands, we analyse differences in lightness values on the webcam feed. Frame-to-frame, we track user movement and use blob detection to determine the position of the user's hands and detect which stripes they are touching." } }, { "type": "image", "data": { "src": "img/projects/play-your-stripes/mobile/play-your-stripes-03.jpg", "src_width": 1280, "src_height": 720 } }, { "type": "mobile", "data": { "portrait": true, "src": "img/projects/play-your-stripes/mobile/play-your-stripes-04.jpg", "src_width": 640, "src_height": 1136, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "src": "img/projects/play-your-stripes/mobile/play-your-stripes-05.jpg", "src_width": 640, "src_height": 1136, "mobile_pair": true } }, { "type": "text", "data": { "title": "Audio Mixing", "body": "Music is dynamically mixed, in real-time. This ensures the audio tracks are in sync with each other and the video. Recorded audio is spliced with the user’s video so they that they can share it on their social networks." } }, { "type": "image", "data": { "src": "img/projects/play-your-stripes/mobile/play-your-stripes-06a.jpg", "src_width": 1425, "src_height": 806 } }, { "type": "image", "data": { "src": "img/projects/play-your-stripes/mobile/play-your-stripes-06b.jpg", "src_width": 1425, "src_height": 806 } }, { "type": "image", "data": { "src": "img/projects/play-your-stripes/mobile/play-your-stripes-07.jpg", "src_width": 1400, "src_height": 788 } }, { "type": "image", "data": { "src": "img/projects/play-your-stripes/mobile/play-your-stripes-08.jpg", "src_width": 1390, "src_height": 978 } } ] }, { "route": "way-of-the-desperados", "title": "Way of the Desperados", "enabled": true, "featured": false, "description": "Way of the Desperados. With GIFs from pixel wizards near and far. So drop the sanity act. Put your face in it. And let your pupils party.", "client": "Wieden+Kennedy Amsterdam & Heineken", "date": "Jul 2015", "role": "Design, Animation, Development", "url": "", "poster": "img/projects/desperados/desperados-poster-archive.jpg", "poster_m": "img/projects/desperados/mobile/desperados-poster-m.jpg", "categories": [ ], "awards": [ { "type": "fwa-sotd", "name": "Site of the Day" }, { "type": "fwa-motd", "name": "Mobile Site of the Day" } ], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "166159125", "vimeo_video_url": "https://player.vimeo.com/external/166159125.hd.mp4?s=7b668d609839a71ad2b1fa0a48337de5eefe51fd&profile_id=174", "video_name": "desperados", "video_poster": "img/projects/desperados/mobile/desperados-video.jpg", "src_width": 1280, "src_height": 720 } }, { "type": "text", "data": { "title": "GIFtastic", "body": "Way of the Desperados is an interactive Tumblr experience like no other. The unexpected and surprising GIFs are paired with random rollovers of variable speed, rotation, and scale." } }, { "type": "image", "data": { "src": "img/projects/desperados/mobile/desperados-01.jpg", "src_width": 1300, "src_height": 731 } }, { "type": "text", "data": { "title": "A Fluid Experience", "body": "Our top priority was silky-smooth UX. As you scroll through the page, textures are uploaded and removed. To increase the performance, we used the GPU to accelerate the native scroll and to move and animate elements on the page." } }, { "type": "image", "data": { "src": "img/projects/desperados/mobile/desperados-02.jpg", "src_width": 1300, "src_height": 731 } }, { "type": "mobile", "data": { "portrait": true, "src": "img/projects/desperados/mobile/desperados-05.jpg", "src_width": 544, "src_height": 4303, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "src": "img/projects/desperados/mobile/desperados-05.jpg", "src_width": 544, "src_height": 1430, "mobile_pair": true } }, { "type": "image", "data": { "src": "img/projects/desperados/mobile/desperados-06.jpg", "src_width": 1300, "src_height": 731 } }, { "type": "text", "data": { "title": "Structured Creativity", "body": "We used the Tumblr API to create a flexible front end. We mirror the page structure to maintain a cohesion between the experience and the base API, giving us creative freedom within the Tumblr platform." } }, { "type": "image", "data": { "src": "img/projects/desperados/mobile/desperados-10.jpg", "src_width": 1300, "src_height": 731 } }, { "type": "image", "data": { "src": "img/projects/desperados/mobile/desperados-11.jpg", "src_width": 1300, "src_height": 731 } }, { "type": "text", "data": { "title": "High Performance", "body": "Our biggest challenge was enabling users to scroll through an unlimited number of GIFs without compromising performance. The solution was to use a static image when the page is scrolling, then replace it with a GIF when it stops." } }, { "type": "image", "data": { "src": "img/projects/desperados/mobile/desperados-12.jpg", "src_width": 1300, "src_height": 731 } } ] }, { "route": "evinrude-etec-g2", "title": "Evinrude E-TEC G2", "enabled": true, "featured": false, "description": "We introduce you to the world’s most advanced outboard engine, the Evinrude E-TEC G2, and give you the tools to design your own.", "client": "Cramer-Krasselt & Bombardier Recreational Products", "date": "Jun 2014", "role": "Design, Animation, Development", "url": "http://www.chooseyouretec.com/en-us/", "poster": "img/projects/evinrude-etec-g2/evinrude-etec-g2-poster-archive.jpg", "poster_m": "img/projects/evinrude-etec-g2/mobile/evinrude-etec-g2-poster-m.jpg", "categories": [ ], "awards": [ { "type": "fwa-sotd", "name": "Site of the Day" }, { "type": "fwa-motd", "name": "Mobile Site of the Day" } ], "items": [ { "type": "mobilevideo", "data": { "vimeo_id": "165951750", "vimeo_video_url": "https://player.vimeo.com/external/165951750.hd.mp4?s=5c52481d2a79c48383cdd4314b0ddc284248152c&profile_id=174", "video_name": "evinrude etec g2", "video_poster": "img/projects/evinrude-etec-g2/mobile/evinrude-etec-g2-video.jpg", "src_width": 1280, "src_height": 720 } }, { "type": "text", "data": { "title": "Breakthrough Design", "body": "Choose Your E-TEC makes the Evinrude E-TEC G2 come to life. Learn all about the engine and explore its breakthrough features. Then, design your own with the simple and intuitive Customizer." } }, { "type": "image", "data": { "src": "img/projects/evinrude-etec-g2/mobile/evinrude-etec-g2-01.jpg", "src_width": 1400, "src_height": 824 } }, { "type": "text", "data": { "title": "Frame Loading", "body": "With 264 frames in the About sequence, our challenge was to provide a high-quality experience with minimal wait time. Before we let users in, we load the first frame in high-resolution and half the other frames in medium-resolution. Afterward, we continue to improve the frame quality in the background." } }, { "type": "image", "data": { "src": "img/projects/evinrude-etec-g2/mobile/evinrude-etec-g2-02.jpg", "src_width": 1400, "src_height": 824 } }, { "type": "mobile", "data": { "portrait": true, "src": "img/projects/evinrude-etec-g2/mobile/evinrude-etec-g2-03.jpg", "src_width": 640, "src_height": 1136, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "src": "img/projects/evinrude-etec-g2/mobile/evinrude-etec-g2-04.jpg", "src_width": 640, "src_height": 1136, "mobile_pair": true } }, { "type": "image", "data": { "src": "img/projects/evinrude-etec-g2/mobile/evinrude-etec-g2-05a.jpg", "src_width": 1400, "src_height": 824 } }, { "type": "image", "data": { "src": "img/projects/evinrude-etec-g2/mobile/evinrude-etec-g2-05b.jpg", "src_width": 1400, "src_height": 824 } }, { "type": "text", "data": { "title": "The E-TEC Journey", "body": "Dynamic camera movements take you through an animated sequence that shows the full extent of the engine, inside and out. So as you journey through the site, the engine moves with you, revealing new angles and layers that show-off its breakthrough design." } }, { "type": "image", "data": { "src": "img/projects/evinrude-etec-g2/mobile/evinrude-etec-g2-06.jpg", "src_width": 1400, "src_height": 824 } }, { "type": "image", "data": { "src": "img/projects/evinrude-etec-g2/mobile/evinrude-etec-g2-07-2.jpg", "src_width": 1400, "src_height": 824 } }, { "type": "mobile", "data": { "portrait": true, "src": "img/projects/evinrude-etec-g2/mobile/evinrude-etec-g2-08.jpg", "src_width": 640, "src_height": 1136, "mobile_pair": true, "mobile_collapse": true } }, { "type": "mobile", "data": { "portrait": true, "src": "img/projects/evinrude-etec-g2/mobile/evinrude-etec-g2-08-2.jpg", "src_width": 640, "src_height": 1136, "mobile_pair": true } }, { "type": "image", "data": { "src": "img/projects/evinrude-etec-g2/mobile/evinrude-etec-g2-09a.jpg", "src_width": 1400, "src_height": 821 } }, { "type": "image", "data": { "src": "img/projects/evinrude-etec-g2/mobile/evinrude-etec-g2-09b.jpg", "src_width": 1400, "src_height": 821 } }, { "type": "image", "data": { "src": "img/projects/evinrude-etec-g2/mobile/evinrude-etec-g2-09c.jpg", "src_width": 1400, "src_height": 821 } }, { "type": "text", "data": { "title": "Customizer Tool", "body": "Customize an E-TEC G2 by selecting its horsepower and designing its colour scheme. Rotate the engine for a complete 360° view of the final result. Once you’ve perfected the design, you can download a dynamic PDF of your engine’s specifications and share it on social media.", "top_offset": 120 } }, { "type": "image", "data": { "src": "img/projects/evinrude-etec-g2/mobile/evinrude-etec-g2-10.jpg", "src_width": 1400, "src_height": 824 } } ] } ] }