HTML/CSS

Website Design and Template Coding for the IMF

in

Annual Meeting Registration Website

 

Problem

The original site was a collection inconsistent pages, born from multiple programmers with little UX or design background. No two pages were alike and all were very awkward to use. I was tasked with creating a beautiful, consistent & user friendly page design.

Solution

Using what I know about HTML and CSS, I designed and coded a few key html pages with CSS rules. This handful of pages showed how to present and code a wide variety of pages and items like tables and forms. The template pages were handed off to developers for the complete site blow out. Live pages are not available to the public, but the following links are a few of the templates I delivered to the programmers:

A favorite detail of mine from this project is a CSS-based drop down menu. Very little programming was needed under the hood.

The drop down CSS menu in action.

The drop down CSS menu in action.

CuervoNation.com "Endless Summer" Campaign for Jose Cuervo

in

The CuervoNation.com "Endless Summer" campaign was one of those projects that didn't entirely make sense at first, but my copywriting partner and I were able to find the idea to make it all come together. Looking back, it ranks among my most favorite ideas.

A PR firm had a publicity stunt all set to go for Jose Cuervo, which we supposed to tie into and develop a lead generating contest for their consumer-focused website CuervoNation.com. The PR stunt was to happen on the steps of the capital in Washington, DC as a rally to get Congress to move the date of Labor Day, the unofficial end of summer, to a later date. While that is fine for a PR stunt, political activism wasn't really the tone or voice for CuervoNation.com. We needed a way to bring grassroots to the beach… and ultimately that was our idea. What better place to communicate to like-minded people. So it's fun political activism, complete with campaign buttons as a branding element.

Take a screenshot walk-through of the "Endless Summer" contest microsite. Click on the images above.


One of Jose Cuervo's recurring missions for us, and a corner stone of direct marketing, was lead generation: people signing up as interested in the product. Endless Summer did that on steroids as it was geared around a viral marketing engine we devised. Sign the petition, then enlist other people to sign. The person with the most signatures wins an end-of-summer party thrown by Jose Cuervo. A microsite section of CuervoNation.com was created to host the contest details, along with real-time, database driven results as added incentive for users to try and win the contest.

Concept, design, and CSS programming too?

My developing team was very slammed with creating the database links and queries needed to drive the microsite properly. In order to keep the project on schedule, I lent a hand by developing a lot of the front end pages. With a  quick introduction to CSS from the Dev Team, I proceeded to crank out real-life CSS structured pages for the first time. I love projects that I can learn and grow from.

Animated email? It's actually quite simple!

Click to view the full email

"Passport" was a monthly e-newsletter developed to speak to our CuervoNation.com contact list as grown through our various lead generation tactics. Here is how "Endless Summer" looked in for the Passport email edition.

Animated email? It's actually quite simple!

The animated portion of the Endless Summer email.

The animated portion of the Endless Summer email.

Something I think is under-utilized for email is animated GIFs to build the message, as most email programs can handle them. It's really a small thing, but it's a nice touch that isn't utilized very often in email.