Strategic Design: 6 Steps For Building Successful Websites

Advertisement

Web design isn’t art. It involves a whole collection of different skills — from copywriting and typography to layout and art — all fused together to create an interface that not only features a pleasant aesthetic but that communicates function and facilitates easy access to its content.

But in order to combine all these elements of Web design together and achieve successful results you must have a clear direction, a direction that will guide each and every aspect of your design towards common goals. You must think strategically.

Chess

What is strategic design?

Strategic design is the fusion of your organizational goals with every aspect of your design process. You aren’t simply designing a user interface that looks good and is usable and accessible. You’re designing an interface that will help you accomplish your organization’s objectives.

There are many websites out there that look fantastic and sport the latest trends in design yet often fail miserably in their intended function. Design trends are, of course, important because they give you fresh inspiration and new techniques, but the implementation of those techniques and styles needs to be intelligent and focused. For example, a blog isn’t a marketing brochure; you should focus on usability and readability rather than style. Similarly, a promotional website for a computer game should feature graphics and styles that portray a specific feel and style; the aesthetic is very important here.

When the designer simply implements a look and feel that is fashionable at the moment (think Web 2.0 trends) without any thought of how they fit the function of the website or the business behind it, the end result is unlikely to be very effective.

Web design is all about crafting an interface that communicates function, is usable and accessible and exudes the right emotion and feeling. Effective Web design needs all of these elements to be in tune with the goals of your website and in sync with the organizational objectives behind the website. Strategic design is all about identifying those goals and using them to guide your design.

Implementing Strategic Design

Let’s take a look at how we can use six steps to think strategically about a Web design project:

1. Establish your goals

One of the first things you need to do before starting work on a Web design project is to be clear about your client or organization’s goals. What are you trying to achieve with the new website or redesign? What is the website’s main purpose? Ask your client, your manager or yourself what those are. If they or you don’t know yet, then they should be discussed and agreed upon. A clear direction is essential if you want your design to have a purpose.

Remember that a website isn’t a piece of art; it’s an interface that serves a function. That function may be to sell products, to deliver informational content, to entertain, to inform or to provide access to a service. Whatever that function is, your design must focus on fulfilling it. Goals are also important, especially if you’re doing a redesign. Ask why you are doing the redesign: are you looking to grow the number of sign-ups, decrease the bounce rate or maybe increase user participation?

The New York Times website1

Take a look at the design of the New York Times2 website above. Its function is to deliver informational content. The minimalist interface serves this function beautifully by fading into the background.

AdaptD website3

In contrast to the New York Times, AdaptD4 is a Web design studio, so the goal is not to deliver a lot of content but to impress visitors with its design, showcase a gallery and advertise the company’s services. The visuals are very important here, and AdaptD delivers a browsing experience with beautiful imagery and strong colors.

2. Identify your audience

Who your audience is will play a big role in how your website should look and function. There are many demographics here that can influence your design, ones like age, gender, profession and technical competency. A computer game website for a younger audience needs a different style than that of a serious business journal. Usability should play a bigger role for older and less technically savvy audiences.

Who your audience is will not only influence the general aesthetic of the website but will also determine a lot of smaller details, like font sizes, so make sure you’re clear about who will be using your website.

The jQuery website redesign5

This is the unsuccessful jQuery6 rock-star redesign. The designer went too far in trying to create excitement and so failed to cater to the more serious, techy audience. Since then, the rock-star graphic has been replaced with a more conservative look.

Disney's website7

Disney’s8 target audience is kids. The intent is to entertain and involve this young audience, and the design does it by wrapping the content in a fun, colorful interface with a lot of visual and interactive elements.

3. Determine your brand image

A lot of designers tend to get a little too inspired by the latest trends and then implement them without thinking first about what sort of image they really should be conveying. Glossy buttons, gradients and reflective floors may work for some websites, but they may not be right for your brand.

Think about color. Think about the feel you want to achieve and emotions you wish to elicit. Your design should embody the personality and character of your brand. Everything has a brand; even if you don’t sell a product or service — for example, if you run a blog — your website still has a certain feel that makes an impression on your visitors. Decide what that impression should be.

Carbonica website9

Carbonica10 is a website aimed at helping people reduce their carbon emissions. The environmentally friendly image of the website is crafted using a lot of recycled paper images and textures, as well as earthy green and brown tones.

Restaurantica11

Restaurantica12 is a restaurant reviews website. Its design illustrates this by taking on the look and feel of an actual menu you would see in a restaurant.

4. Goal-driven design direction

You’ve established the purpose of your website, set some goals you want to achieve, identified your audience and determined your brand image. You can now proceed to implement it. So how do you make design decisions sync with your strategy? Let me illustrate this with a likely example.

Suppose your main objective is to increase the number of subscribers to your Web service. How can your design help accomplish this goal? I can see at least three things here that will make a difference:

  • Make the “About” snippet on your landing page as clear and concise as possible. Your visitors must not have any confusion about the function of your website.
  • Use color and contrast to make the registration button or link stand out. If people can’t find it, then you won’t get many sign-ups.
  • Streamline the registration process by removing unnecessary and optional elements; people can fill those out later. If the form looks long, people may be put off of filling it in.

These are just three ways you can lead your design towards accomplishing the goal of increasing the number of sign-ups to your service. Your goals may vary, but the strategy is the same: shape and focus all the design elements towards meeting those goals.

The same strategy applies to your brand and audience: design the aesthetic that best suits it. If your website’s focus is entertainment, then create an “experience.” You are free to use a lot of color and imagery to shape that experience. On the other hand, if you’re designing a website that is focused on information consumption, for example, a blog or a magazine, then focus on usability and readability. Create an interface that fades away and doesn’t distract the user from accessing the content.

Stubmatic13

Stubmatic14 is an online box-office application. Their external website has two purposes: explain what the service does and get people to sign up. New visitors may only remain on your website for a few seconds, so if you don’t want to lose them you must be concise. You can do this by:

  • Using large imagery and diagrams to illustrate the function of your product or service.
  • Showing screenshots of your application. People will want to see what it looks like before they commit to a download or sign up.
  • Providing a tour, using descriptive examples of how your service can help them solve a problem. Show a video if you can; the less effort people need to make to understand how your app works the better.
  • Having the sign-up link accessible from all pages.

To succeed, the website must make the best use of the very limited amount of attention visitors will be giving it by not only informing but educating them about what your product does, and selling the benefits it provides. Stubmatic uses design elements effectively to pursue those goals.

TechCrunch15

TechCrunch16 is one of the more popular tech blogs. Its new design removes every single unnecessary graphical element from the page. What’s left is just the content, advertising and navigation. Subtle lines and grey shades give the page structure, yet the interface is almost invisible and places content straight into the front row. For a blog that posts several new articles a day, this format is ideal because it facilitates fast and easy access to the content.

5. Measure results

Once you’ve designed and deployed your website, it’s time to measure your success. This is just as important as the first two steps because until you test how well your design performs, you won’t know whether or not it is effective in fulfilling your goals.

If your goal is to increase the number of sign-ups to your service, measure it and see if your changes are making a positive impact. If you want to increase the number of subscribers to your blog, check your RSS stats. If you want to increase user involvement, see if you get more comments or more forum posts or whatever else is relevant in your context.

You can, of course, also ask people for their feedback, and this is a very good way to check if you’re on the right track. Be careful though not to implement every suggestion people make. Everyone has different tastes and wants, so everyone is going to have a different opinion about what your website should look like. If you do collect feedback, look for patterns; see if there are common issues that crop up and deal with those.

Measuring various website metrics is a whole science unto itself and is beyond the scope of this article. But however in-depth your analytics are at this stage doesn’t really matter; the important thing is that at the very least you have some way of measuring your key objectives. You can use this information to see if you’re moving in the right direction with your design and with any future changes you or your client make.

Google Analytics17
Even if you’re on a tight budget, you can use free tools like Google Analytics18 to get a lot of data on how your website is being used, including overlays of your pages to see what links people click on most as well as the ability to track conversion funnels.

6. Kaizen

There is a Japanese philosophy called “Kaizen,” which focuses on continuous improvement using small steps. When you work on your website, you should be thinking of Kaizen because the version you’ve just published is not the final version. There doesn’t even have to be a final version.

You can always make improvements, and the very nature of a website will allow you to introduce these at any time. This is because a website isn’t a magazine that you print and sell: once a magazine copy is out of your hands, you cannot make any changes or fix any spelling mistakes or errors. A website, however, sits on your server: if you find a mistake, you can fix it right away. In the same vein, you can introduce gradual improvements and updates to make your website more effective in serving its function.

Using the results of your measurements, you can identify problem areas. Perhaps your visitors cannot find the RSS feed link, or your bounce rate is too high or an important page on your website isn’t getting enough visits. Whatever the problem is, there will always be a way to improve things.

Conclusion

The main gist of strategic design is simply common sense: you’re making something for a specific purpose, so of course it should fulfill that purpose through its design. But it is actually very easy to lose track of your goals and end up with something that is beautiful but ultimately doesn’t work in its context. It’s very easy to fall into the trap of implementing the latest design trends just because they look attractive or shaping a section of your website to resemble another website that you really like without first thinking about why you are doing it or how it fits in with the purpose of your project.

Avoid falling into these traps by thinking through every design decision you make. Why is this button this color? Why are we using tabs? Why should we use icons here? Once you get into the habit of questioning your every design decision, the whole process will become much more focused. Think about the product or organization you’re representing. Think about the target audience and your brand. What will work in this context? What is expected? How can you use design to best fulfill the website’s purpose? Don’t just build a beautiful website: make a website that really works.

(al)

Footnotes

  1. 1 http://www.nytimes.com
  2. 2 http://www.nytimes.com
  3. 3 http://www.adaptd.com
  4. 4 http://www.adaptd.com
  5. 5 http://www.jquery.com
  6. 6 http://www.jquery.com
  7. 7 http://www.disney.co.uk
  8. 8 http://www.disney.co.uk
  9. 9 http://www.carbonica.org
  10. 10 http://www.carbonica.org
  11. 11 http://www.restaurantica.com
  12. 12 http://www.restaurantica.com
  13. 13 http://www.stubmatic.com
  14. 14 http://www.stubmatic.com
  15. 15 http://www.techcrunch.com
  16. 16 http://www.techcrunch.com
  17. 17 http://www.google.com/analytics/
  18. 18 http://www.google.com/analytics/

↑ Back to top Tweet itShare on Facebook

Dmitry Fadeyev is the creator of Usaura, a micro usability testing service, and the founder of UsabilityPost, a blog about good design and user experience. Additionally, you can read his thoughts on design, art and practical philosophy over at his personal blog.

Advertisement
  1. 1

    heather van de mark

    November 6, 2008 7:49 am

    i might just be missing it, but if i want to print this is there a -print page- button anywhere?

    0
  2. 52

    i tell you in italian, or better, in florentine patois: massai una sega te!
    That means, less or more, “i don’t think you have enough experience and empowerment to talk about this. not in this manner, though”.

    thx, anyway.

    0
  3. 103

    Lawrence Anderson

    November 6, 2008 8:43 am

    Really great post guys.

    0
  4. 154

    I want to print this is there a button anywhere?

    0
  5. 205

    Knowledge is Power, thanks!
    Here’s to Kaizen!!

    0
  6. 256

    Succinct and on the money as usual. I will save this and share with clients!

    0
  7. 307

    Thanks for this very interesting.

    0
  8. 358

    Thank’s for sharing. Usefull!

    0
  9. 409

    All in all i have to say, this is a really strange issue. Sure, congrats to the author, a good written, down to earth article. As i recently search through some websites of major advertising agencies, i was more than stunned, more horrified about the concept and technical realization. You might think, that especially communication experts would know their shit, and in return would have perfect onliine presentations. But the reality is very different. Every Agency i contacted, I asked them if they wanted some feedback, about errors and horrible mistakes. And yes, we would very much appreciate this, they replied. So i wrote several emails, reporting tons of shitty programming, the problems of searchengines + complete flash sites, the general problems with flash (test it until you throw up and then three times more), the really bad concept (how do i find what you do? your references, who do i talk to?). Normally, you would expect, that a hotel has comfortable beds, and if they advertise that, it smells funny right away. But when big names in the “integrated communcation” field present themselves so badly, with information you have to search for, you know why articles like these are more than necessary. Keep it up. The world needs us, people who know online design and concept and know how this medium works. For the user. For success!

    0
  10. 460

    The article title should be “Web design isn’t art”. Excellent post!

    0
  11. 511

    I couldn’t count how many designers I’ve worked with that ignore these critical concepts!

    0
  12. 562

    To the above commenters: Art is not communication, design is communication. Art is in essence, useless, it is a thing unto itself which servers no other purpose. Smashing is right here.

    And it is definitely not a sea lion going for a paddle or any pretentious crap like that!

    0
  13. 613

    If this is so insightful about strategic design, why does this page suck so much with its two separte active columns? Your crammin’ me! Quit Jammin’ me! Give me room to enjoy this article. Im tired of scrolling! I gotta go rest my mouse finger. Great info though. Thanks.

    0
  14. 664

    Hi! I have always reading your intresting ariticle from Japan.
    It seems this article is very intresting for webdesigners.
    I sometimes think the relation markting to webdesign (layout, color, architecture, usabilty, etc…).
    It is very difficult. We will have been disignning ( cordinating) the various related elements.
    I am looking forward to reading these kinds of articles.

    0
  15. 715

    I think you’re totally wrong about web design not being art. It involves everything you mentioned, plus a lot of artistic talent. Great article though, successful websites do require these elements.

    0
  16. 766

    Nice article. I am a new web designer. So this points really help me to build a successful website.

    Thank you very much.

    0
  17. 817

    @heather van de mark and @Ahmet Burak Bal: Use your browser print button, like any other application (File -> Print).

    “Web design isn’t art” is misleading. It’s a sweeping statement that is trying to be controversial for the sake of it. Some websites are purely art.

    But certainly for goal-driven websites (most commercial sites for example), art is secondary to the functional design, and this article is good for looking at the required thinking behind making those kinds of sites successful.

    0
  18. 868

    going to help a lot . Great post thanks

    0
  19. 919

    Man, this has been discussed to death. Yes, the points listed in this article are a solid path to follow, but it’s been done—the discussion. It’s common sense. If you don’t follow this (sadly many don’t), you fail.

    I just don’t think someone needed to write this lengthly article and post it here. It’s been done.

    0
  20. 970

    @Craig: What’s old to some is new to others. No need to knock it just because you’ve heard the message before.

    0
  21. 1021

    Great post. I’ve already read it twice. :)

    0
  22. 1072

    Thanks for the great article

    0
  23. 1123

    Great stuff and I concur 100%. Our company, mergeweb, has been preaching “Digital Strategy” for about seven years now. I think you nailed it. If the web site doesn’t [help] accomplish an organization’s objectives, then what’s the use?

    Some additional items we hit on include a Site Traffic strategy (it doesn’t matter if you have a branded, strategic web site if the right people can’t find you) and of course the custom functionality portion.

    Enjoyed the read and affirmed our approach. Thanks.

    0
  24. 1174

    I stopped reading after the first sentence because that’s a load of crap.. I feel any sort of work, whether it be web design, print design, painting, graffiti or even architecture is still art, whether its originally intended to be or not.

    Anyway, went back and read the rest. A few good pointers. Thank you.

    0
  25. 1225

    Just what I needed at the moment. I am trying to design a website for a university and I was too carried away with all those fancy designs and forgot the actual function of my website and ended up creating a template that was replica of Barack Obama’s[Now Proudly Mr. President] website :)

    0
  26. 1276

    John Hoff - eVentureBiz

    November 8, 2008 12:36 pm

    Been reading your blog for awhile but I don’t think I’ve commented before. This was a well written article and I just wanted to say hello and thanks.

    One thing I might add to the conversation is although you need to keep up on your stats and tweaking your site here and there, don’t dwell on them too much. Remember, you have a business or blog to run also. Marketing should take up a big chunk of your time.

    0
  27. 1327

    HI..

    Thanks a lot for this articla. It surely has some very valid points. I will keep these in mind while working on my current project…

    You guys are smashing as ever…

    0
  28. 1378

    Very useful post.These may help me alot to build a good website.
    Thanks alot.

    0
  29. 1429

    truly helpful. thanks!

    0
  30. 1480

    A great article covering a subject which many designers forget to focus on – that a good design is one that achieves its purpose and not one that looks good.
    I would add to the 6 points – ‘Understand the business and the market”. Factors such as the business’ culture and style, it’s competitors and market conditions will influence the design.
    I’d also change “Brand image” to “Branding” as a brand is much more than just the look – the copy (what you say) and the user experience (which you point out) are important in a brand.
    There’s also not much mention of the actual content. It is the content that will do most of the work on a website to achieve the strategic goals and will have the greatest influence on a design.
    There are some articles on using content as a strategic design tool here.
    Thanks again for a great article for getting designers to think about more.

    0
  31. 1531

    Thanks alot.

    0
  32. 1582

    Impressive! Thanks Smashing.

    0
  33. 1633

    I love the rockstar dude of jquery though, great article!

    0
  34. 1684

    This website – “smashingmagazine” is a classic example of a dreadful website, yet the owner of this website contines to “lecture” us about good website design….

    What is wrong here?…

    All the content (copied of course) is to the left but it is swamped by all that ad crap to the right ) no one will ever click there so why use it?)

    This landing page is so long that it is outside the reach of modem users, and for DSL users such as myself it is an entire waste of internet space…

    There is just one skinny column of content but a huge amount of empty space (does the webmaster here not understand pagination such as “Page 1, Page 2, etc???”) Why? It makes for faster loading web pages and less scrolloing down, and down, and down…. do you get it ?

    I give this website 0 out of 10 on all counts of design, accessability, original content, etc.

    Are the comments here real ? Are people so ignorant that they have not yet figured out that good website design is important to getting ahead…. are the readers here so dumb that they need to comment on the blindingly obvious…?

    Sure seems that way….

    -2
  35. 1735

    Dont agree with you Cibertrix. While this website is a big ugly with too much crap on the right I never look at, the article are usually quote good. Pagination sucks when reading an article, I just want to read it all by scrolling and not worrying about clicking next each time. The users of this site will most likely be on the cutting edge of technology too, so dial up modems are ruled out.

    1
  36. 1786

    Great article. Great illustrations. I’m going to use it to do a wordpress mini-site. And I linked it to an article I wrote on Hub Pages about Strategic Design in Business. I hope more people will read it, and learn about the uncommon sense of St. Design.

    0
  37. 1837

    Great article. Good information.

    0
  38. 1888

    businessentials

    June 28, 2010 4:42 pm

    Successful design teams acknowledge that some change is inevitable and balance their short term and long term priorities, creating site architectures that are flexible and scalable. A successful design team will revisit business goals and user needs on a regular basis and make changes as necessary.

    0
  39. 1939

    Great work from creative ppl.

    0
  40. 1990

    Thank you, it’s really useful!

    0
  41. 2041

    Really good article/reviewing usability and it’s purpose. cheers!

    0
  42. 2092

    hi gaza if your still knoking around this is the contact
    and details,ring them for advice ,say m hallsen recommened you

    0
  43. 2143

    Excellent article post and here is many useful tips that everyone should have in mind whenever they are going to design or redesign their website. Thanks for update and surely i am going to use these tactics for my company website vocso. com/

    0

↑ Back to top