Harmonising Digital Experiences with a Design System
Brief
As a design lead at International SOS, I took the initiative to audit the current UI elements in multiple products and created a design system that harmonised design and interaction elements.
Design Process
Current Experience Problems
One of the keys to a great experience is unification through visual storytelling and elements.
When users access your product, experience elements help guide them in accomplishing their jobs-to-be-done. Without a strong focus on consistency, familiarity, and intuitive behaviors, there is a high chance that they will just become frustrated and avoid using the product.
The UI and Interaction Patterns in the products were:
Inconsistent
Disjointed
Over-Engineered
Outdated
Guiding Principles
In order to ground the design system in UI/UX foundations, I had to set a few principles that the design system (and anyone else who used it) would follow.
Create Interface Familiarity
Solve and Prevent User Issues
Optimize User Experiences
Create Consistent Experiences
Define
Define
Define
In order to get started with the design system, I needed to first define what the design system would include and the methodology we would follow. Creating a scope made it much easier to determine what was needed going forward and what elements were no longer needed from previous experiences.
This also helped reduce elements that were redundant when compared cross-product, and helped establish a “source of truth”.
As a first-step, it is imperative to take a look at the end-to-end user journey and identify the components being used. Once these components were identified, it became easier to ensure that from the atomic design model, that nothing was missed in the design system.
Wrapping this into our atomic design methodology, components were broken down into:
- Ions
- Atoms
- Molecules
- Organisms
The design system initially focused on:
- Establishing understanding through core design pillars
- Color Palettes (supporting light and dark mode)
- UI Components and Interactions (supporting light and dark mode)
- Fonts and Font Use Cases
- Iconography (sorted by theme)
- Responsiveness
Ideate
Ideate
Ideate
Aesthetics
The design system “theme” focused on modernising the overall look and feel of the products. In order to ensure familiarity with other interfaces and products users may use in their day to day routine, inspirations were taken from Material Design.
Material Design gave a clean, minimalist approach to design elements that lent itself well to visual storytelling through the design system and allowed the users to focus on the jobs-to-be-done.
A key focus of this new design system was providing the ability to guide the user through the product without visual clutter and noise.
Scalability
The design system also focused on scalability. Scalability meant many things for the uses of the design system, it also meant I would be able to quickly iterate and build upon the existing system with ease.
Developers could take the theme, colors, components, etc. and implement them in a way that would allow for ease of use when building new features or products
The goal was to not continually make “one-off” design or development choices and steer towards becoming re-usable and flexible enough to adjust for new use cases.
Accessibility
Providing an experience that all would be able to use with ease — without it being watered down — is another goal of the design system. The design system adhered to WCAG 2.1 AA Standards which provided the way forward in ensuring that users can still receive the same assistance, information and more with the use of assistive technologies.
Responsiveness
In the modern age, users are always on the go. Smartphones have become the prominent way of users accessing products, allowing users to use the product at their leisure.
The design system established grids that were used to break down the content, so when built responsively, the products would function and provide the same experience on different devices.
Device-specific interactions such as swiping, pinching, tapping and holding, etc. could also be used to offer a more interactive approach to the jobs-to-be-done.
Prototype
Prototype
Prototype
As a proof of concept, several features were created using this design system and shared through the team. These were clickable prototypes that simulated “how might” the experience feel like if we were to develop it.
Some examples include:
- Interacting with data grids to view current users listed and adding a new one
- A user opening a modal and completing a job to be done for adding a user and receiving a message upon success
- A user creating a web page and adding components to the page
Wrap Up
The design system was shared with the product team and was used in key opportunities.