HP | Customer Support Tone of Voice

Tone of Voice Mini-site: Figma Prototype

This is the story behind my decision to create a comprehensive design system for HP Customer Support and how it streamlined development processes, fostered consistency within our team, and enhanced the overall user experience across Customer Support.

SITUATION

The HP website is an enormous beast—a digital "Grand Canyon" with strata formed by the different visual and interactive designs used over the years. With hundreds of products supported and over twenty years of content, there was a lot of inconsistency across the site.

Customer Support struggled to develop and deploy our web experiences in a reasonable timeframe. The process was far from efficient, with updating a web page often taking weeks and months, a far cry from the ideal of mere hours or days. In light of these situations, I saw an opportunity for us to address both problems with one solution.

TASK

As a design team, we needed to deliver more consistent work, as it reflected the individual stylings and preferences of the particular designer. By adopting an Atomic methodology, we built a design library, focusing on the "atom" components and "molecule" behaviors to create better consistency and establish core behavioral rules or patterns.

If we were going to improve the visual consistency and interaction model across the site, we also wanted to do a similar exercise with the content and our use of language and text.

ACTION

We created a Figma Component Library and partnered it with a Design System mini-site, an internal reference point for designers and the teams we worked with to understand how we wanted to present support content. It served as our manifesto for how our designs look, feel, and behave across our web and app experiences.

Each component included interactive elements to dynamically illustrate its states and behaviors (e.g., mouseover/highlighted, active, inactive, etc.), cut-and-paste code for HTML, JavaScript, and React, and a set of simple dos and do-nots that explained the correct usage of an element.

The Tone of Voice guide was part of our mini-site, illustrating our approach to using text and language. We focused on reducing "cognitive load" with less technical language and more positive, action-focused use of language.

RESULT

By standardizing our designs on this library and these patterns as a design team, we could roll out future updates and experiences with unprecedented speed and ease. This not only made the developers' work more accessible but also allowed us to deploy in a much more reasonable timeframe, a significant improvement from the previous situation.

We reduced development time from three months to approximately four weeks, driving cost savings and improving project timelines. In addition, we saw consistent improvements in our customer satisfaction scores as more designs were updated across the Customer Support web and app experiences.

Reflection: During this process, we hired our first UX Researcher, and as they were onboarding while we were doing this work, their input was limited. I would have preferred a more thorough, research-backed approach to validate the behaviors we championed; showing preferred vs. flawed approaches is one thing, but backing them up with actual customer feedback illustrates the influence of a consistent design methodology.

In conclusion, the biggest win here was that, as a design team, we established some clear expectations and guidelines we could hold ourselves against when delivering work. This freed us to focus more on the more challenging aspects of a project rather than getting distracted in the minutia of execution.