I love doing web site redesigns. These days, web sites have come to mean so much to the organizations they represent that a web site that doesn’t fit anymore affects every aspect of the business. Clients who want a redesign may want it for any of several reasons: their site is too hard to maintain using the technology in which it was built; the style is outdated and stale; or they want to add so many new features and pages that it’s best to start over completely.
It is heartbreaking for me to hear someone say, “Well, you can find that info on our web site, but I apologize for the site itself — it’s such a mess. We really need to redo it. I just haven’t had the time.” To be embarrassed by the very thing you should be using to advertise what’s great about your organization — what a shame!
In the next few posts I’ll be highlighting the redesigns I’ve been working on recently — I’ll talk about the process, the timeline, the technology, and the tools we used to get it done.
Just launched last week is the brand new site for Elizabeth Kline Designs. Elizabeth Kline is a metalsmith and jewelry artist who works in organic, sculptural shapes. Her work is sold in juried and non-juried art shows as well as several boutiques. Her goal was to redesign her web site to sell her jewelry online. Though she’d maintained an Etsy presence for years, her work was often lost in the crowd there. Elizabeth wanted her site to showcase her work in the way her art show displays did: cleanly, simply, and with the focus not on signage and competing colors and patterns.
The Original Site
Elizabeth’s original web site was one she designed herself. It was simple, clean, and functional, but it was many years old and lacked the modern look she was craving. It was also built in flat HTML she edited by hand, a difficult process for anyone who doesn’t write code every day. Uploading new images meant hours of resizing, uploading, coding, and styling. Making jewelry every week had to take precedence over uploading pictures of that jewelry, and with two small children to chase away from the jeweler’s bench and the computer, Elizabeth wisely wanted to focus on the jewelry-making, not the web site.
Her original site content was navigated by clicking on images in the center of her home page: bracelets, earrings, necklaces, rings, events & locations, and about. On the internal pages, the navigation switched to the top of the page. Contact information appeared on the “about” page and in tiny print on the other pages. Small print also differentiated the sections of each jewelry page, drawing a line between currently-available pieces and portfolio (already-sold) pieces. Though users could see each piece of jewelry and even learn the price, the only way to purchase it was to send an email to Elizabeth with the request.
Planning the Content
Elizabeth had clear goals, an organized wish list, and had already thought through what the content on her new site should include. That saved us hours of work together, something that left room in her budget for lots of time to perfect the look and feel of the site.
The first thing we did was settle on an information architecture, which took the form of an outline of her site’s content as it would be organized in the menu. Because she wanted to include more “top-level” items than her previous site, we consolidated the jewelry under one top-level item, leaving three spaces open for other things. We knew we would use the home page to highlight each type of jewelry (rings, bracelets, earrings, necklaces), so we wouldn’t lose the chance to feature them. We also took the time to describe the general content of each page so that we’d know what would appear on each one. That helped Elizabeth write the content later.
Planning the Look-and-Feel
This is usually the thing with which redesign clients are most concerned. How the site looks is usually the thing end users notice first, followed closely these days by how it looks on a mobile device. Elizabeth spent time looking at the sites of other successful jewelry designers — what did they have in common, what did she like and not like, what seemed to work well both on a desktop computer and on a mobile phone. She played a lot with these sites on her own until she had a list of designers’ web sites that she wanted to emulate online.
Because Elizabeth wanted to use WordPress as the content management system for her site, I searched through WordPress themes that seemed to work well for commerce. Based on some functionality requirements (more on that below), I recommended three themes I thought met all of her aesthetic requirements without losing the functional ones that were key to the site’s success. In the end, we chose the Mr. Tailor theme by theme developer Get Bowtied. It had everything she needed.
Elizabeth hired a talented logo designer to create visual identity pieces that I could apply to the site both as-is and as inspiration for colors and fonts. With the logos available as high-resolution images, it was easy to make them work no matter where I used them. She shared all the high-resolution images of her jewelry with me via Dropbox — the true hero of a project like this, where there are so many gigantic files to share.
Planning the Technology
Because Elizabeth came into this project relatively certain she wanted to use WordPress as her content management system, and because I already knew that I wanted to use WooCommerce as the e-commerce backbone of the site, it was much easier for us to narrow down everything else. Her list of functionality needs included:
- content management
- e-commerce
- social media linking and sharing
- blog
- contact form
- image galleries
Knowing WordPress and WooCommerce were the real backbones of the operation, it was easy to choose the other pieces. In the end, the theme she chose (more on that below) came bundled with a contact form, great blog layouts, social media, and image galleries. We knocked all of it out with one decision — a great stroke of luck.
I had some other requirements that I knew would make Elizabeth’s life easier down the line. I wanted it to be easy for her to update her theme, which we purchased from Envato, so I installed the Envato plugin on her site. It will allow her to install updates to the theme right from her WordPress dashboard in one click. I also wanted her to have support for the Open Graph framework so that when people share pages from her site on Facebook, the images and descriptions will display correctly, so I installed the Open Graph Protocol Framework plugin from http://www.itthinx.com/.
The Gorgeous Finished Product
Sometimes I feel a hum of pride at the end of a site because I was able to take important-but-dry content and make it look beautiful by choosing just the right images and layout. This was not one of those times. This time, I am proud of this site because it puts all of the attention on the absolutely stunning jewelry that Elizabeth designs. Spare on words and design elements, this site provides a truly elegant canvas for her art. Users can place orders directly on the site, and Elizabeth can point the jurors for art shows to her separate gallery of sold pieces. Her new blog adds personality, and contacting her is easy on every page.
Elizabeth achieved her goals for this site, and so did I. Congratulations, Elizabeth!
Before:
After:
Ready to embark on YOUR redesign? Drop us a line on Twitter or Facebook or via email. We can help.