Design Thinking in Interaction Design
Less is more, one step at a time.
One thing I’ve learned after using Design Thinking principles to drive innovation for over 14 years is that you can use them to solve any problem that affects humans, regardless of size or complexity. This is the story of a problem that I solved in 2012 when the web experience industry was still trying to find a balance between web standards, accessibility, and user-centered design. What motivated me to hit the “Publish” button is that it demonstrates how Design Thinking can have a big impact not only on large scale customer strategies but also at atomic levels like designing a delightful interactive experience.
“Design thinking is a human-centered approach to innovation that draws from the designer’s toolkit to integrate the needs of people, the possibilities of technology, and the requirements for business success.”
— Tim Brown, CEO IDEO.
THE RESEARCH
“The Moment of Empathy”
We started the research with a customer-first approach. We visited different types of stores and interviewed not only the users that would use the tool but also the type of customers they talk to every day.
We understood the user context, environment, expectations, and also captured pain points of the service across the customer journey from awareness to support. This information became the foundation of the first hypotheses and user-centered solutions.
In this project we had to deal with a non-traditional type of user; a Customer Service Representative.
Most UX designers are used to deal with users that sit in a desk and interact with applications from their computer or mobile users that use applications on the go. Luke Wroblewski tweeted “Desktop by day, tablet by night, mobile all the time”
These types of users were different. They had to be standing all day, memorize complex business rules and talk to a lot of people while trying to close a sale with a smile, even when the application was blocking their process.
THE PROBLEM
“The Pain Point”
When reviewing the heuristics video footage, I noticed an atomic element that had a big impact on the performance of the user, the input field label. It made the interface look complex and crowded. It made the forms to be expanded creating long pages that latter affected the smoothness of the multi-page flows. What’s more interesting is that most of the times this piece of content was being ignored by the users.
At that point, I had designed and developed web forms for over twelve years and I would say that I have a decent knowledge of web, usability and accessibility standards, no so much for the things I’ve done right but especially for the mistakes I’ve made. My initial thoughts made me feel that I would have to challenge and break the patterns I had followed for many years.
THE HYPOTHESIS
“The Moment of Innovation”
I knew that if I wanted to come up with the best strategy, I needed to remove the input field labels from the most important application of one of the largest teleco companies in Canada. It was a big risk, but there cannot be innovation without risk.
“The biggest risk is not taking any risk… In a world that is changing really quickly, the only strategy that is guaranteed to fail is not taking risks.”
- Mark Zuckerberg
Others have also tried to remove labels from web forms using placeholders instead. However, in my research in 2012, I couldn’t find any successful solution to make it usable and accessible or even delightful. I noticed many of those attempts were focused mostly on technology innovation rather than Human-Centered Design.
THE PROTOTYPE
“The Moment of Building”
From the research, I identified the main priorities of the user and established three design principles that would help me solve the main human-factor problems; Primary Focus, Cognitive Facilitation, and Primary Interaction.
Primary Focus. We know that users don’t read, they scan and CSRs were not an exception. The heuristic evaluation demonstrated how fast they used the forms going through each input field ignoring most of the copy on the screen — including most labels, by using the “tab” key. CSRs wanted to get the job done focusing on one step at a time.
Cognitive Facilitation. By removing the labels, the main usability risk I was taking is that users might need to remember the input field name they were interacting with. I solved that issue by placing the label on top of the input field on :focus state allowing the users to have a contextual reference of the task they were performing in case they need to remember the field name.
Primary Interaction. Users can’t and don’t focus on all the labels and fields at the same time, so I provided a progressive enhancement of the UI as they advanced through the forms. Here’s how:
A. Before interaction state — not in progress section: Use of placeholder with no label. Color contrasts of inactive elements on the screen were degraded to the lowest level of conformance “A.” This allowed users to have less noise in their peripheral focus.
B. Before interaction state — section in progress: Font color level of conformance is upgraded to “AA.”
C. During Interaction: On Focus state: Font color contrast is upgraded to “AAA” and font size is increased 25%. Labels are displayed above the form field to facilitate the user to refocus after any distraction or interruption in the process.
D. After Interaction state: Font color contrast is kept at “AAA” and the font size is reduced to the original size.
Accessibility note: You can use this method and still make your web forms accessible in the markup. Here is how: http://www.w3.org/WAI/tutorials/forms/labels/
THE PROTOTYPE
“The Moment of Truth”
My first prototype was a live version of the UI-Kit and did some guerilla testing in the office to validate the hypothesis. Later I test it with real customer representatives. One year after the application was pushed live, I interviewed one of the users in the field. This is what he said:
“Everything is super smart and simple, I just use tab to go through the fields and the experience is so smooth. The tools help me focus on what I need and I feel it goes as fast as I want to go. When I used the previous version I didn’t know it could become something so much better”
— Customer Service Representative
THE BUSINESS RESULTS
“The Moment of Value”
WIND wanted to provide the best tool for their customer service representatives and make the activation process faster. Atomic-level innovations allowed me to design a concise and clean UI, avoiding the use of the mouse to scroll and reducing the number of steps from seven to three.
After launching the new Customer Activation Portal, for the first time in the history of the company, no e-learning courses had to be designed and developed for users to learn how to use the tool. Most importantly, the number of calls from CSRs to the Call Centre was reduced to 60%.
“Happy customer representatives, happy customers. Happy customers, happy business”
If you think this story can benefit someone else in your network feel free to recommend it and share it.
Further Reading:
- “God is in the details.” by Buzz Usborne
- “How users read on the web” by Nielsen Norman Group
- Web Content Accessibility Guidelines (WCAG) 2.0
- “Web Form Design: Filling in the Blanks” by Luke Wroblewski
