Every good design is created to solve a problem.

So the first step in any design is to define what problem you’re trying to solve. There are many potential problems a website might solve, and every good site has its own unique take on the problem and solution.

Define The Problem

For this site, the main problem is a common one among young web-related professionals, and there are two prongs to it. I need a vehicle for selling my design and development skills to two different main audiences: potential contract clients and potential long-term, full-time employers.

This is a condensed final problem that actually starts with “I need to pay my rent,” and progresses through “My most marketable skills are my graphic design and coding skills.” When working with a client, you may need to work backwards from the problem they present you to discover the actual root problem. Never be afraid to ask a client “why do you need that?” You may not be able to design directly from the root problem (as here), but it’s an important consideration in how the final solution shapes up.

Notice that the problem is phrased in terms of a need and a connection. These are both important points to consider in how you define the problem for any design.

The Need: Problems in general stem from a need or desire that has gone unanswered in some way. The person whose need has gone unfulfilled is the subject of the sentence and the verb should accurately convey the strength of the need. “The client needs” is much stronger than “the client wants.” Choosing the right level of need is especially important when you have many problems to solve and you’re not initially certain which is the most important to focus on. Anything that you “need” becomes the initial problem, while “wants” can be easily pared off into “secondary uses,” removed to another site, or dropped entirely.

The Connection: The connection is your target audience. Who are you looking to reach with your design? It pays to be specific in your description. It is simply not possible to appeal to everyone, or even to get your name out to everyone. Picking a specific, very narrow audience lets you focus on what appeals to just those people, giving you a more useful and more natural connection to them. That’s important because you must know them well enough to understand their motivations and give them a reason to come to you.

“Employers and clients” is a pretty broad category. Now, I’m open to working with all kinds of clients and I like variety in projects. I’ve got quite a bit of experience with industrial and manufacturing clients, for instance, and I’d be happy to work with more of them. Right now I’m working full-time as a web developer at a financial company and I’d be just fine with taking a position with another one next time I’m on the market. I am good in both, but neither is really a field that I’m planning to pursue as a main focus.

Instead, I choose for this site to focus more on the things I love and the things that are prevalent in my geographic area, because this site should reflect my personality. I live in the San Francisco area, home to the high tech and the cutting edge, the ocean and the environment, the progressive and the geeky. I live here, and I love it here.

That suggests two natural directions: Green and geek. Melding them together into a single demographic isn’t too hard, since there tends to be a lot of overlap between the two groups, especially locally. This focus is true to who I am, and it’s something that will inspire me because it taps into my passions.

Draft the Solution

“I need” is an inherently selfish statement. No one else is obligated to give a damn about what you need. There are millions of websites out there that never see a visitor, because no attention was paid to the most critical aspect of this equation: Why does your target audience care that you have a need? Why will they come to your site? Why will they buy your products or look at your portfolio?

There is only one successful answer to any of those questions. You must find a way to make fulfilling your need the easiest way for them to fulfill their own needs and wants. If you fail at this step, no amount of crazy awesome graphical genius and cunning copywriting will create site conversions.

Many designers will start at this point, with the target’s need, but I think that’s short-sighted. The client isn’t filling the target audience’s need out of the kindness of their heart. If you don’t know what the client really needs to get out of the exchange, it’s far too easy to start with the wrong audience need. When that happens, you may create a very wonderful design that perfectly reaches your target audience and perfectly fills some need of theirs, while failing utterly to get the client the return that was the whole point of the project.

The need I am filling for my demographic is one of design. I can help my clients solve the very same problems I’m discussing here. I can help them discover what needs their service or product fulfills among their target audience, and I can craft a design solution to bring the two together.

Differentiation

As meta as this sounds, given the point of this series, design service websites are like any other service-oriented offering. There are people out there who need things designed. The website design needs to convince those people that the designer can solve their problem in a “better” way than other designers. There are different choices for what constitutes “better”: Faster, cheaper, better quality, better customer service, etc. Part of crafting the solution is understanding what way the client is differentiated from others who might seek to fulfill the same need for the same target audience.

Some of my main differences include:

• I have a lot of experience with what is commonly called legacy code. That’s code that has been written previously, generally by more than one team of people, and that has grown and become ever more complex with each change. I am exceptional at tracing threads back through the code for debugging, and the bulk of my projects have involved meshing my new code into the legacy code in a way that doesn’t break anything.
• I’m familiar with the quirks of various browsers and versions. There are a number of ways to deal with cross-browser compliance, and not all of them are appropriate for every project. It’s good to have a number of different possible solutions to match the problem at hand.
• I like new toys as much as the next person, but I’m going to use what works for what I’m doing, whether it’s the latest html5 and css3 and jquery-based dynamic interactions, or simple basic html 4 with a little styling. There are many different and equally valid approaches to design and I would characterize mine as, above all, “practical.”
• I have a very wide skillset. I’m as comfortable doing interface design and Photoshop mockups as I am with hand coding markup and programming, and just as comfortable with pre-press and color separations (which I have also done by hand). Many designers will specialize in just one aspect of design, but I believe that if you’re going to design for code, you have to understand how the code works. You have to intimately understand its limitations, and where the rules can bend and where they break. If you don’t, you are basically leaving many of the core questions about implementation of the design in the hands of someone who may have specialized in the code and not understand the design itself well enough to know the best overall answer. Same for print. If you’re going to design for a particular press, you better know the capabilities of that press and how to actually achieve your design on it. Otherwise all you’re doing is throwing suggestions at the folks running the press and letting them make the most critical decisions.
• I’m comfortable working with clients at all levels of computer literacy. I’ve done a fair amount of teaching clients and co-workers about the concepts behind the work I’m doing, both one-on-one and in seminar settings.
• My design experience started in print. If you include organized amateur pieces (mainly school publications), I’ve been working with print since 1989. I made my first fully-fledged website in 1997 and began doing serious web design work for other people in 1999. It’s good to see tried and true concepts from print design, such as designing to a grid, finally making their way into the world of web design in a big way. But the two are not the same thing. In many ways, designing for one is the antithesis of designing for the other. Because of my years of experience with both, I understand where they diverge. You can’t simply take a logo designed in rgb for the web and expect it to work in your print collateral.
• I hand code. That means you get charged for less time debugging and you get less of the obnoxious and hard-to-trace errors that come from other methods. Don’t be fooled by companies trying to sell you programs that claim to write the code for you. You may be able to get away with that for a simple one-page information-only site, but there’s not a program on the market that doesn’t write clunky, bloated, dare I say, crappy code. The people who write those programs are trying to write for every possible way someone might use their program. When I code, I’m only coding to your project’s specifications. No bloat required.

These things can be summarized into one short statement: I approach design first and foremost as a practical craftsman with a wealth of experience, skills and tools at my disposal, who takes pride in meeting technical challenges and in being easy for even the least technically savvy person to work with.

Summary

Now we have all the components we need to jump into the meat of the redesign. We have defined the client’s problem. We have chosen a target audience and focused on how the client can fulfill the needs of their target audience. We have delineated how the client’s offering is better than their competitor’s offering. The next step in the process is explaining the solution to the target audience and convincing them of the differentiation. That will include both content and graphic work. We will look at the content next in this series and the graphical treatments following that.