INTERACTION DESIGN, UI/UX
First collaboration from Mercedes-Benz with an outside organization to build a digital experience for their Canadian Magazine. One of the main tasks was to set up a repository for the content for new and existing content from the printed magazines. It's not every day that you can to work with such a big brand, it was definitely a great and learning experience to work with Mercedes-Benz.
The client feedback was greatly positive and our team was awarded a 2015 Folio Digital Award for Site Design and Best Site Design in the Ozzies Digital category. It was awarding to witness such results with a process from the design architecture, sitemap, wireframes, prototyping, testing and final launch.
Agency: Spafax Interactive
Role: Design Lead
Credits: Natasha Mekhail, Celyn Harding-Jones, Guillaume Briere, Christal Agostino, Charles Lim, Lori Morgan, Adrian Kronowetter, Mélisa Discepola, Long Nguyen, Nancy Kovacs, Renee Morrison, Kristina Velan, Moses Moore
Designed and built a responsive website by creating category sections in relation with archive pages. Visually, it was a digital observation from the printed magazine taken from the branding guidelines; it was truly a representation of the Mercedes-Benz brand and vision.
We decided to start off with a main image represented by a masonry grid with 2x2 row of content. Mixing between different sizes of images to create a digital experience of the printed magazine.
Long Article Page
We worked at defining a behaviour for long article pages. The user will have an opportunity, from the CMS to add an image or a carousel gallery on the content to support the scrolling vs text length. We've included many subtle interactions including the element transitions for the section named: The List.
Always think mobile first. For this project, with the amount of text, it was crucial to think about
the experience especially for the quantity of scrolling. We were not necessarily fanning of the hamburger button but we wanted to setup a common behaviour for the users.