Panacea is the first design system introduced to Banfield to serve as a single source of truth for design decisions, cross-functional collaboration, and product scalability. Panacea’s goal is to unify design and interaction language across all platforms setting guidelines, principles, and usage across Banfields’ products.
My Role
Lead designer
UX/UI designer
Design system
D.S. operation
Product
Component library
Documentation
D.S. website
Team
Suha Ardahan
Prasad Yeluru
Nicole Wyatt
Year
2021-2022
Problem
A fundamental struggle that has been plaguing Banfields’ online tools and applications is the disjunction of it’s products and lack of a cohesive system. As a result, users were burdened learning difficult systems and teams have been working in silos, creating their own UI and UX patterns with little consensus and guidance.
Here is a good example of some of the inconsistencies of the visual language in creation of products. They all look different, with various buttons, spacing, and display of information. As you could imagine the frustration of the development team and to the users.
Audit
Banfield’s legacy style guide has been untouched for over decade. This resulted in inconsistencies with the design language, siloed communication between teams, and an inhibition of product scalability. We identified 3 key problem spaces.
1. Inconsistent
Banfields’ products were inconsistent across all platforms and burdening users with complexity and confusion.
2. Siloed
Teams were creating new designs without a single source of truth to draw from and lacked collaboration between internal and external teams.
3. Inhibit
As I mentioned before, the style guide hasn’t been touched in over a decade and in no way a design system, inhibitng product’s to scale with business needs.
Opportunity
We converted key problems into opportunities to solve during the development.
How might we bring
product consistency,
enable cross-functional
collaboration, and
scalability?
Goal
Our goal is to unify and create a design language that’s well documented to act as a single source of truth for teams to reference. We set out to build and sustain a design system to provide a cohesive visual language and a foundational component library to enable cross-functional collaboration with internal and external teams.
Inconsistent
Consistent
The design system will set the tone for design standards, patterns, and principle’s. This will allow teams to be more consistent with designs and bring a unified experience to the end-user.
Siloed
Collaborative
The design system will serve as a single source of truth for internal and external design teams to collaborate more efficiently, making it easier and smoother to find information.
Inhibit
Scalable
The design system is a systematic approach that outputs the building blocks for designing in a scalable and sustainable way between teams.
The What & How do we build one
The Atomic design methodology is commonly used in crafting a design system, it consists five fundamental building blocks, which, when combined, promote consistency, modularity, and scalability.
Atomic Development
The five distinct levels of atomic design contains: Atoms > Molecules > Organisms > Templates > Pages
Component & Pattern development cycle
The creation of a new component or pattern goes through many rounds of evaluation. I took the initiative to construct a diagrammatic procedure in order to ensure consistency, collaboration, and scalability.
1
Domain Design teams reach out to stakeholders for a component or client identifies a need.
2
Design system team (DST) researches, designs, and iterate to create a component overview, guidelines, and specs.
3
Once the design proposal has been formulated and vetted, it is ready to go through review for approval.
4
Design proposals' are then published on the Design system for documentation to be shared between designers and developers.
5
A component is always evolving with the needs of the users, product, and market standards. It’s important for teams to keep an open feedback loop to maintain consistency, quality, and validated solutions.
Design Patterns
With rigorous communication and user testing we incentivised new patterns to create a cohesive and familiar user experience.
Panacea
From preliminary market research through agreeing on a template and beginning the brainstorming process. The discovery itself was important to ensure that both teams and the department, were happy with our newly crafted design system and the way we were going to continue to refer to it. We wanted a name that’s memorable, made sense to the brand and that it was going to stick.
We agreed upon ‘Panacea’ for it’s a solution or remedy for all difficulties or diseases. Panacea focuses on remedying issues with internal & external workflow difficulties and aligns with Banfields’ core principles'.
The power of ‘Tokens’
In order to simplify the process of creating a unified look across different platforms. I introduced design tokens to help product teams apply design decisions swiftly and with confidence. They become a single source of truth for designers and developers so both can rely on tokens to achieve consistency and scalability in UI design while collaborating effectively within the same design system.
What are tokens?
Design tokens are the visual design atoms of the design system. They are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.
Anatomy of a Token
Token names follow a strict naming convention that communicates when and where this token is supposed to be used without having to look at its underlying value. Together, with the team we came up with a naming convention that everyone agreed upon.
Design system ‘Panacea’
We created a standard template in documenting the components library and established a Q&A process to ensure that each item was:
A highly reusable element
A standard HTML element
Consistent across platforms
A prioritization for it’s users’
The design system was created in Adobe XD for handoff and as a final step, I created a single source of truth hosted on zeroheight for designers, engineers, and marketing teams for collaboration.
Impact
Within the organization, utilization of the design system increased design and development collaboration. It also served to improve efficiency in developing new tools, leading to a more cohesive, high-quality user experience.
Externally, Panacea presented a unified, single source of truth to stakeholders and succeeded in simplifying the most high profile systems with potential to touch millions of people. It created a foundation for building accessible, usable, and scalable products.
Design results
Consistent and easily digestible designs
Team organization and collaboration
Efficient workflows (in the design and implementation process)
Formation of a universal language among team members, customers and users
Building scalable solutions
40+
Interactive components
90%
Workflow improvement
Next steps
With more time I would love to include tokens for all components in the library. I didn’t have the necessary bandwidth to create design tokens for all components but I was able to create the foundation and naming conventions for the colors property, surface, variant, and states.
Reflection
Engaging teams in the design process creates moments of collaboration, alignment, and efficiency. Throughout this project, we sacrificed communication for deliverables, which created retrogression in our progress. I learned a great deal to over communicate with stakeholders to ensure direction and vision for Banfield’s products and it’s development.
