How to design from a blank canvas

Default avatar.
February 28, 2013
How to design from a blank canvas.

ThumbnailMost 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.


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.

Sebastian Green

Sebastian Green works at a small web startup within an established IT Support Business in Manchester. His passion is using the latest technologies to aid business growth & automate boring procedures.

Read Next

15 Best New Fonts, July 2024

Welcome to our monthly roundup of the best fonts we’ve found online in the last four weeks. This month, there are fewer…

20 Best New Websites, July 2024

Welcome to July’s round up of websites to inspire you. This month’s collection ranges from the most stripped-back…

Top 7 WordPress Plugins for 2024: Enhance Your Site's Performance

WordPress is a hands-down favorite of website designers and developers. Renowned for its flexibility and ease of use,…

Exciting New Tools for Designers, July 2024

Welcome to this July’s collection of tools, gathered from around the web over the past month. We hope you’ll find…

3 Essential Design Trends, July 2024

Add some summer sizzle to your design projects with trendy website elements. Learn what's trending and how to use these…

15 Best New Fonts, June 2024

Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…

20 Best New Websites, June 2024

Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…

Exciting New Tools for Designers, June 2024

In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…

3 Essential Design Trends, June 2024

Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!

15 Best New Fonts, May 2024

In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…

How to Reduce The Carbon Footprint of Your Website

On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…