INTERACTION DESIGN, UI/UX

Mercedes-Benz Magazine

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.

GLE-Feature-1410x735GLE-Feature-1410x735

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

Comp-14Comp-14

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.

mbc_wireframesmbc_wireframes

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.

mbc_homepagembc_homepage

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.

mbc_articlepagembc_articlepage

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.

mbc_tablet&iphonembc_tablet&iphone
mbc_mobilembc_mobile