Dilma Lopes

Website designed for Kellogg’s Vector as part of their new Show Up campaign to re-introduce the brand into the Canadian market.

Services: Digital design, Interaction design and User Experience
Team: Steve Persico, Trevor Bell, Elysia Ravenscroft, Ornella Palla, Tracy Wightman, Jacqueline Adediji

With a change in strategy to cater to a younger male demographic, Vector needed to create a new campaign to establish itself as THE protein supplement/meal replacement for your workouts and your day to day activities, such as work, family time and your breaks.

With a new creative direction was established, several pieces were created to generate media attention and define the target audience. The website needed to act as a product info page but also match the campaign enough to be recognizable as part of the Kellogg’s family and other collateral, such as social media banners and online advertising needed to follow the same visual language as the spot.

Because it was targeted at a younger demographic, the website was designed to change patterns of behaviour on the web. Instead of using a vertical scrolling, a horizontal navigation throughout the website was chosen, in a way where all the information the user needs is directly on the screen at all times.

A progress bar was added to indicate the amount of content the user has gone through and it also adds another way of navigating the website, increasing affordances. The interaction added to the website was based on tablet/mobile movements such as swipe, drag and tap, creating a more intuitive interface in all devices. The mobile version of the website was also designed taking into consideration the amount of screen sizes we have available at the moment, ranging from Android devices, to iPhones, tables and smaller desktops. During the process, several devices were used for testing, allowing the website to be designed to fit in any screen size, both horizontally and vertically.