Navigation

How to design from a blank canvas

By Sebastian Green | Branding, Web Design | Feb 28, 2013

Most web design and/or development projects have some history behind them. Sometimes you have to re-design or re-develop a company’s existing website to update it and add new functionality. In most cases, there is some history to the website; its business goals have been identified, research has been carried out, and you are able to look back on historical data such as analytics to aid in making decisions throughout the design and development process. You’re able to identify the improvements that need to be made.

But what happens in the rare case that client company has no website? They have never even thought about having a website in the past. This is totally new territory to them — they’ve got  a totally blank canvas.

This isn’t the usual project that I come across, but having been in this exact position recently, I’d like to share some of the steps I took to complete the project and some of the things that I learned along the way.

 

Initial questions

Before starting any project, I like to ask the client a few simple questions. Whilst some of the questions below are specific to this client, some of them are ones I ask all clients before I agreeing to take on a project.

  1. Why do you want a website now, having not had one before?
  2. What do you want the website to do or achieve?
  3. Do you have a budget?
  4. Do you have any competition online?
  5. How easy is it to talk to your existing customers?
  6. Do you think your existing customers would mind answering a few simple questions?

Before taking on any new project, I want to make sure that I can get along with the client. I have been in projects in the past in which the relationship has deteriorated — it’s not pretty.

The answers to all of these questions were good. The budget was not massive, but I felt the project was achievable with it. I was going to take a quick approach to the entire project. I did not want to dwell on each part for too long. I wanted to see if it was possible to complete the project quickly whilst satisfying all of the objectives.

Not having any historical data info to help me, I decided to do what I call “quick and dirty research”. Often you can spend longer on stakeholder interviews and market research than you do on actually coding a website. I decided this project would was going to be different.

 

Identify the business’ goals

Often clients have a good idea of why they want a website and what they want it to achieve. When a client answers the question of why they want a website with “our competitors have one” alarm bells start ringing. Luckily, this client of mine had already realizsed that in order for their business to grow, they could only sell to so many customers over the phone. They could not afford to take on more sales staff, but they did have a budget to build a website as a sales channel. They had two business goals for the website:

  1. increase sales;
  2. reduce their brochure printing costs and eventually eliminate the need for a brochure altogether.

The client having already identified these goals was a great start. After discussing it with them a little further, we decided to add “increasing brand awareness” as another business goal for the website.

 

Competitor research

The chance of being the only website on the internet offering a particular product is very rare. Unfortunately this client did have competition online. I wanted to assess their strengths and weaknesses.

I approached this in two ways. The first, was that I asked the client for a list of their competitors. The second, was that I did my own searching online, looking for the products that the client sells. This highlighted a few other competitors that which the client was not aware of.

I assessed each competitor based on the following criteria:

  • How functional was their website?
  • Was it a brochure or a full e-commerce site?
  • How usable was the website?
  • How did the websites look and feel?

Armed with this information about the competitors, I was able to make recommendations and decisions about what the new website should look like and what it should do. I was able to identify weaknesses that I wanted to make sure the new website did not suffer from. I also identified some strengths that which gave me some inspiration for the new website.

 

Research existing customers

I realized early on that I was going to have to talk to the client’s existing customers, which is why I asked that initial question about whether this would be okay.

I asked the client for the contact details for a small number of their customers who the client did not think would mind my asking them a few short questions. By asking them a few brief questions I wanted to figure out what they would find useful on the new site. It is common sense that keeping your existing customers happy, will not only mean that they place repeat orders, but that they will recommend the client to others.

The main question I asked was, “How could the website make ordering easier for you?”. The general consensus from all the customers that I spoke with was that they would like the ability to place repeat orders easily. They currently had to call up the client every time they wanted to order and tell them what they wanted to order.

Carrying out this research took less than an hour. It may not have been as pure or as scientific as some people would have liked but it highlighted a major feature that the new website should have.

 

Design, build and testing

So far, the research yielded some really great insights and inspiration for the new website, and it had taken a matter of days, not weeks.

The client already had a good idea of what they wanted the website to look like because they already had a strong brand identity for their business. I spent a day at their offices. We discussed the results of the research, had some lunch and did some rough wireframes until we were both happy.

By lunchtime the next day, I had made some full-color mockups of the wireframes, and the client had given me the go-ahead to start building the website. I only gave them three options. I didn’t want them to spend too long deciding because that would eat into the budget.

Building the website was straightforward. There was nothing functionality-wise that was too complex. It was an e-commerce website, so I opted to use a pre-built cart. There is no point in re-inventing the wheel.

Instead of building the entire website, and then testing it at the end, I decided to test it as it was being developed; as each stage was completed. This would reveal any issues, which could be quickly rectified before moving on to the next section. Some things were missed, but all the major issues were caught. The missed issues would be dealt with later. Given the budget, there was no time for a real user testing session, so I decided to do some “quick and dirty” user testing. As each stage of the website was completed on a development server, such as the shopping cart, the check-out area and the area for the registered users, I would ask everyone in the client’s office to use the website on a development server. As they were close to the project, I wanted to get some outsiders to test it, so I asked my family. I even asked a few randoms in the local coffee shop. I was surprised at how friendly they were.

The website launch followed the usual process. I made sure that all the analytics software was up and running. No longer was the project a blank canvas.

 

Conclusion

From the initial client meeting to the live website, took a massive three weeks. I have had design approval take longer than that on other some projects I’ve worked on.

I learned a few things along the way, whilst working on this project.

Carrying out a project, whether it’s creating a totally new website or updating an existing one, in a short space of time without having to sacrifice one’s goals is possible. Research does not need to take a long time or cost a fortune. Yes, you will miss a few bugs in testing, but the beauty of the internet is that you can quickly make changes to the code and everyone will see those improvements instantly. It’s not set in stone.

Some purists might not approve of some of my methods, and they probably would not have taken on the project because the budget was not big enough for them. Would they have been able to make a better website?. I’m not so sure. Orders are coming in, and my client is happy. The website is satisfying all of the goals that were identified, and it took weeks, not months.

I think sometimes designers and developers can sometimes get caught up in the details. But whilst the beauty of the medium we work in is that a website can be easily changed. Build it, ship it, and iterate to improve it.

 

Do you prefer working from a blank canvas? How do you go about developing a strategy? Let us know in the comments.

Featured image/thumbnail, blank page image via Shutterstock.

Share this post
Comments (no login required)
  • Simon Minter

    Good article, it’s always interesting to read about ‘the process’. What *was* the budget, out of interest?

    • http://twitter.com/sebastiangreen Sebastian Green

      Thanks, that’t the reason why I wanted to share the story about this client.

      Sorry, but it would be unprofessional for me to share my clients budget in public.

  • http://twitter.com/StacyCSchilling StacySchilling

    Never ask a client “Do you have a budget?” because many will say they don’t when they really do and want to know what you will charge initially scaring them off in the process. Instead, ask them “What is your budget range for the project?” This works because it gives you an idea on how much the client can afford to spend and allows you to determine whether you can or will be able to complete the project within their budget because everyone wants the Jaguar, but most can only afford the Pinto. Also, if the client wants all the bells and whistles on their site, but doesn’t have enough funds in the budget to cover it, you can package the website down based on what they can afford to spend with their budget.
    FYI…Internet and Web is always captialized, and realized doesn’t have an “s” in it. While, whilst is not a word.
    Other than that…great article!

    • http://twitter.com/sebastiangreen Sebastian Green

      Why are Internet and Web always capitalised?

      Few things about your comment:

      Firstly asking “Do you have a budget?” and getting a response of “yes – £xxx” or “no” is the same as asking “What is your budget range for the project?” and getting a response of “yes somwhere in the region of £xxx to £xxx” and “no”. You still end up with a ballpark figure or just no answer. I always ask this as it highlights two things to me. Firstly that the client has already thought about the outlay and secondly that if they come back with £500 I can politely decline the project and point them in the direction of someone who can help them out.

      Based on knowing what the clients budget is you should not need to “package the website down” as you don’t spec what they can’t afford. In the cases where the client has said “no” to the budgeting questions then is the time to be flexible. I have presented quotes where the client has said “yes I like the design and features, but it’s too expensive. Can we negotiate?”. My response has always been a resounding yes but on the grounds that the spec will be reduced accordingly and prioritised.

      Everyone in the industry has their own workflows. I think we all want the same information, yet all ask slightly different questions to get the same info. No person can say their way is the right way and anyone else’s is the wrong way. A lot of it is also based on the client and their reactions.

    • http://www.facebook.com/ColRGray Col Gray

      Realised does have an “s” in it depending on where you are writing. it is the Americanised version that uses a “z” instead of an “s”.

    • http://twitter.com/CptAshton Andreas Skoog

      May I guess you are American? Whilst is most definitely a word, and, regarding to my dictionary it is simply a more formal version of “while”. However, it is not used in American English, as is also the case with the spelling “realised”. I agree with you, however, that the Web and the Internet should be capitalized.

      • http://twitter.com/sebastiangreen Sebastian Green

        Slightly off topic but thats for pointing out that whilst is a word.

        Still not sure why Web and Internet should be capitalised.

  • Tzvi Perlow

    Wow, you just did a quarter the work for me, amazing article… got some divine providence over here. Just yesterday I was offered to do a site…from blank! I had no clue where to begin, so I just started sketching, it turned out really weird, and I was looking for some help. This article has made my day! Well done WDD/S.Green!

  • http://www.agentsofvalue.com/ Jennifer

    Very nice article! I think even bloggers who even use free blogging platforms can benefit from the ideas you have shared, especially because this has to do with brand awareness. A writer can at least find a way to incorporate some of your ideas. Not as technically as one can hope, but with platforms like WordPress that give users a lot of ways to design their pages, I think your methods will be of help…Thanks!!!

  • RonLum

    Thanks Sebastian. This is definitely one the best articles for web designers that I have read. I’ve been doing web design for just under a year and I’ve had to learn the process of talking business and making sure that the work I do is purposeful and well-researched. The budget question is very important because it helps you gauge how much your client is working with and is an ideal starting negotiation point. Otherwise, a high-ball amount from me will scare them. A low-ball amount will screw me over. This article is a must-read for young designers.