From the initial phone conference with the company’s founders, Stu McLaren and Tracy Childers, I knew that this would be a fun collaboration, and a great fit. To be honest, I’ve never had a client bring so much useful information to the table during the preliminary meeting. These guys had a clear idea of how they wanted the site to function and what features needed to be included — along with dozens of examples from other sites. This information was welcome, and made the design process flow smoothly, without wasting effort on multiple design iterations.

Custom Features and Functions…

In addition to the site being built on the popular WordPress content management system, Stu and Tracy made a few other requests, which were easily accommodated…

1. Build the site using WooThemes’ Canvas as a framework.

Rather than designing the entire site from scratch — which can take several weeks — we agreed to build the site utilizing a WordPress theme from WooThemes as a framework, inheriting the powerful functions and features of the WooFramework, while also leveraging WishList staff members’ experience with other WooThemes.

Since I frequently use WooThemes as starting points for WordPress-powered theme designs, and have even produced a series of tutorial videos for WooThemes, this was an easy request that enabled me to leverage my own intimate knowledge of this flexible theme and framework to create a unique web presence for WishList Products.

2. Utilize a “Child Theme” strategy to facilitate easy upgrades.

Instead of modifying the core theme files in the Canvas framework, I created a custom child theme, which inherits all the functionality of the parent theme, but allows me to modify and add to the functionality of that parent theme. When WooThemes releases a new version of the Canvas theme or the WooFramework, the WishList folks can easily overwrite and upgrade the original theme without losing the customizations.

3. Create color variations for easy use in related sites.

Because there are three individual websites under the WishList Products moniker, the final WordPress theme will eventually be installed across all these related sites. Stu and Tracy asked me to create an easy method to change the accent color for each site, thus ensuring that each site has its own unique brand, while also maintaining a consistent design across all the web properties.

This was accomplished through the addition of a new drop-down menu in the Theme Options panel, which allows them to easily toggle between color and style variations. Each style applies a unique CSS stylesheet, overriding the default colors used in key areas throughout the page layout.

4. Site Showcase

With more than 26,000 sites currently being powered by the WishList Member plugin, it was a “no-brainer” to showcase some of those sites via a dedicated page template. I designed a system that utilizes the Gravity Forms plugin to accept entries for inclusion in the site showcase via a public-facing form. This functionality makes use of a Custom Post Type in WordPress, which allow for the creation of other content types.

Once sites are submitted and approved, they appear on the site showcase page, as well being displayed on the homepage — or any other page in the site — through the use of a custom shortcode. Tracy and Stu can simply add: [insertShowcase] to any page or post, and the site showcase will be dynamically inserted at that point in the page.

5. Testimonials

Like the site showcase, testimonials may be submitted via a public-facing form, and are randomly displayed on the homepage — or any other page in the site — through the inclusion of another custom shortcode: [insertRandomTestimonial]

The custom page template for the testimonials not only displays the text, but also includes a photograph of the individual, hovering over a background map of their city. This idea was shamelessly borrowed from 37Signals, but I designed a fully-automated process for generating the map and other elements dynamically, using the Google Maps API.

6. Featured Items and Announcements

From time to time, Stu and Tracy need to communicate important announcements on the website, so they asked me to design a system that would do so in an attention-getting way. First, I created a Custom Post Type for the announcements. When an announcement is present, a brightly-colored panel appears on the page, sliding down to reveal the contents of the announcement.

Additionally, there is a sidebar widget that resembles a Post-It note, which may be used in conjunction with the animated slider or independently.

7. Custom Widgets

As if this custom functionality wasn’t enough, there are also 11 custom-coded widgets for use in the sidebar and footer of the site(s). These widgets add a number of custom features, including displaying social proof, links to the other WishList sites, and even a counter that displays the current number of sites being powered by the WishList Member plugin.

The Design Process…

After our initial phone conference, during which the design objectives were clearly identified, I went to work, creating a simple wireframe illustration of the homepage and an inside page.

The wireframes were quickly approved, and I moved on to the next phase, creating a set of five sample pages in Photoshop, which established the common design elements, typography, colors, and layout. I created three different versions of these pages, to demonstrate the color variations which would be used across the various WishList Products websites…

The design comps were warmly received, and approval was given to move on to the coding phase. Over the next couple of weeks, I converted the Photoshop files to a fully-functional WordPress child theme, complete with custom widgets and the other features mentioned above.

The WishList Member Sales Letter

With the WordPress theme complete, Stu and Tracy then asked me to help them develop a compelling long-form sales letter for use on the WishList Member site. This single landing page bears the responsibility of introducing folks to the WishList Member plugin, its features and benefits, pricing details, and more.

The sales letter page relies heavily on the built-in shortcodes that are included in the WooFramework, to create the buttons, dividers, and toggle boxes that slide down to reveal more content, making the most of screen real estate.

I also created a custom pricing table, and a simple screenshot tour of the product, which displays enlarged versions of the product images when they are clicked.

Read what they had to say about the final results…

“I can remember the day when Stu told me that he had found the guy to revamp our website. He said, ‘Best of all, he’s using WishList Member on one of his sites, so I think he’ll be familiar with what we’re doing.’ It took me one look at Shawn’s work to agree with Stu that we had found our guy.

“What happened next took me by surprise. I knew that Shawn would be able to pull off the look and design we were hoping for, but I had no idea what a positive experience it would be throughout the entire process. From the first discussion, everything we mentioned was completely understood. There were additional things added that we didn’t consider. There were clear objectives of the project with a project proposal along with delivery dates clearly specified. When I saw the wireframes, I was floored. They looked exactly like what we had envisioned, and delivered on the date they were promised.

“Without a doubt, this was the most positive experience I’ve ever had in working on a project like this. Shawn seems to be good at everything he touches. We’re definitely reaping the long term rewards of having a top notch site design.”

Tracy Childers
Co-Founder of WishList Products

Click here to visit WishList Member now →

Despite having built a strong reputation for themselves in the industry, upper management realized that their website and marketing approach had grown stale, and felt it was time for a change. Due to my previous work and ongoing partnership with Senior Service Match, I was invited to participate in the redesign of Hearthstone’s website.

Initial Discovery Meeting

For our first meeting, company executives were flown in from around the country to share their input and valuable perspective on the goals for the redesign. It was clear that the staff and leadership of Hearthstone do not fit into the negative stereotypes of “nursing home” workers, but rather exude an upbeat confidence, high energy, and a genuine passion for fostering a high degree of independence for their residents, as well as a holistic approach to their health and general well-being. The tone of this first meeting was fun and upbeat.

Across the board, the leaders of Hearthstone made it clear that they were ready to shed the antiquated image of their current website (shown at right), in favor of a more modern, clean, and decidedly “not senior” look and feel.

Throughout the meeting, I took copious notes, carefully jotting down keywords, adjectives, and key phrases that would later inform the design phase. I asked specific questions about the unique abilities and strengths of Hearthstone versus her competitors, and was blown away by the level of passion with which these folks began to respond.

They told stories of individuals who had left the company, only to return a few months later, as they realized that this work was truly their life’s ambition. The depth of experience represented by the Hearthstone staff is a clear indication of their unique love for their work.

As a result of this line of conversation, we arrived at a new tagline for the company which was eagerly adopted on the spot. The new tagline, “Our Heart is in It.” has already made its way into other elements of the marketing plan, and will soon make its way into corporate training and new employee orientation materials.

Mood Board Development

Because the new design objectives represented such a dramatic departure from the current website, I proposed that we develop a series of “mood boards” to explore new colors, textures, and typography before diving into the actual site mockups. This step turned out to be critical to the success of the project, and I plan to incorporate it into all future design projects of this scale.

(Thanks to Amy Lamp at the venerable Forty Agency in Phoenix, AZ, for this inspiration!)

Mood Board v1.0

The first mood board suggested a very fresh and modern color palette, contemporary textures, and vibrant imagery that would clearly differentiate Hearthstone from her competition.

Since the individuals responsible for reviewing the mood boards were scattered all around the country, the mood boards were posted online, using a fabulous tool called GetSignOff.com. The initial feedback to the first mood board was positive, but a completely new set of adjectives now entered the equation. Turns out what they really wanted was not modern, contemporary, clean, or fresh. Rather, they now communicated that they wanted a look and feel that was “warm, home-like, classic, and transitional.”

A completely new mood board was created and posted for review, exploring this new design direction, along with specific colors and imagery that were now being requested. Deeper, warmer, colors, more traditional typography, and more classic photos and imagery were brought into this design.

Mood Board v2.0

At this stage, the client was still not happy. They really liked the “swoop” from the first mood board, and requested a third mood board consisting of a “blend” of warm, classic, and contemporary elements. Because we would be shooting custom photography for the site, we agreed to simplify the final mood board by dropping the photos and imagery from the mood board, moving forward with a simple color palette, on which the client happily signed off.

Color Palette v4.0

With the color palette finally approved, and new parameters for the design direction, I was eager to get started on the actual mockups for the site. Thankfully, we were crystal-clear on the content for the home page, as well as the action points we should feature. Three mockups were requested: the home page, an inside page, and then a sample landing page for each of the 37 “micro-sites” to be developed for the individual communities themselves, featuring content specific to each location.

Home Page Mockup

Inside Page Mockup

Microsite Page Mockup

These mockups represent a nice blend of warm colors, modern typography and layout, subtle gradients which add a “home-like” texture to the site, and simple, easy-to-understand calls to action. The layout is instantly intuitive, and the client feels it is perfectly suited to their target demographic, which is made up primarily of “baby boomer” women.

The client approved the mockups with only the most minor of revisions, thanks in large part to the ground covered during the mood board phase. Without that critical step, we would have no doubt made countless revisions to the site mockups, which is considerably more time-consuming.

Custom Photo and Video Shoot

In addition to the website redesign, we were also asked to shoot custom photography in the studio and on-location. To further leverage this time, we also shot video testimonials, which will be edited and used throughout the site. Bellus Images in Houston, TX, shot both the still photography and the video testimonials, over just two days. The resulting images are stellar, and will definitely help to further distinguish Hearthstone.

The site designs are now being converted to a WordPress template, after which the new site content will be built. Stay tuned for the site launch and more details!

Hope you enjoyed this inside peek into my design process. If you’ve got any questions or feedback, feel free to post it in the comments below. I look forward to hearing what you think!