Arden Royce Ltd.

Working at Microsoft
Digital ads
Other clients
Instructional design
Current project

Working at Microsoft

At Microsoft I functioned as the in-house design department, which meant I had to wear many different hats: Seasoned web designer and graphic artist, part-time print designer, web content expert, sometimes web copy writer, digital experience strategist, Flash developer and animator, email template builder, PowerPoint presentation editor, and let's not forget round-the-clock emergency 911 fire department. When big agencies couldn't handle the heat, I stepped in, took over projects and delivered.

MTV Casting Call
Despite Microsoft's corporate overtones, the company did a great job in appealing to today's generation of users. With a heavy social networking push, some creative writing, and advertising, we had left it up to the users to generate the content and determine the success of the project. This was the MTV Casting Call campaign website.

Redesigning Hotmail
You may be asking yourself, "Is it still around?" The answer is yes. But really, have you seen it lately? Since I was in the position to show what it could look like, I did. Although this never saw the light of day, it was a good personal project that I've been working on.

Get MSN
MSN.ca or TMZ North as we sometimes call it actually does have some good useful content if you look for it. This was another drive to get users to change their browser's homepage to MSN.ca. Depending on what browser you're using, a short demo would pop up in an overlay instructing you how to change your homepage. This one shows how to use the draggable butterfly icon for Firefox users.

Bing Shopping
Bing is Microsoft's answer to Google search. It's been holding it's own and actually does a few things that Google does not. I enjoyed the Bing team's creative approach to making it more than just a search engine.

The Hotmail Member Letter
I'm not really the King of Spam, I just make spam look really good. Yes, I am the guy responsible for populating your Hotmail inbox with Microsoft offers.

Downloaad pages
You may not notice it, but when you sign out of your web-based email account, there's a page waiting for you, made by someone like me. I quietly took pleasure in my work being possibly seen by millions.

MSN Sponsored pages
I've done a number of sponsored pages for MSN.ca including some for Lipton, Dove for Men, Becel, TIFF, The Junos, as well as a number of music acts like Jack Johnson, The Backstreet Boys, Alicia Keys, and Bon Jovi.

Live Traffic
Although this idea never made it to air, all of the tools were in place. Government regulations had stopped this from going through. At the time the concept was developed, there were no online maps providing this service.

Live Search Maps
Back in the day, during the emergence of Google as the sole answer to search engine technology, Microsoft was still trying to figure out where they stood, and that even included the name of their search engine as well. MSN Search became Live Search and that then evolved into Bing. At the time, Live Search Maps did have a few things Google Maps didn't. This was a demo page built to show what was new and unique.

I had the pleasure of working with a great team responsible for giving Internal communications or rather internal email newsletters a new and less corporate face. Much of my work in this area was seen by the entire Canadian Microsoft workforce. This email communication starts off by poking fun at Bell and then the emergence of MSN as a separate company.

"Oh no! It's Flash!"

"The sky... is falling..."

Please take a moment and browse through the internet's historic past: Linear Flash animations! I assure you, in their day, these were awesome!

I was heavily inspired by the opening credit sequence of the movie "Catch Me If You Can," starring Leo DiCaprio and Tom Hanks. I thought the graphic treatment would work well with the subject matter and also allow the banner to remain light.

At Microsoft, working with the Bing Shopping team, I would pump out ads on short notice and came up with this to show the transition to a new spring wardrobe.

With the advent of HTML5 on the horizon, Microsoft looked to take advantage of the web's new capabilites and ran a number of ads for the upcoming release of Internet Explorer 9.

IE9 was a great campaign to work on, but I had to bite my lip a number of times and wonder about the failures of IE8, IE7...

... Speak of the devil. IE9 is unfortunately only available to Windows 7 users, so campaigns for upgrading to IE8 were still underway.

This ad for the Yellow Pages Group was meant to promote the new Urbanizer iPhone app, and transitions from screen to screen simply like the app would.

Yellow Pages had the right idea of clear and concise messaging and simple call-to-actions to get their users to act.

Back in the day, when gas prices were affordable, and when Hurricane Katrina hit New Orleans, I had worked for a futures and commodities firm in Toronto called Refco. We sought to take advantage of current events affecting the markets and built these oil wells pumping out the unpredictable future of fluctuating crude oil prices.

If I could draw animals all day, that would be awesome, I thought to myself. For a while, it was true. During my time at Refco, I improved the click-through rates and gave the company a creative edge over their competitors.

Freelance work

Pearl Bridal House is a bridal boutique in the small town of Port Credit in Mississauga, Ontario. I built and designed their website entirely in Flash. Images of wedding gowns are fed in externally via XML file. The site undergoes regular updates to promote upcoming events and sales.

Toothtech is small dental office specializing in custom and cosmetic tooth detailing. Compared to what was currently online, I gave the company a fresh smile that was clean and simple.

Susan Quaglieri is a superstar real estate agent working in the Greater Toronto Area. I redesigned her website to show more of her personality and to evoke a more personal and friendlier touch.

How do I teach proper usage of HTML5 semantic elements?

Without actually writing any code and giving the answers away

I also work as a part-time instructor at Humber College (North Campus) in Toronto, ON. I teach a course called Digital Design as part of the post-graduate Web Development program. As an instructor, in order to keep things interesting for me, I try to find new ways to teach code, without giving too much away. At times, it's very safe to say I do more work than the students, when I shouldn't be. And I'm also of the approach that I'll take you this far, the rest you have to dig up for yourself. Some students don't get that and want to be spoon fed. But the ones who do, benefit greatly.

When it came time to teach the class about HTML5's new semeantic elements, I needed to show how and where a <section> or <article> element should be used. As any seasoned web designer now knows, this in itself could be a daunting issue. And so it goes for the rest of the bunch like <header>, <footer>, <aside>, <hgroup>, and <figure>.

So teaching with Photoshop as I knew it to be had suddenly evolved... Where I'd normally break down the PSD file step by step and convert it to a working HTML / CSS page, I instead deferred to the HTML5 way of thinking, that everything is up for debate, and the new semantic tags could be used based on logic and your best judgement. Now, having already coded the file separately, I put together a few extra layers in the PSD file to show where I had placed the tags. This, used in conjunction with the HTML5 Outliner brought me to the result I was after.

After a brief intro with a concise write-up of the new HTML tags and uses behind each of them, I left in the students' hands to mark-up the new layout in HTML5 and CSS3.

(On the right: The completed Photoshop file showing a new layer for proper usage of the <header> element represented by blue blocked areas.)

In the end, whether or not the student actually goes and codes the layout is entirely up to them. But from my point of view, I'm totally committed to teaching them what I would've wanted to be taught — stuff that is relevant.

If you're interested, you can download the PSD file below.

For the love of cycling

Redesign the Via Ciclante website
After admiring the sport from afar for years, followed by many long sweaty sessions on a spin bike, I've finally made the jump to a road bike — and I love it! This is one of the things I wished I had gotten into years ago. And now I'm excited to announce that I get to combine my livelihood and my new passion in one great project.

I'm about to start working on redesigning the Via Ciclante website. Via Ciclante is a bike shop in Streetsville, Mississauga, Ontario, and it just so happens to be the place where I bought my bike. The new site will focus a lot more on the physical shop itself with an emphasis on emerging bike culture taking over the streets.