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.

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.

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

3 Essential Design Trends, November 2024

Touchable texture, distinct grids, and two-column designs are some of the most trending website design elements of…

20 Best New Websites, October 2024

Something we’re seeing more and more of is the ‘customizable’ site. Most often, this means a button to swap between…

Exciting New Tools for Designers, October 2024

We’ve got goodies for designers, developers, SEO-ers, content managers, and those of you who wear multiple hats. And,…

15 Best New Fonts, September 2024

Welcome to our roundup of the best new fonts we’ve found on the web in the previous four weeks. In this month’s edition…

3 Essential Design Trends, October 2024

This article is brought to you by Constantino, a renowned company offering premium and affordable website design You…

A Beginner’s Guide to Using BlueSky for Business Success

In today’s fast-paced digital world, businesses are always on the lookout for new ways to connect with their audience.…

The Importance of Title Tags: Tips and Tricks to Optimize for SEO

When it comes to on-page SEO, there’s one element that plays a pivotal role in both search engine rankings and user…

20 Best New Websites, September 2024

We have a mixed bag for you with both minimalist and maximalist designs, and single pagers alongside much bigger, but…

Exciting New Tools for Designers, September 2024

This time around we are aiming to simplify life, with some light and fast analytics, an all-in-one productivity…

3 Essential Design Trends, September 2024

September's web design trends have a fun, fall feeling ... and we love it. See what's trending in website design this…

Crafting Personalized Experiences with AI

Picture this: You open Netflix, and it’s like the platform just knows what you’re in the mood for. Or maybe you’re…

15 Best New Fonts, August 2024

Welcome to August’s roundup of the best fonts we’ve found over the last few weeks. 2024’s trend for flowing curves and…