HOLMES INSTRUCTIONS DIGITIZATION

TIME

ROLE

1 month, 11/2021

User Research / Front-end development / UX writing

OVERVIEW

The aim of this project was to make the positioning instructions for one of Holmes’ products accessible digitally, maintaining Holmes brand identity and preserving the original copy provided on paper-based instructions for the same product. The proposed solution consists of a responsive website I designed and coded. This is was an individual project.

HOW DO I MAKE HOLMES' INSTRUCTIONS MORE ACCESSIBLE, VISUALLY ENTERTAINING, AND EASY TO TRANSLATE?

ASKING THE RIGHT QUESTIONS

Research

BRAND

Who is Holmes? What does the brand identity look and feel like? Does the brand have any digital touchpoint with their customers?

COMPETITORS

Are there other brands offering similar products? How do they offer instructions to their customers? What do their instructions look like?

USERS

Who is using Holmes' products? What are users frustrated about consulting the existing instructions?

GATHERING ANSWERS FROM DIFFERENT SOURCES

Research

Existing marketing material helped me understand the brand aesthetic: purple and yellow are the main colors used for this product, while the font aligns with the brand's logo. The humidifier is marketed based of its technical efficiency and practical usage, rather than any particular aesthetic property.

Reading the paper-based instructions, I realized they presented some information that wasn't essential during the very initial stage of the user journey, which consisted in putting the product together and positioning it in an appropriate location.

Holmes' tone is serious, precise, explicative. In my design I aimed for a direct, succinct, yet explicative language, to ensure consistency with the brand while allowing for ease of translation, considering the diverse nature of Holmes' customer base.

I researched complaints about Ikea's instructions, and users frustrations allowed me to create a digital experience that balances their common expectations (more icons, less text) and Holmes' preferred approach to instructions (heavily text-based).

FOCUSING ON REAL USERS

"I don't care about reading everything, I just need to know if this thing is flammable"

"I only use instructions on the go, and the paper version is too verbose"

"The paper version is so confusing...so many words and no images."

"I don't speak English, I had to ask my best friend translate this for me..."

After consulting existing literature about instructions and analyzing complaints on existing instructions online, I created these two personas, which provide an overview of two general categories that I identified as potential users of the instructions.

The main difference between them is time availability in an inverse relationship with the possibility of them misplacing the product.

UI DESIGN

I designed a website hosted on GitHub, using HTML, CSS, and JavaScript.

INDEXING

Meeting user needs

Many users access instructions on the go, without the intent to go through their entirety. This index provides hyperlinks to different sections of the instructions to minimize the amount of time users spend on the instructions.

ICONS-TEXT BALANCE

Facing the competition

Icons are both the favorite and least favorite thing about instructions, according to research conducted on Ikea.
I added icons to the instructions to disambiguate tasks, and make the positioning process possible without the need to read through the copy. At the same time I preserved the copy on the original instructions, while keeping it succinct.

ONE PAGE LAYOUT

Considering real usage

A complex architecture would have increased cognitive overload for my user. A single page allows for scrolling through, scanning, and common practices that users expect to be able to conduct when they are on the go. Users expect this site to work the same way as sites they already know.

RESPONSIVE DESIGN

Meeting users where they are

One could assume that these instructions would be accessed from a smart phone, but it can't be excluded that a user might use their laptop, tablet, smart tv, smart watch, or any assistive technology. Designing the website responsively was a must.

GETTING FEEDBACK TO IDENTIFY POSSIBLE IMPROVEMENTS

Given my time constraints I was able to gather feedback from two users who were available and roughly corresponded to my two personas.

My first user was a 40y.o. woman.

She was unable to understand anything from the paper-based instructions
She translated the website from English to Italian and French, being able to understand. This evidenced that there was in fact an increase in accessibility thanks to the digitization of the instructions.
She found the organization of the index at the top of the page extremely helpful.

My second user was a 20y.o. woman.

She didn't need to translate
She didn't spend more than 5 minutes on the website, mainly scrolling through
She suggested not all the icons I had chosen successfully disambiguated every task.
She found the digital instructions easier to navigate than the paper-based version.

THE MAIN CHALLENGES

The most challenging part of the project was building the website in a way that reading was not essential to the user experience. In the process of following instructions users are in all sorts of mental states and physical conditions. Making the website as straightforward as possible was a necessity, but providing additional text for those users who want to spend more time and increase the accuracy of the positioning task was also essential.