The ultimate guide to why and how to create a reusable UX design system
In a recent episode of The Frictionless Experience podcast, our guest shared what was essentially a crash course in the concept of designing for reusability across an entire enterprise. Shawn Sheely, the former VP Head of Experience Technology and Enterprise Accessibility at US Bank, successfully introduced and implemented an enterprise-wide reusable design system at US Bank.
In the interview, which is part of our series on Elevating to the C-Suite, Shawn shared a wealth of information on the process of creating reusable design, why it works, the operational cost benefits, the usability benefits, and the problems he faced in transforming a large enterprise to adopt the reusable design model among all stakeholder groups.
An enterprise-wide, reusable design system is a holistic approach to project management and design — not just visual design but also the user interface and engineering design. It’s an approach built on collaboration across large teams and multiple web experiences and platforms to create a better customer journey.
Done successfully, reusable design is a unified operational and systems design that makes all common components fashioned for reuse and provides the framework and governance for implementation.
The problems that Shawn Sheely sought to fix at US Bank are problems that almost every enterprise faces — that larger companies in particular tend to think and operate in disparate silos of responsibility, either separated by job responsibility (design vs. security vs. engineering vs. marketing etc.) or by business lines or product lines.
With the systems and interface design managed disparately, in silos, you inevitably have higher build and maintenance costs and inconsistent user experiences, which creates unnecessary friction and visitor frustration.
The solution is reusable design.
“It's really the foundation of everything that you're doing around customer experience, from code to design,” Shawn explained in the interview.
This product management model attempts, as he put it, “to bring the practical nature to engineering while bringing the technical nature to design,” and then establishing standards for smooth product development and simplifying processes to create a seamless, unified customer experience.
When it came to changing an enterprise from business-line think to product think, Shawn described what they employed as “ the quad model” — an amalgam of product, agile, engineering, and design teams and principles.
“In the quad, as we called it,” Shawn added, “the idea is that product, engineering, design, and agile all come together and determine what the priorities are and how to manage our teams and how to start rolling features through the products.
“And then you're bringing in risk, compliance, governance — everybody — to weigh in on this."
"You start to peel back the layers of the onion as you're trying to define how things should work.”
Shawn talked about the difficulties in rethinking at an enterprise scale — uniting design and engineering teams towards common goals, emphasizing the 'quad' approach and advocating for a common methodology and architecture.
One key, he explained, is to determine the responsibilities at the domain level for design, experience design, engineering, and product. And the way to do that is involving key cross-group stakeholders:
“You need to bring your designers and your engineers together to create great products, to have beautiful design. If you don't have great code, it's going to fall flat,” Shawn said.
Shawn pointed out that with any large enterprise, product models will be all over the place for large pieces of their infrastructure. “You can bring that all under the same practice. And in ‘the quad,’ as we called it, the idea is that product engineering, design, and agile all come together and determine what the priorities are and how to manage our teams and how to start rolling features through the products.”
The other challenge is defining solutions for adapting the user interface design for multi-screen experiences, especially at a company that, like US Bank, not only deals with phone-sized apps and full websites but also kiosks and other large form presentations.
Shawn revealed that their approach, which worked, was to start on the smallest format first — the smart phone screen. “I think that was really helpful because … it forced that sort of paring down of the experience because (even on a small screen) everybody wants to do more…"
"The smart phone screen really drove us toward simplicity. And of course, simple design is beautiful and functional…working with that mobile screen first forced us into those simpler patterns.”
Trying to make it work on that small screen is what drove them toward what Shawn described as “experience patterns.” The concept is that no matter what screen the consumer is viewing and interacting with, they recognize it instantly on their next screen experience because they have already done this over and over again already on all other digital interactions with the brand.
Let’s face it: it’s a lot of work to reengineer any company operation, especially one that is well entrenched in a long-standing and established enterprise. So, is it worth it?
Shawn says yes. After operating three years within the reusable design mode:
"We reduced costs by 70 percent and increased onboarding by the same amount, and completion rates went through the roof. All of a sudden we're bringing more customers in, which means we're starting to build trust and the next stage is to go from car loan, then from car loan to mortgage.”
Design consistency also reduces user friction. When consumers on a retail website encounter friction in their purchase attempt, they'll go to a competitor and complete the transaction there. Reduce friction and you increase revenue.
Yes, the customer commitment is typically stronger in the banking world because, as Shawn points out, “It's this progressively more invested relationship between the two of you, between the consumer and the brand itself,” and so abandonment is a bigger commitment for the consumer. However, Shawn also points out that, with the financial institution, the brand is built on trust. “I trust you with my money. You’ve got my money, you’ve got my mortgage.” And creating a frictionless user experience builds their trust in financial services brands, which breeds loyalty.
Of course, making any enterprise-wide change like this always requires a top-down approach since a core element is governance across all stakeholder groups.
"To say we are going to operate differently, that were going to take this amount of the budget next year to determine how we will do this companywide, this has to come from the C suite down," Sean says. "Innovation never works if you just dictate it."
Catch the full episode with Shawn for more insights on how to implement a successful enterprise-wide reusable design model.