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

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…

3 Essential Design Trends, April 2024

Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…

How to Plan Your First Successful Website

Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…

15 Best New Fonts, March 2024

Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…