Case Study Part 1: VictorsFood – Brief, Wireframe & Concept

As the story goes, I contacted Victor from VictorsFood a few days after the team building event I’d been at (read all about it in this post). When a potential client has a not-so-great site its always a delicate issue on how to broach the subject of it. ‘Hey your site sucks I can make it better’ is something I probably wouldn’t open with.

In it’s old state (seen here at the waybackmachine) the VictorsFood website had a few problems:

  • It had a .com domain name and no domain had been registered. Having only a .com domain tricked searchers into thinking it was only an international site.
  • The site was made with FRAMES! A lasting relic of the 90’s web boom that kept navigation consistent across all pages (and meant you only had to modify it once rather than on all pages). Having frames meant there was no possibility for SEO on content pages – simply the site was invisible to search engines.
  • The homepage was a mishmash of random images with no text whatsoever. Users had no indication what the site was about or what it was selling.

Let’s be Brief
The brief was for a total site redesign, heavily promoting their team building stream of the business. There were specific requests that the logo and top navigation remain constant across the site and do not scroll vertically with the page. In essence, producing the look of a site with frames but with a frameless design. This was to be achieved via css and was a bit of a challenge. There was also a request for drop down vertical fly out navigation. Again, achieved through css and proved to be a challenge but was helped greatly by the legendary folks at Killersites.

Wireframing, or as I like to call it, Wiretapping

Wireframing is such an important step in the design process that I view it almost as tapping directly into the client’s vision for their future site. You can use many fancy software packages to produce the ever so simple wireframe (the biggest design oxymoron of them all). I prefer the good old fashioned pencil and paper technique. It works marvels at client meetings because you can erase and add things on the fly. The client’s can even start drawing their own on the backs of napkins or business cards, it really is a collaborative process. The end wireframe might look dishevelled but its an excellent starting point for when you mock up the first static design in Photoshop.

For VictorsFood I had a rough idea of what they were wanting from the few phone and email conversations I had with them. I decided to mockup a concept wireframe to take to our first meeting. It was just a pencil and paper number and looked like this:

VictorsFood Website Original Wireframe

VictorsFood Website Original Wireframe

Much to my surprise, they pretty much loved all of it and there were only a few minor changes requested. The wireframing process hadn’t gone into numerous iterations as it commonly does with other projects.

Mock it up in Photoshop
The next stage for any of my web design projects is to mockup the raw diagram of the wireframe into something more physically tangible in Photoshop. This is stage where the client’s eyes light up with excitement because they get a glimpse of their new baby. I find the mockup process in Photoshop can go through several iterations before a final design is signed off on. I think having such an accurate view of the new design gives everyone a chance to express their likes and dislikes. I won’t move to a HTML mockup until the client is 100% satisfied with the Photoshop static mockup.

With VictorsFood, it took 3 mockups to get a confirmed homepage design. A mockup was also done for a content page and that had a few iterations as well.

Homepage Concept #2 for the new VictorsFood site

Homepage Concept #2 for the new VictorsFood site

The next posting in this case study series will look at the march from Photoshop to HTML and CSS, the technical problems encountered to achieve a frameless ‘framed’ look and non scrolling css dropdown menu.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s