Service design

The “Buy” button should always work

Here is one lesson I have learnt working on Envy, a cool Hawaiian car rental.

On a car page, there is a yellow price tag with a “Rent” button:

The “Buy” button should always work

A typical way to get to this page is the following. On the front page a client chooses the desired rent dates, clicks “Find”, then selects from available cars. It is possible though, that by the time the client selects a car, somebody else books it already. Or the client reloads the car page in a couple of days, and the car is gone. One way or the other, a client can end up on the car page with the pre-selected rent dates, for which the car is no longer available, and they won’t be able to rent it.

Also, on the front page we show the best cars we have. A client can click any of them and get to its page, having skipped the dates selection altogether. In this case, the dates won’t be specified, and the client also won’t be able to rent the car. We didn’t want the client to be confused by the disabled “Rent” button, so in addition to the front page, we put the dates selectors to this price tag itself.

I presented the design of the car page to Ilya Sinelnikov (co-creator of Envy) and was talking about the price tag.

I said, we didn’t like that the “Rent” button is disabled sometimes: the website is there for the people to rent cars. But how can you rent a car which is taken by someöne else? At first, we thought that we could automatically change the dates to the nearest available ones. But it can result in a disaster: what if the client doesn’t notice the change, pays for the rent, comes to pick-up the car, and learns that we don’t have it? I said, we were also thinking about some tool to explain the problem and help the client change the dates, but there was no chance to make it on time for the website launch. So, I said, for now I suggest just disabling “Rent” the button in this case.

Also, I said, a car could become unavailable while the clients looks at its page. Therefore we needed to re-check the availability after the “Rent” button is pressed, and inform the client of a problem, if it occurs. For now, I said, we’ve designed this error page. In the future it would be better to suggest a date change or offer another car. But this is also not going to be implemented by launch...

Ilya interrupts: “To hell with the dates, let’s just make the button always enabled.”

What? There can be no car for the client when they come.

“The client is willing to pay us money”, Ilya says, “and you prevent them from it by disabling the button. This is inefficient. Let them pay, and we’ll sort it out”.

And then Ilya enlightens me. Envy as a business must be able to sort this out anyway. It is possible that a booked car is not available for the client, say, if the previous client breaks it, or whatever. In order to make the client happy, Envy offers them a better car for the same price.

For Ilya, it all appeared as if I was trying to stop his client from paying him money with my UI. But from the business perspective my UI consistency hurdles are insignificant. Dates have accidentally overlapped? Oops, sorry, here’s a Mercedes instead of a Ford, no big deal. In the worst case, if there’s a super-picky client who won’t take anything but the very car they’ve chosen on the website, we’ll return the money and apologise.

So we made the “Rent” button always enabled. If by the time the client clicks it, the car becomes unavailable for the selected dates, the manager gets a notification about a problem, and it is their job then to contact the client and agree on a new car or dates. And if the dates are not selected at all, clicking “Rent” moves the focus to the dates fields and opens the calendar, so that the client knows what to do.

Principle: the “Buy” button should always work.

2016   Bureau   design   service design   web   work

Hand holding as a web design approach

To create a successful web page about a product, try hand holding. In addition to saying what product you have, help the reader start using it: explain, guide, convince, clarify, warn.

Let’s say you are a bank and a you have a page about your savings account options. There are people who don’t know what deposits are or why they might want one. Others are afraid of having large amounts of cash on them and don’t want to go to the bank with it. Or they are just unsure which office to go to, what documents to have and how long the thing will take. Your job is to alleviate their anxiety, to raise their self-confidence and to help them make an informed choice. To get clients, help people become clients by hand holding. Explain why a deposit may be useful. Visualise the interest rate. Say how to transfer the money online from another bank. Show the nearest office on the map (include the business hours). Publish the contract with useful comments on the margins. Acquaint the reader with your managers.

Or suppose you install windows and you have a page with options for fittings and glass coating. Well, most people have no idea on how windows are installed. Or even what elements they consist of. What should I consider before ordering windows? How to gauge a window opening? Who will disassemble the old windows? How long will it take to do the whole house? Can this be done in winter? What if a new window does not fit? Can I pay with a Visa? To get clients, help people become clients by hand holding. Explain the whole process from step one to step done. Connect the options to real-life cases (the inner windowsill for kitchen could be made of a heat-resistant material). Say in advance what can go wrong and how to avoid it. Publish the contract with useful comments on the margins. Acquaint the reader with your managers.

Or maybe you are a web hosting provider and you have a page that lists services, plans and options. This may be good for an experienced web administrator. But if someone makes their first website, they probably don’t even know that a domain name and web hosting are separate services. They have no idea if they need CGI, SSL or mod_whatever. They have no clue how to make email work. To get clients, help people become clients by hand holding. Help them figure out which set of services will fit them depending on why they came. Explain what steps are necessary from subscribing to a hosting service to opening the website. Help understand and configure DNS, choose and set up an FTP-client. Publish the contract with useful comments on the margins. Acquaint the reader with your support team.

Yes, the answers can be found online. But if you rely on that, you didn’t do your job well. Your website should work like an experienced and attentive manager, not like an indifferent price tag.

Many people suffer from professional deformation: they think everybody understand their technical terms and work principles. I’ve even heard an opinion that such “hand holding” shows disrespect to a client by treating them like a child.

This is an error. Everybody likes feeling taken care of. If your hand holding feels patronising, your are just not caring sincerely enough.

2015   design   service design   web

The principle of one link

Web services send notification emails. The links in such emails serve a sole purpose of bringing users back to the services’ websites. Therefore, there should always be exactly one link per such email. The flow: the receiver clicks the blue underlined text without even reading anything and ends up in the right place.

Example: an email to confirm registration by following a special link

Typical mistake (the links in the example don’t work, obviously):

Dear Ilya,

You have tried to sign up for the Exciting Service. To confirm your registration please follow the link. Make sure to subscribe to our blog to get the latest news and go try our great iPhone app!

Sincerely,
Exciting Service’s team

To take an action, I need to read and understand all the crap that the author has written here.

Here is the right way:

Ilya, confirm your registration:
Confirm and start using Exciting Service

Exciting Service

The right place to tell the user about the blog and the iPhone app is the website itself. You will have more room to talk about them, and the user will be much more motivated to check them out after he or she has completed the registration.

Example: an email to notify you about a shipped online order

Typical mistake:

Greeting from AwesomeBooks, dear customer Ilya!

You have ordered the book “How to Order Books Online” by James Writer (see your order history). The books has been shipped, and the tracking code is WTF4382430324.

Learn more about shipping and delivery, warranty and return policy. If you have any further questions, contact the support.

There are 0 items in your cart. Since you have bought the book “How to Order Books Online”, you might also be interested in “Underlining links: an essential design skill”, “What makes an email notification bad” and “What should one do if he cannot come up with a third stupid book name”.

Thank you very much!

Your AwesomeBooks

Notice how the only thing that interests me, the tracking code, is not a link.

Here is the right way:

Ilya, the book “How to Order Books Online” has shipped to you.
Track the delivery and see more recommendations

AwesomeBooks

The links leads to a page with tracking information, recommendations and all the service links.

It may seem hard to leave just one link in an email. What if you need both this and that? The solution is to change the approach: treat the whole email as a link. There is only one by definition. Ask yourself: “Where does this email lead?”, and it will all make sense.

Obviously, the principle is not applicable to email designed for reading and thus does not lead anywhere.

2013   design   service design   user interface

SIM cards must die

So, Apple still fighting for smaller SIM card standard for future iPhones. What? Why isn’t Apple fighting to kill the SIM cards? In the future, there won’t exist any SIM cards, and we will choose carriers like we choose Wi-Fi networks.

The phone presents me with a list of available carriers. I pick the one I like or select to learn more about it (coverage, service plans etc). If I choose a new one, the phone asks me to choose a plan and other details. Then it asks me if it’s fine to share my payment information with the selected carrier. I confirm. Done. Something like this:

Carriers don’t want that because it will prevent them from locking in customers. But who cares? How many things the carriers used to like Apple has already killed? It’s about time to kill the most clumsy and archaic one, the SIM card.

2012   Apple   future   iPhone   service design