Mercedes-Benz Magazine Site

MERCEDES-BENZ MAGAZINE SITE

Challenge

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.

Final Result

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.

Year: 2015

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

More work on

AOIRO STUDIO

Designed and built a responsive website by creating category sections in relation with archive pages. Visually, it was a digital observation from the magazine taken from the branding guidelines; it was truly a representation of the Mercedes-Benz brand and vision.

Homepage

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.

Mobile First

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.