Back to top

My Web Design Process

I try to keep things lite around here, but guess what? It’s time for some shop talk.

Client referrals are great, but occasionally I’m referred to someone brand new. Someone who I have not yet dazzled, but who yearns to be dazzled.

For this purpose I find it necessary to confirm that there is, in fact a method to the madness. Enter stage right: My Process

Client Interview / Discovery Phase

The word “interview” sounds so nightly newsy, and Katie Couric isn’t exactly tearin’ it up like she was at the Today show. BUT I can’t sugar coat the fact that I absolutely do get up in your grill with a LOT of questions about what you’re looking to accomplish and why. You can download a copy of my interview worksheet here.

I only ask clients to fill out such a mind-numbing document because I’ve participated in projects that did not have this kind of forethought and guess what? They bombed. They either didn’t accomplish what the client was after or they didn’t accomplish what the user was after. Either way it’s a tragic ending, and nobody likes those!

The interview/discovery phase is the most critical part of any web design or development project - if you’re serious about getting results from your web presence. If you’re not serious about getting results or don’t have any idea what kind of results you need to get… this is the time to formulate those ideas!

So what kind of deliverables can a client expect from this phase? They vary slightly per project but here’s a general outline:

  • Pain Definition - Define the problem are you trying to solve.
  • Objectives - Determine business objectives; what are you trying to accomplish from a communications, sales and/or marketing standpoint?
  • Goals - Outline clear definitive goals the site is to achieve.
  • Target Audience - definition and how best to engage them.
  • Competitive Analysis - Research competition, define points of differentiation & gaps in the market on which to capitalize
  • Scope of Work - Entire deliverables list and scope of project from design to development to launch.

Have I put enough emphasis on planning? Great! :)

Content Inventory & Sitemap

For my un-ideal client the words “content inventory” are dirty words. They are words that weed out the unprepared. They are words that cause grown men to cry. Am I being a little over-dramatic? Maybe. ;) BUT I cannot tell you how many times I’ve had someone call me to “have a website done” and they have absolutely no idea what they want on it! Well… besides their phone number… 99% of these folks don’t make it past the interview document.

The great news is that if we’ve gone through the client interview / discovery phase, the content inventory is just the logical, painless next step.

Normally, either I or the client will procure the services of a copywriter. Writing successfully for the web is an art, and there’s nothing more disappointing than having a fabulously designed site that fails because there’s looooong scrooooling pages of copy (like this one - sorry, hate to break the rule but it just made sense to put all of this in one post).

Even if a client already has web content, I still encourage fresh copywriting for a new site. Why?

  • Depending on the newly established site goals, the entire overlying message of the site could change, which would need to be reflected in not only the imagery, but also the copy!
  • Old copy is kinda like an old pair of shoes. Probably fine to wear, but possibly out of style and definitely in need of polishing.

While the content inventory is taking place, a sitemap is also being generated to create an organizational structure to the site. What exactly is a sitemap? A visual representation of how the pages of a site connect.

Deliverables for this phase?

  • Content Outline - this document collects all content to be delivered in the site
  • Navigation Labels - In this phase the global navigation (i.e. categories of information) will be defined in easy to understand, intuitive terminology
  • Sitemap - a visual representation of the site structure

Information Architecture & Usability

Technically the IA (information architecture) phase begins with the sitemap, but I’m not really a technical person. :) Information architecture is a big coupla words (unless you abbreviate it), and it looks awful scary. I was scared when I first saw it, but when I learned what it was all about I was happy to know such a big, scary set of words.

So c’mon Jen, what’s IA all about? Well, how’s this for simple:

Site with IA = great user experience
Site witout IA = horrific user experience

Can we get a bit more granular? Sure - go here and get ready for your eyes to cross. Basically all my clients ever want to know about IA is that the site is organized in a fashion that promotes ease of use. That’s it. Is there a lot that goes into it? Sure - just check out these deliverables:

  • Use Case Scanarios - also a tough set of words to wrap your head around, but a very simple idea. Remember when you were young and played “make believe”? That’s what a use case scenario is - you pretend you’ve got Stephanie, mom of two visiting your site for the first time to buy XYZ product, and how does Stephanie get from point A to point B? Well, if Stephanie never makes it from point A to B during your tests, you know somethin’s broke.
  • Wireframes - Wireframes are a lot like the blueprints to a house. They block out where information is proposed to live on a webpage. You can actually test a site’s usability before the site is even built, using wireframes!
  • Usability Testing - Use case scenarios and wireframes are part of the bigger picture of usability testing. In addition, you may also have users testing to see how intuitive the proposed navigation of the site is, and how well the information is categorized.

Design Phase

Finally, right? :) Believe me, the design will always be lacking in some way if we don’t take our time getting here. And what’s great is by this time there is sooo much information available to build a really awesome site! There aren’t any lingering questions like: who’s our audience? how do i build brand equity? what are we trying to communicate? what are users trying to accomplish?

Instead, the focus is on how to answer those questions visually! One of my primary goals during this phase is to not only rock out killer design, but to rock out conceptually deep and meaningful design! The placement and treatment of every element on the site has a specific purpose, goal and meaning. And truthfully, if the design is doing it’s job, it is transparent to the user with regard to accomplishing what they’re trying to do on the site.

Design Deliverables? Most often I create two different homepage designs, and from those two the client chooses a direction. That direction is refined and subpages are created based on the homepage design.

  • Mockup of homepage
  • Mockup of subpage(s)

Development

Aaah development… this phase is a pleasure for those who enjoy bug squashing. Since my forte is on the front-end planning, discovery, IA and design side, I always subcontract the programming / development to one of my trusted coding experts. From a client’s perspective the important thing here goes back to guess what? The planning phase! Did we account for all the functional requirements? Of course we did!

So what exactly happens during development? Several things. I meet with the developer to discuss the sitemap, wireframes, functional requirements, hosting situation and development platform (php, asp, wowie).

These days I rarely produce a site without a content management system of some sort. Users don’t want static content and neither do site owners. It just makes sense to build a tool to accommodate easy updating and I recommend it to all of my clients. And truth be told, I don’t want to earn my living updating my client’s sites - it’s sorta like watching grass grow. :)

Once the site has been developed it is deployed to a test server for the next phase, quality assurance.

Quality Assurance

Once the site has been coded I invite myself and the client to do some testing. Well, really we’re just trying to break the site.

During this phase it’s inevitable that additional feature requests pop up. No matter how much planning takes place, it’s just unavoidable. These revisions are addressed with a change order form (nobody likes scope creep!) The changes are made and we continue trying to break the site. Some people call this the quality assurance, I call it just plain fun.

Launch

[Scene: sky parts, sun rays burst warm and bright toward our smiling faces] Yes, it’s a beautiful thang - site launch. Why? Because if all goes to plan all bugs have been squashed, approvals signed by everybody and their brother, and we can all sit back and just bask in the internetic glory!

Site Maintenance & Training

I addressed this briefly earlier, but I cannot emphasize enough the importance of giving my client’s the tools necessary to keep their web content fresh and up to date. Once I go through the initial content dump into the site for launch purposes, I spend a few hours with my clients going through documentation on how the content management system works. Isn’t that nice? :)

The End

If you’re reading this all I can say is “bless your heart”. In fact, I’d be curious how many people actually read all the way thru this monstrosity of a post. I do appreciate your attention and caring enough to read. If you did, you’re probably my ideal client. Take care! jen