Toast (or how to please your customers by making them do more)

A few years ago, on a sunny Winter’s morning, I walked into the breakfast room of a B&B. At first it seemed like any other British countryside establishment, but then I noticed the toasters. Toasters, you ask? Toasters. Every table in the little dining room had its own toaster with a loaf of bread sat next to it. There was a slightly worrying extension lead configuration to host the eight or ten toasters. But after the initial confusion (and a passing thought to health and safety fire hazards) Pete and I started toasting.

Now you might be thinking that this was pretty lousy hospitality. If you’re on holiday and paying for breakfast, shouldn’t someone bring you toast and look after you? Why should you do it yourself? Although on casting furtive glances around the room and seeing other couples happily making their own toast, we shrugged our shoulders and joined in.

There are a few reasons why this highly unusually DIY toast situation was awesome. Firstly, you could butter the toast as soon as it was done and eat it while it was still hot — none of the trying to spread cold butter on cooling toast that’s been sat in the kitchen for minutes before you get it. Secondly, it was bespoke. If you liked your bread lightly toasted and just golden, you could have it. If you prefer a darker bronze, then you could do that too. You could also control the supply, if you were hungry, you could have as many slices as you wanted, without having to ask for more. If you didn’t want much, then there wasn’t wasted food. It seemed the perfect set-up.

I’m not sure if the reasons behind the toasters were to give customers exactly what they wanted, or if it was to free up time in the kitchen by not serving toast every few minutes. The proprietor seemed pretty savvy, so I’d like to think it was both. We thought it seemed like a good idea and it was actually quite fun so we enjoyed our breakfast but eventually forgot all about the unusual toast situation.

The other day, I was staring down the top of our toaster at home waiting for it to pop when I remembered the dining room full of toasters. It got me thinking, the customers were doing the labour that they were paying for, but they were happy. A quick check for the B&B on Trip Advisor shows 22 five star reviews all mentioning the table-top toasters. It seems that the pay-off for putting in a minimal amount of effort resulted in receiving an efficient and tailored service. Where else might we be able to implement this approach?

With the toast situation, only a small part of the process was given to the customers. They still received a full breakfast from the kitchen (and were not expected to do the washing up) but they had control over the extras. So I’m not suggesting that customers are made to do all of the work that they are paying for, but there seems to be an opportunity to let them get involved and take on some actions that result in benefits for the customer and suppliers.

Are there any parts of your online service that you could hand over to your customers? Are there any processes that take up your time that would be easy for your customers to do themselves? What could you achieve with the extra time you’d save? Would your customers actually be happier to do some work themselves if they see a real benefit? Food for thought.

Originally published at www.clarkcx.com on March 6, 2016.

Paper Prototypes: What are they and why use them?

Website design is ever-changing and, consequently, the way that website designers work project-to-project changes as we learn better ways to do things, embrace new technologies, methodologies and processes.

We’ve been making websites for many years, and have experimented with different ways to get clients to engage with the wireframing stage of the process. We have sketched out really rough wireframes with clients and used online wireframing tools such as Balsamic and InVision to present them. This way of showing wireframes to clients has been fine but we’ve felt like we’ve not quite been able to get people connecting with the functionality of the design. We felt it was important to wireframe most of the website with our client so they knew they had full input into the design but we didn’t need to do every page and certain pages such as a blog overview or contact page were so simple that they didn’t really need to spend that time with us.

Wireframes are the blueprints of the website and it’s important to make sure that the content and functionality is right before the website is built. But because we’re all visual creatures, it’s still hard to see past what font has been used, whether the navigation is on a light or dark background, should the buttons have rounded or square corners? etc. It’s easy to ask people to not worry about those things at this stage but we can’t help being drawn to the visual, even if it’s just monotone and basic. Our clients naturally want to skip ahead to the visual design stage where the colours, nice fonts, photos and illustrations live. Wireframes are not the sexy part of the web design process and grey boxes and buttons are, to be honest, a bit of a turn off.

A better way to engage with wireframes

So what can we do to get our clients more engaged with wireframes? Draw them! For our latest project, we rough sketched some of the important pages on the site with our clients to make sure we had everything we needed on the page and then rough sketched out the remaining page templates as a team to get all the elements in place. Then I drew every page template out on quadrille paper, both desktop and mobile versions. I also had separate cut outs of recurring elements, such as the header and footer so these could be placed over the page templates.

So why draw pages? There are several reasons that we decided to work this way in this project. One of the main reasons for drawing out the pages was because they are drawn by hand, there are no styles to be districted by. No fonts, no shades of grey, no corner radiuses. We and our clients could concentrate on the content and functionality of each page template.

The act of drawing out each element meant that I thought extra carefully about the elements going on a page template. It’s easy to copy and paste elements using design software but because each element was inked in, it was considered. Sometimes, we realised that we were missing something, a call to action or similar and I simply drew it and taped it into the design. The designs were modular and amended easily without having to save and update pdfs.

As well as there being no visual design distractions, presenting the wireframes actually worked really well by them being on paper. They could be picked up and examined, mobile pages could be held in our hands and scrolled by pulling the paper down, customer journeys around the website could be followed by placing the pages next to each other and checking that the journeys made sense. When our clients had suggestions, I simply drew them on, no waiting until I was back at a computer to make the changes. And because changes could be suggested and instantly implemented, our clients knew that this stage was a discussion for them to get involved with, not something finished that they had to approve.

But paper? In web design?

But the website isn’t printed, it will be used on computers and phones, shouldn’t you show them on those devices? We’re not going to go from paper prototype to finished website, there are a couple more stages between these. The paper prototype is important to check that the functionality and content of the website is right and to engage our clients but we will show the prototype on screen too. The next stage is to build a HTML prototype which will act the same as the finished website but we know that by testing out the pages on paper first that the processes have been well-developed. That’s not to say that things won’t change at the HTML prototype stage, but we are confident that we haven’t overlooked anything before proceeding. We had a fantastic meeting showing our clients the paper prototypes and getting them excited about the project. Visual design might always be the bombshell of the process but paper prototypes are, at least, charming.

First posted at https://www.ablewild.com/journal/web-design/paper-prototypes-use/