KeepCup Reuse Revolution HQ

We architected, designed and built the digital platform, from concept to look and feel, illustration and character design. Through the use of cute and charming character design (including associated illustrations and animations) we were able to take users on a journey. In addition to character design, small snippets of digestible information were designed in the form of infographics, charts, visualisations and small, easy to digest facts. These 'cards' were designed to be shared through social media.

Design cues were carefully crafted throughout the on-boarding experience so that users had to take minimal action. Animation and illustration did the bulk of the heavy lifting in terms of user feedback. The entire digital ecosystem was considered as part of the design process. In addition to creating a compelling and easy to use website, we designed triggered emails, social posts and reminders as part of a cohesive user experience.

The entire campaign is built around a loveable character, affectionately known as Cuppleberry (a play on Huckleberry Finn). Users receive awards as he meets milestones on his journey. The addition of Cuppleberry was crucial to the user experience. The 'timeline' Cuppleberry inhabits makes the environmental benefit into more tangible, real-world outcomes, like saving energy, saving a tree, or diverting several kilos of cups from landfill. We also created an interactive infographic (in the form of a colourful pie chart) that allows users to quickly and easily see how their usage compares to others around the world, down to the company they work at, their local cafe and their friends.

The site features a truly responsive information architecture. A series of modular cards were created to support the interactive timeline, presenting users with feedback on their progress, comparisons to others like them and sustainability tips. The cards were designed in this modular way so that they could be arranged according to each user's device. The user experience is consistently excellent across mobile phone, tablet and desktop. We also created quirky micro-copy to match the art direction of the site as part of a considered content strategy. We spent considerable time ensuring tone of voice was consistent, especially in email communications and digital touchpoints outside of the site.

The platform has now been expanded for corporate clients, with custom group milestones, competitions and customisable branding. This opens up a completely new revenue stream for KeepCup. Not only does the platform provide companies with measurable data to report as part of their corporate social responsibility reporting, it engages a company's employees with their branded company cups and encourages employees to continue to use the cups in a meaningful way. The platform has become a new and powerful tool for KeepCup to retain engagement beyond the initial cup sale, encouraging not just share-ability, but providing opportunities to link back to the online shop.

The front-end is structured to be mobile-first, allowing us to serve a lightweight mobile layout by default. Because of this, it can adapt its layout to suit wider contexts and higher resolution displays on many different devices. We utilised our device lab to test browser compatibility to a very high standard. We tested across IE 9+, Chrome, Firefox, Safari, iOS Safari and iOS Chrome. We also tested the site in popular stock Android browsers, notably Samsung devices. We're also using a very high performing and lightweight animation library called Velocity. This ensures animation is optimised effectively and runs smoothly on older devices.

http://reusehq.keepcup.com/ u: [email protected] p: 2015awards