Creativity breathes life into successful websites. However, creative ideas and solutions can sometimes seem like guesswork—and guessing is risky business. So what can designers do to show clients they’re using a solid strategy and have the best intentions? The following exercises are a great way to start discussing and documenting aspects of design to help clients shed their fear of creativity and encourage them to join the design process.
Set clear goals#section2
Some people feel they know why a website should exist, but struggle to create direct and measurable goals. Ambiguous goals force people to assume things, and assumptions can lead to broken expectations—which can, in turn, destroy trusting relationships. Goals such as “selling more stuff” or “getting more exposure” are vague and provide little direction.
A modified acceptance criteria exercise is the simplest and most effective tool I’ve found for setting clear and powerful goals. Agile developers use acceptance criteria to demonstrate why tasks need to happen and define how they fit into the big picture. With a few tweaks, it works perfectly for capturing design goals.
Example request:
- We’re redesigning our website because we need more traffic and an updated look, and want to become more respected in our industry.
Example goal template:
- We want to __________ because ____________ so that ___________.
Example goals:
- We want to increase traffic by 20% because we need more exposure so that we can generate eight more leads per month.
- We want to update to a current look because we need to be more relevant to our customers so that we can raise our rates by 10%.
- We want to write four industry-related articles per month because we want to help our industry so that we can form two partnerships per month.
Notice how separating “the means,” “the reason,” and “the ends” clarifies the project owner’s goals and describes why they want them and how they intend to achieve them. Acceptance criteria for design is a great way to flush out deeper, possibly unknown, intentions that will help the designer and project owner make better decisions and dodge surprises later in the process. Revise the goals until all parties agree on them and understand them.
Bonus points: Create several goals so that you can capture secondary and tertiary goals, but don’t let it get out of hand—no single website should have more than a handful of high-level goals.
Organize the pages#section3
People will grow fond of a website where they can accomplish their goals without having to think. Users’ mental energy should be spent on solving their problems, not figuring out how the website works.
Card sorting is a great way to organize a website. To conduct a card sort, list all the pages of your website and write their titles on index cards. Then, lay the cards out on a table and move them around until all the categories and subcategories make the most sense.
If you can’t card sort in person or don’t have the time for card sorting as a team, try collaborating online with a spreadsheet. Here’s an example of a New Zealand investment website created in Google Docs using fictitious statistics:
An example of card sorting using a spreadsheet.
If you’re working on a redesign, consult analytics to find out which pages are getting high and low traffic. It’s a great opportunity to figure out where the design’s content is over and under served. Then, tighten and combine similar pages and separate and simplify complex pages.
Even after the official design process, a good card sorting exercise can greatly increase the usability and effectiveness of a website. It’s a smart practice that can keep a website relevant and effective. To learn more about how it’s done see Boxes and Arrows’ card sorting guide, Usability.gov’s card sorting article, or get a whole book on card sorting.
Bonus points: Card sort with someone unfamiliar with the company to spot biases and get unexpected feedback.
Lay out the pages#section4
Next, we need to develop a solid understanding of the design’s visual hierarchy. Enter attention maps and a little bit of math.
An attention map is a list of goals for a page with point values assigned to each goal. Allow just enough points to see a good distribution, but not too few that you force a lot of similar point values. The idea is to get a firm understanding of how the goals relate to each other so you can form a solid hierarchy of content.
Example point distribution:
- Fifteen points allocated among four goals
Example result:
- Service description: seven points
- Benefits of use: four points
- Industry articles: two points
- Relevant news: two points
An attention map is more effective than a prioritized list because it helps determine how much space to dedicate to each goal on the page. Since the service description has three points more (almost twice as many) than the benefits of use, you can bet the service description needs a lot of attention.
Use attention maps to classify areas of importance on a webpage.
Sketching out options that fit the goals, organization, and attention map should now be straightforward and strategic. There will probably be a lot less sketcher’s block!
Bonus points: When you’re done, try flipping the sketches over, or look at them through a mirror to see if they still work. Critiquing your own sketches, including the odd mirror sketch, can generate a lot more ideas.
Develop a personality#section5
A strong archetype can create an immediate and powerful emotional bond. An archetype is a group of characteristics and traits that are commonly seen in groups of people of any language, history, and size around the world. Every archetype has strengths, weaknesses, gifts, and fears. When you apply these aspects of personality without shame, people will identify emotionally with a design. This helps strengthen memory and build trust.
The Hero and the Outlaw, by Margaret Mark and Carol S. Pearson, powerfully captures 12 archetypes covering nearly every aspect of humanity.
The archetypes:
- Innocent
- Explorer
- Sage
- Hero
- Outlaw
- Magician
- Regular Guy/Gal
- Lover
- Jester
- Caregiver
- Creator
- Ruler
If you choose the outlaw (think Harley Davidson), start critiquing everything you do against the outlaw’s traits. You might be surprised at the amount of new and interesting ideas generated.
Outlaw traits:
- Desires revenge and/or revolution
- Wants to destroy what is not working
- Hates being powerless or trivialized
- Tries to disrupt or shock people
- Hopes to give people radical freedom
- Is often misunderstood as evil
- Has a tendency to become a criminal
If you can keep this “personality” consistent through different designs, consider applying it to other areas where customer interaction happens, and pay close attention to customer reactions. You’ll build a very strong brand.
Bonus points: People often confuse their company’s personality with their own. Determine the archetype of the project owner and other key people involved to differentiate individual personalities from the company personality.
Define the fit and finish#section6
Design traits directly support and reinforce content. Unfortunately, traits are very hard to boil down to a visual style that’s consistently understood across a large audience. It’s good to have groups of opposing traits to create boundaries. This helps you clarify the specific look of the design and gives you something to measure and critique against when the design is up for review.
A great way to do this is to figure out the opposing traits that significantly affect the design and put them on sliding scales. Here’s an example:
An example of a sliding scale used to define opposing design traits.
With trait scales, the designer can get a real sense for how things should feel to the website visitor. If the designer’s idea of “lively” is too intense, it will be easy to debate where it lies on the calm vs. lively scale and adjust accordingly. This can generate a lot more constructive criticism than “it’s too intense.”
Add, delete, and change the trait scales as needed. But remember that the criteria needs to be measurable and debatable. A trait such as “high tech” is too dependent on the tastes and opinions of the designer. Most of the time, a specific trait such as “high-tech” will be a combination of broader traits, including “modern,” “simple,” and “formal”—all of which can be easily placed on a scale and discussed by people without design backgrounds.
Bonus points: After the project, evaluate which sets of traits had the most impact on the project’s success and keep track of any sets that you wish you had put in.
Design confidently#section7
A solid and common understanding of goals, organization, layout, personality, and fit and finish will create an environment in which you (and the project owner) can rely on rigorously discussed and well documented ideas. Together, you’ll create smaller margins of error, purposeful exploration, fewer broken expectations, and, ultimately, a better design.
You are right that it is vital to have a strategy in place before designing a site.
The best part about your article, though you didn’t elaborate on it much, was the idea of measuring success. We can’t allow success to be subjective when we can easily identify criteria we want to improve.
If you want to generate 4 business leads a month from your site, that is something you can measure. The beauty of measurement is that is holds the clients honest. They shouldn’t ask for a site change just because “they don’t like the colors” if it is meeting their goals for the project.
And it empowers the designer to know when their design is actually successful. Sometimes we design sites that we think are successful because they look nice, but they aren’t acheiving the goals the client asked for.
I want to add that when a client requests a certain design, element, or function; it may not guarantee actually leads.
In other words, if a client wants to generate more lead by redesigning, there is no guarantee that it will work, and usually they blame the designer or developer for not generating that lead.
I believe it is our job to tell them that risk.
Very good point Henry, I didn’t think to clarify that when I gave that example.
Redesigning for the sake of redesigning isn’t really going to solve anything. Although, I do think that with the right information and clear goals a certain confidence in accomplishing them should be present. Enough to give a personal guarantee? Depends on your bravery and the scope of the goal.
I don’t think the we’re (designers) going to get very far if we can’t give guarantees on our work…
But yes, it should definitely be discussed and clients should know exactly what to expect.
Using a template with stunning website designs is one of the easiest ways to draw viewers. Here are some tips to select a template for your website.
Select a high quality template that offers effective design at reasonable costs and make sure it is reusable.
If your site includes graphics or animations on your web page, use Flash HTML template. This will help you display graphics or animation easily.
Thanks for this article. I know everyone’s process is different and there is no “one size fits all” solution, but these techniques look very beneficial.
Doc Rivers (Celtics coach) recently said before a game that he wanted his players to be ‘aggressive within their limitations’ – a nice vague statement that I think is relevant to web design. Using your methods will be helpful in outlining those ‘limitations’ as well as keeping the client educated.
Thanks for this.
While I find it a little bizarre that your process so closely resembles my own (right down to the archetypes and attention points), now I can send people here and say, “See! This guy does it, too. And he’s got an article on A List Apart so he clearly knows what he’s talking about.”
A very good insight on how to design a website.Like any other things designing a website also requires good planning. a successful website always has good planning behind it. Following certain kind of methods definitely helps in building a successful wesbite.Again a very good article.
great post!! very informative one especially in designing a web page. The guidelines provided are really essential in creating good webpage.
A couple of great points in that article. Keeping track of your leads is key. Great work.
as a beginning freelancer i greatly appreciate these insights. this article will help me push through to another level in my design. i have a lot of things to do! and now i have a framework to help guide me. all the best – patrick
I love the idea of taking the various personality traits…it’s like I can be the actor I wanted to be in 2nd grade!
To design with a character in mind is very inspiring. Think of any company and apply the various personalities to them. It would change the look and feel of the site completely.
Definitely need to try that.
David
I think this is simplifying the creative process too much, but enjoyable article all the same “Elephant Books”:www.embooks.co.uk/p-55-elephant-books.aspx
This is a great article, a very good read, i design my clients website’s from scratch not using a template as i feel from scratch the website’s speed and usability is much more better then a cutter template the more seo optimized the website is the more traffic and sales the client will recieve,
Setting clear goals and objectives for a project is an oft stressed point. However, designers still fail to do it because they assign, like you said, very vague goals. This is as good as nothing. Unless you have a definite objectives and defined figures to attain, you cannot really steer your processes forward.
Good info you write here about Designing a web site it is useful to many web developer.
Hi,
Certainly this an wonderful and helpful article ever. I was not aware of “Archetype” till now. Your article gave me a whole new and interesting perspective over Web designing now!
Yes, it is very much important to have a strong strategical planning before building a website… Designing confidently is one among them! Thanks a lot for this wonderful post 🙂
_____________________
Lee Norman
“Social Media Marketing”:http://www.infoyogis.com
Planning is clearly an essential part of designing a website. From experience, I found the planning process more important than the actual design. We spent a good 4 months planning the database structure, compiling important functions, checking competitor sites, finding scripts and designing custom code.
Your website should also NEVER be limited by the knowledge of your designer. Learn CSS or PHP if you have to. It will be worth it. The last thing you want is to fork over a few thousand dollars and immediately realize that your website needs a phase 2, 3 and 4.
i like reading things like this you have some very good pointers well done
I really liked you’re idea about having clients fill in the blanks about what they want their site to accomplish. As someone who is very familiar with websites and their role in business, I often forget that some people may not know exactly what they want their site to do for them (they just know they should have one). By asking clients to fill in the blanks, I think it gives both the designer and the customer a better of idea of what the goal of the site is. Great post!
Great article, Daniel, I’m glad I came across it. As a former agency project manager, I helped facilitate the development of many new websites and redesigns. The planning stage is truly the most important, but for us, it was the most difficult to get the client to understand. They just wanted a new website to get more traffic and they wanted it now. Part of our process was to have them define their goals more clearly. For some, they didn’t really know what they wanted, or they kept changing their minds, so the planning process in their minds took far too long.
Having a resource like this to point clients to would have helped, I think. However, planning the design and functionality alone is one thing; it is the PM’s job to get to the underlying goals that the client wants to achieve before this planning can begin – which is very hard to do on small budgets. Too many times have we planned a site based on a client’s perceived goals only to build it and realize that it did not fit what was truly needed. This is something that wasn’t taught in business school, unfortunately.
Andrea
ProtoShare.com
I must say, I’ve had much of these sorts of ideas in the back of my head for years, but have never really been able to put them on paper. Particularly the points system, I really like how you are able to talk about abstract concepts that only experienced developers can really ‘grok’, but do so in a way that anyone can understand. Props for the article!
Great article, very informative. I can’t wait to put some of these tips to good use. Thanks!
Thank you for your insight. I think the amount of planning that goes into a website is often underestimated. Get a solid plan behind you and you have won half the battle.