Experience
Category:
creative direction, design, web development
This campaign revolved around three featured clients of Mercedes-Benz Surrey who recently purchased the best-selling 2015 models. Namely, the CLA45 AMG coupe, S550 luxury sedan and the GL350 SUV.
Each interview was conducted at the dealership and was 1-2 minutes long. We used our own equipment (Canon 5D Mk II & 70D) and rented a Sennheiser lapel mic. The whole project took around one month and two weeks to plan, design, build, test and deploy.
The goals of the microsite were acquisition (i.e. increase main site traffic), and conversion (i.e. schedule a test drive), by featuring real-life customer experiences. This translated to a more relatable association between lifestyle and choice of car, while subtly highlighting personal features that each customer loved about their vehicle.
Fans were also invited to share their own experiences and have their photos featured by using the hashtag #myMBexperience.
My biggest challenge was implementing new technologies I haven’t done before: javascript animations using GSAP and PHP .htaccess routing and URL rewriting.
Based on the MBSurrey (main website) June Google Analytics report, this microsite was one of the top referrals from desktops. As part of a scope and time budget decision, this version of the site was not designed to be responsive.
As promised to my teacher, I am happy to share a brief walkthrough of the whole process:
After gathering necessary information for a pitch, I crafted a creative brief and commissioning document for the digital marketing concept. I awaited my mentor’s necessary feedback and go-signal, and then proceeded to layout an illustration of my vision. As opposed to organizing huge Photoshop PSDs, I preferred InDesign for this task because of neat multiple-page handling and ability to show site map flow via digital interaction buttons.
To speed up the build process, a visual website design tool was utilized. Previously I’ve used Adobe Edge Reflow but the ability of Macaw to keep multiple pages in one file with a global CSS won me over (goodness you’d think that was a no-brainer minimum viable feature). Of course, with the use of currently-developing tools like these it is absolutely necessary to clean up excessively redundant code and maybe build on it (or from it) to evolve from rough to high-fidelity prototype to template framework final draft. Note: save your work often lest you experience reflexive foot-stomping and temporary psychosis due to losing all hard work from ambush application crashes (although not as much as Reflow… I lost count).
This is the environment where I built, experimented and tested it all together: setting up .htaccess routing for pretty URLs, writing PHP and HTML, jQuery and carefully orchestrating AJAX calls, refining CSS, incorporating GSAP animations and all the while constructing the site’s running scripts. Upon launch, all code was minified.
Photography was my first love and so this part had to be perfect. I am quite obsessed and fascinated by lighting and color, despite the significant lack of it in this digital campaign. I believe good lighting ties everything together and the better it is the more seamless the whole orchestrated environment looks. Notice the subtle lighting effect on the car and client–they were individually edited to look like there was only one light source. Small detail, big impact!
The main browsers tested were Chrome 44, Safari 5, Firefox 36 and IE 8 on a minimum resolution of 1024×768 and maximum 1920×1080. Limitations: HTML5 videos do not play on Internet Explorer 8, and with some computers the Chinese system font “Microsoft YaHei” default as boxes.
Based on consultation (and of course, given we’re talking about Metro Vancouver), it was of utmost importance to create a Chinese version of the microsite. Mercedes-Benz has always been one of the classic favourites for this high potential market segment who cannot deny their fancy for luxury and class on wheels. Lucky for us, our homegirl Christina Chan is absolutely excellent at Mandarin.
With all digital marketing campaigns it is essential to track its performance and effectiveness in implementation. Before you scrutinize the appallingly high bounce rate, I’d like to humbly explain that pages are loaded via Ajax and thus so. Consequently, please refer to number of pages and average session duration. This is all basic tracking though, and so wish I acquired in-depth SEO knowledge and all that good gold.
Fully executed web experience as a microsite
PHP routing using AJAX / JSON
GSAP javascript animations and jQuery
Bilingual – available in English and Mandarin
One of the top referrals to the main dealership website
Client
Mercedes Benz Surrey, BC Canada
Purpose
Internship Project at Flowmarq Creative Inc.
My Role
Creative Direction, Web Design & Development, Photography, Videography
Award
RGD 2015 Student Awards - Honourable Mention in Digital Marketing Design
Talent
Brian Ho, CLA45 AMG
Amrit Minhas, S550
Zhizhong Si, GL350
Team
Video editing, graphic design & Chinese translation by Christina Chan
Published
experience.mercedesbenzsurrey.com, since May 2015
Prev
Menu
Next