Published on | Prototyping: From UX to Front End — Medium Molly Jaffe

This article is inspired by a recently completed freelance project. My clients for this project own a spectacular, beachfront rental property. In the summer, guests pay exorbitant sums to rent this property and (as you can imagine) my clients wanted to ensure that guests have the best possible vacation experience.

A photo of the property’s back yard.

Now, expense aside, what’s the most frustrating thing about renting any vacation house? Whether Airbnb or a traditional rental, I think the most common pain point is probably figuring out how everything works. How do I turn on the TV? Why isn’t the key working? Can I park here? Is the microwave supposed to be making that noise? What most rental home owners do to solve this problem is create a handbook for the house — usually a binder with tabs left on the kitchen table or an emailed PDF doc, with painstakingly typed instructions detailing each process.

A screenshot of the email I got from a lovely Airbnb host in Prague.

So, back to this beach house. My clients decided that it’s 2018 and making guests flip through a binder is ridiculous. Especially when those guests have just paid a small fortune to stay in a modern, high-tech home. So they hired me to create a clean, easy-to-use digital guide for everything their guests might want to know. While building their site, I did a ton of research on how to build digital handbooks and have compiled the spark notes below.

1. Gather Your Research

As with every design project, it’s important to block off time for research. You need to know how users will be interacting with your product and find examples of how other people are tackling similar problems. Surprisingly, not many people are creating digital guidebooks for rental homes, so I studied the smart things people were doing in print and then thought about how those best practices translate to the web and mobile web. For this project, I kept a long list of tasks that guests might want to accomplish so that I wouldn’t lose sight of them when designing. Some guidebook features will be obvious, but you are guaranteed to find something you haven’t thought about yet while researching.

via ARM Sattavorn on Dribbble

Do your research with the user in mind and if you can, schedule some user interviews. Ask non-leading questions that get to the heart of natural user behaviors. Get a clear idea of how and when different people will use your handbook. If you design a handbook without research, your design will be useful for you and maybe a few other people who think exactly the way you do. During my interviews, I asked questions like, “Can you tell me about frustrating rental experience?” and “What is the first thing you do when you enter a rental home?”

In terms of best practices, you’re probably wondering who is already making great web-based handbooks or manuals. Unfortunately not as many people as you might think. For example — Mercedes and BMW are competitors in the luxury market and they both claim to take the user experience incredibly seriously. However, take a look at their owners manuals. Imagine having car trouble, being forced to download this massive PDF on your phone and then digging through this block of text to solve your issue.

2. Love the Information Architecture

The best handbooks allow people to quickly and easily understand or complete required tasks. In order to make sure your user can find information quickly, it is important to group, organize and label all information intuitively. The first step to creating a handbook with great information architecture is to make a list of all the things your handbook needs to cover. This list should come from your stakeholders, your initial research, and user interviews.

Next, organize that list into straight-forward categories. When organizing, think about how people use things in the real world and get feedback from others. When I started this project, I listed each task category alphabetically. I thought this would be the easiest way for people to find the category they needed. However, after talking to users I realized in this specific case, it made more sense to group things like “TVs” and “Wifi” next to each other and categorize them under a header like “Tech.” I also ended up putting “Tech” at the top of the list after it became clear from users that it would be the most used. If you’re not sure what category something should go under, ask lots of people. If you have the resources, this would be a great time for a card sorting exercise.

3. Make it Easy

Let’s be honest, no one likes to read instructions. Chances are, your user is looking at your handbook because they are out of options or need very specific information they can’t get elsewhere. They’re stuck on the side of the road, the power went out — whatever. Remember when designing that they’re probably a little frustrated by the time they get to you. Therefore that golden rule of product design — “Don’t make me think” — applies tenfold to a handbook design. Luckily, since you’re building a digital guide, you have tools at your disposal that can eliminate a ton of the frustrations that come with a physical document.

Never forget that a search bar is a beautiful thing. Whenever possible, empower your user to dictate their own experience. Though seemingly obvious, a search bar is a shortcut that can be omnipresent. The only time you don’t need a search function is if you have very little content. Check out Nick Babich’s article, Design the Perfect Search Box, for a deep dive.

via Ivan Radovic on Dribbble

Another way to help eliminate friction is to utilize anchor points or page-jump links to avoid unnecessary scrolling. This can work for a handbook built as a PDF or responsive site.

4. Show Don’t Tell

Once you have clearly organized your information into a scannable, searchable format, think about ways that you can visualize each solution rather than writing instructions. GIFs, pictures, diagrams and videos are infinitely more useful than a long list of steps and create a truly seamless user experience. If possible, user test your visuals. Show someone your guidebook and ask them to complete a task. For rental homes, I found that menial tasks like “Make Coffee” or “Turn on the heat” make for great user tests.

via Tyler Somers on Dribbble

Finally, all copy you do include should be instructional and easy to read. Before publishing, try to find someone to read and edit your copy for brevity and clarity. This will also help you troubleshoot any confusing language. Your users will be happy when you explain everything well using the fewest possible words.

Designing a Digital Handbook was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Designing a Digital Handbook

Cool stuff, every week

More Articles