{e} house studio

Redesigning the Charleston Elves (Part 4)


Design 

Mike Hartwell on November 16, 2011

Any organization that dishes out as much love as Charleston Elves deserve a whole lot of loving back. Now that Aaron had laid the tracks for the Santa Express it was time to apply the brand to the UI work that had been done. It was time to say goodbye to the cartoon elves of yesteryear and highlight the families in need of style. We set out to change the face of Charleston Elves through good emotional design and aesthetics.

Getting Underway
We established the moodboard early on to set the tone and feel of the design. I like to use services like Imagespark or Gimmebar to make it simple to quickly tag inspiration found on the web and compile my moodboard.

As cliche as it may sound, I believe the KISS approach holds true similarly to that used in information architecture. Trying not to over-complicate the design while making a lasting impression. My first step was to set up the initial structure of my Photoshop file as close to the greybox as possible. With the grey boxes and previously established branding the work begins in Photoshop.

Timelapse: Beginning in Photoshop

Keeping the Goals in Mind
With the goals established early on it was time to start checking them off. A major goal of the redesign was to keep the page flow light and
simple, limiting the amount of distractions through hierarchy of button styles and text links. We needed to create an obvious focal point for the eye, calling out the main goals of the site. I used large easily findable bright buttons the two most important goals; becoming an elf and donating. We new the site would probably be receiving mobile traffic as well so making them legible for mobile devices is key.


Another design goal was to give it a Christmas feel without hitting you over the head with dancing Santas, tinsel, trees, reindeer, snowmen, you get the point. To achieve this, I added elements of paper texture to the background as well as a subtle argyle pattern. The paper texture is something that might resemble Santa’s list. The argyle idea came to me from traditional wrapping paper patterns. The colors remain true to the season by using customary reds and greens for important elements.

Caring is Sharing
With the subject matter, we needed to remain sensitive to the way we portrayed the children. Rather than just showing a single image of one child on the home page we wanted to show them all as a whole. Each photo in the hero collage is an actual child you can sponsor. We wanted to make each experience unique by establishing a connection with each child and their personality through their personal photos and individual stories for each bio page. Typically we use real content: Photos, Copywriting, etc. which allows for minimal adjustments during development. This project was challenging in part due to the lack of photo assets and their consistency when I started the design phase. I began the design knowing that for some children we might not be able to get any images. So, I came up with the idea of using a child’s silhouette, similar to the crafty ornaments I made as a kid. Ultimately what you see in Photoshop is what you get in your browser.

50 kids

This project has been a jolly good time to say the least. As one of my first site redesigns as the lead designer I have been given the gift of growth this holiday season. Someone great once said “It’s my job as a Designer to make the Developers hate me through challenging them with details that can often be difficult to implement, but that’s how we all grow”. Let’s hope I don’t get coal in my stocking after this one!

Stay tuned to our blog for the Development portion of the series.

Redesigning the Charleston Elves (Part 1)
Redesigning the Charleston Elves (Part 2)
Redesigning the Charleston Elves (Part 3)