Creating a consistent and cohesive user experience is no easy feat for any organization, but helping a global company with 11,000+ employees and a 100-year legacy transform into a user-first design powerhouse is a completely different task altogether. Security company Allegion has a global portfolio of more than 30 brands and sells products – both software and hardware that help keep people safe – in more than 130 countries.
Our mission, as a human-centered design team, is to transform users into fans. We achieve this via a user-centric approach that requires understanding and documenting user needs. We then create software that fulfills those needs – and delights at the same time. While mobile is definitely important, our team focuses on context-first, rather than mobile-first. By analyzing the context in which a user interacts with the software, we understand the device being used. If the software is only being used on a desktop computer, we don’t need to consider the mobile experience, but when people use our app, phone in hand, while they’re inspecting a facility, the mobile experience becomes critical. It’s all about context for us.
From UI/UX to digital product design
At Allegion, the Digital Product Design team has three key objectives. The first one is to provide awareness around the various roles and responsibilities of the team. For example, when I joined, we were known as the UI/UX team, but have since rebranded as the Digital Product Design team because the term UX often causes confusion. User experience can have many different meanings from research and preparing user flows to copywriting and coding interfaces, so it’s often unclear what is expected. Each team member now has a specific role: UI designer, interaction designer, or design researcher. Let’s take a quick look at these roles:
- The UI designer: Communicates the brand through visual design and is very involved in the creation of the design system.
- The interaction designer: Determines the interaction between the user and the system. The interaction designer analyzes user flows, focuses on end user efficiency gains, and executes low-fidelity prototypes for user research and testing.
- The design researcher: Identifies user personas and their needs, validates prototypes, and conducts usability testing.
The second objective of the Digital Product Design team is to standardize the delivery process across a variety of digital product teams. This includes making sure that the right design resources are involved at the right time – from initial discovery to delivery.
The third objective is much more tactical, the implementation of our design system, internally referred to as Phoenix. Phoenix contains a series of styles, components, and guidelines for all of our digital products. Our design system needs to take into account our 30 global brands, each with their own value proposition and product offerings, and requires us to think about multiple brand identities, platforms, and languages all at the same time – an extremely complicated endeavor.
Switching to XD and rebuilding the design system
Our design system was originally built in a non-Adobe platform. When we made the switch to Adobe XD, we decided to rebuild our component library to take advantage of those features that are unique to XD and would allow us to scale more effectively. An example of this is component states, which provided us the capability to alter the appearance of our components based on user interaction. We’re now at the point of scaling that design system to include assets from marketing – landing pages, emails, imagery, and illustrations.
The Phoenix team collaborates with developers every step of the way to ensure the design system is not just a designer’s sticker sheet, but actual code that can be shared and implemented across several applications and websites. The UI designers collaborate very closely with the front-end developers, who work across product teams, to build out specific components. They then share those components directly from XD to their development partners, responsible for the coding and final delivery of the products.
In Adobe XD, you can continue to iterate on the designs without affecting what has previously been shared, which is incredibly valuable. In previous platforms we’d used, if a designer shared a link with a development partner, then went back into the design and made adjustments, those changes would be immediately visible and often caused unnecessary confusion for our development partners. XD provides us the ability to control when we publish, so we can decide when we are at a point where we’re ready to share with our partners.
