Anne Lorraine Uy Portfolio
My Mercedes

creative direction, design, web development
───  Known globally for their luxury automobiles, Germany-headquartered Mercedes-Benz never fails to emanate an air of class and sophistication, without the compromise of performance. I can only say that I am truly blessed to be handed an opportunity to contribute a microsite marketing slash digital campaign for MB Surrey under the indispensable mentorship of Flowmarq Creative Inc. I was all sorts of things for this project, and I loved every part of its creative (and yes, development) process.

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:

Wireframing in InDesign
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.
Indesign Process

Rapid Prototyping using Macaw
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).

Development and initial testing on localhost server
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 and post-production
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!

Cross-browser compatibility testing
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.

Chinese translation by Christina Chan
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.

Tracking with Google Analytics
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

Awarded honourable mention in Digital Marketing Design
Bilingual – available in English and Mandarin
One of the top referrals to the main dealership website

Watch the walkthrough (make sure to click “HD”):

RGD student award 2015



Mercedes Benz Surrey, BC Canada


Internship Project at Flowmarq Creative Inc.

My Role

Creative Direction, Web Design & Development, Photography, Videography


RGD 2015 Student Awards - Honourable Mention in Digital Marketing Design


Brian Ho, CLA45 AMG
Amrit Minhas, S550
Zhizhong Si, GL350


Video editing, graphic design & Chinese translation by Christina Chan

Published, since May 2015