AsurionUI: Why A Design System Just Makes Sense
If you’ve never heard of Asurion, we’re a large company headquartered in Nashville, Tennessee. Our claim to fame has historically been mobile phone protection. Mobile carriers would offer our protection plans (similar to insurance, but for phones) to their customers in their stores, and we would support those customers with tech help and an online claims service. In this model it was generally understood that our brand was invisible. Since many of our customer-facing interfaces were oriented around one of several large mobile carrier brands, the end customer was often unaware that Asurion existed. Our product teams, who were extremely proficient in user experience and interaction design, were also individually responsible for designing and building the user interfaces for their products. The resulting interfaces were beautiful, but could sometimes feel siloed or unrelated to one another.
In 2019, Asurion acquired uBreakiFix, a phone and electronics repair chain with around 800 locations in the US. The acquisition meant that in addition to offering protection plans to customers through our mobile carrier clients, we could also perform mobile device, smart home, and appliance repairs for any customer, with or without a protection plan. It also meant that Asurion would become a more visible brand, and we’d need to develop new direct-to-consumer approaches to properly support the additional market opportunities offered by the repair locations. One of the new approaches was to develop a robust design system, known internally as AsurionUI, which is what will be discussed in this article.
What is a design system?
Anyone you ask will define design systems a little differently, and entire books have been written on the subject, but the TLDR is this:
Design systems combine a brand’s style guide and visual language with a repository of reusable user interface (UI) components to facilitate the development of digital assets like web or mobile applications.
For example, think about a button. All websites and mobile applications have buttons to enable users to navigate or submit information. At first glance, they seem extremely simple, but there are a lot of decisions which go into the creation of a button. The brand style guide dictates the colors and font which will be used in the button, and the visual language informs things like the button shape and hover animations. In addition to those considerations, accessibility standards might provide guidance for how the button is coded to support assistive technology, like screen readers, for users with disabilities. The design system combines all of these important decisions and the associated hours of design and engineering work into simple components which can be easily reused by anyone in an organization.
Why does Asurion need a design system?
As our company continues to evolve its direct-to-consumer strategy, the product and marketing teams will be in constant cycles of ideation and testing. The mission of the AsurionUI team is to help teams stand up new web assets quickly and confidently. We’ll know we’re doing our jobs correctly when we see these three qualities in all of the company’s UI:
Consistency
During the course of an interaction with a brand, have you ever noticed a change as you moved from one part of the business to another? While these “seams” in the experience are not always visual in nature, sometimes a simple shift in color or layout can sow a seed of doubt about the trustworthiness of a brand. Asurion’s goal is to eliminate these “seams” in the experience and create a suite of services that feel unified to our customers. The design system creates a central source of truth for how digital interactions with Asurion should look and function.
Efficiency
Let’s go back to the button example from earlier. How long does it take to create a button as part of a digital interaction? Remember that a button is not as simple as it might seem, buttons might appear differently based on whether they have been hovered or clicked, and there might even be some animation as they move between those states. All of these considerations must be designed and engineered. When you look at the cumulative amount of hours it takes to design and build a single button, you could easily be looking at days worth of time, if not more. If you multiply that time across all the product and marketing teams in the organization, you begin to see the efficiencies which are created by having a central set of guidelines and reusable components. Asurion is a fast-paced company, and the design system helps our teams move new ideas into the market faster by reducing the amount of time spent reinventing the wheel.
Accessibility
One of Asurion’s key experience principles is “actually helpful”. It is essential that we are able to help everyone who needs us. This is why we take pride in making sure each component in the design system meets accessibility standards for our customers who may have disabilities or other restrictions. Maintaining appropriate color contrast ratios and ensuring that all content can be consumed via screen reader software are just a few responsibilities of the design system team. Anyone using the system to develop an experience can be confident that their work is reaching as many customers as possible.
As we move into the future, AsurionUI will continue to be an integral part of Asurion’s brand and product work. Those of us on the team are excited to help our partners across the organization to quickly and easily create seamless experiences which are considerate of everyone.
