With 2008 coming to a close, I thought it might be enlightening to share a little behind-the-scenes on my web development process. Coming from a predominantly print background, 2008 marked the first year where web development projects far out-numbered print projects. By studying my peers’ work, industry editorial and showcases, and striving to take my personal best to a new level, the year marked a period of phenomenal growth. While I’ve dabbled in web development off and on since 2001, it wasn’t until this past year I truly put the web design hat on and learned some extremely valuable principles of the industry. 

In this article we’ll cover design development details on a project completed for Candy Bouquet.  To give you an idea of how this interesting bouquet gifting concept has taken off, Candy Bouquet, while headquartered out of Little Rock, Arkansas, has a network of over 1000 franchise stores in 40 countries around the world. Here is a recent video bite where Margaret McEntire, CEO of Candy Bouquet talks about the revamping of the Candy Bouquet brand, which included the web development. 

Back in the Spring, I was approached by Robert Blake, IT Developer on behalf of Candy Bouquet International, to produce a top-to-bottom redesign of the Candy Bouquet site. This project was a great challenge as the design program had to transcend not only the website, but an enewsletter, and the potential for Candy Bouquet Franchisees to use the design program for their own site self promotion site. The design program was entirely for the web and included providing the client with design files and coded XHTML/CSS templates with accompanying images. 

The project started off with some information gathering. There were obvious challenges brought to the table such as the dated look of the current Candy Bouquet website, and the crowding of content, and placement of content among other concerns. It became apparent after talking to the client about these issues and their goals for the new site, we needed a site design that provided more iconic value to the Candy Bouquet brand, diversified them from direct and indirect competition, and conveyed a refreshing and more flexible design platform that is friendly to CMS integration.

After gathering enough information, we pushed the button on wireframe development. I’ve found from experience in working on both print and web projects, every client and every project is different. There is no one template that fits all. To be effective with information gathering and design development, I’ve found success in creating a set of basic guidelines and adapting those guidelines to each project. For this project, there was a great deal of emphasis placed on the wireframes. This is because the client had a number of variables that had to be distilled down onto an imposed page layout that was going to be simpler - no exceptions. With ever-expanding site content, and the site design possibly being used on sublet sites, creating a fundamentally effective layout of elements for effective business-to-consumer communication was paramount. So a primitive wireframe starting point necessary to keep the variables on content placement.

While I generally prefer to present only one composite to the client at a time, this was one of those situations where we could keep the wireframes very stripped down and simple so time was kept to a minimum on each wireframe. It’s sometimes difficult to envision words-on-paper in a web page layout so it was necessary in this case to explore some options.

Option 1:

Option 2:

Option 3:

The client preferred option 1 for its simple, contained structure, and better perceived information flow. The client then suggested introducing more feature bouquets onto the page. I took this information and rearranged the content in the middle-right of the page to accommodate two sublet bouquet features.

This became home page wireframe v2. 

While we had yet to resolve the sublet feature area, the client was concrete about placement of other content zones on the page. With that, I believed it was time to introduce some basic design variables for the client to evaluate. I wanted the client to know I had some ideas for the design phase and these new variables were to hint at where the intended design was going. This way, if the client had concerns about the direction, we could shift focus now, rather than drop hours into a design and have to totally redesign again. With these new design variables introduced and typography selections already in-place, I was able to describe and roughly show what I was trying to achieve for the eventual design. The client was excited about the design direction and the new content arrangement in the mid-right area of the page. We now had enough to take wireframe into design phase.

Heading into the design phase, we were creating a home page design that was a converging of retro-meets-contemporary color palettes and design appointments. 

Here is where the design started out:

Based on the client feedback, the design was almost completed - wow, not bad for version one. Without showing every single iteration during the design phase, the home page went through a series of revisions to the top level navigation bar and color palette. The folks at Candy Bouquet wanted to explore a breadth of color palettes to see what other opportunities existed. 

Exploring some color options on the second banner.

Again, trying out some color variations. This time on the main banner and background.

While there was some deliberation about typography and color selections, even into the final files and XHTML/CSS coded templates, below are the intended final versions. While this was the intended design for the site, the client was resolved about changing some of the design aesthetics, namely colors and font choices. Every effort was made to collect detailed information and strategize the design around the client’s brand, though some creative values came down to subjective tastes. This is the nature of design.

To be successful at mulling out conflicting details I listen closely to the client. See where they’re coming from. Offer professional input - design problems that could occur now or down the road, or coding and implementation problems that could arise. Then work outward from there. I’ve found by sharing thoughts, ideas and knowledge around the project execution in a non-defensive manner, virtually always yields a positive result.  While I take no offense to how design tweaks by the client changed the design outcome, this is an example of how compromises are made to ensure the client is satisfied with the design, and confident with moving forward to implementing their new brand identity on the web.

Here are a couple of the final page designs:

Check out the live Candy Bouquet site. Compare the typography, color choices, etc. to these final designs. You be the judge of what of what works better.    : ) 

Although there was somewhat of a stalemate on aspects of the design, the team at Candy Bouquet was overwhelmingly impressed with the results. Robert Blake was kind enough to share some words about our collaboration on the project. This work also appears in the Work section. 

In this project, design files and WC3 standards compliant XHTML/CSS coded templates were produced and turned over to the client.

mikep