Pando Design System
usana health sciences
The USANA Health Sciences Design System (Pando) enables designers, developers, and project teams to deliver the most consistent customer experiences by providing frameworks, tools, and techniques.
The USANA Design system is known as Pando, after an Aspen grove in Central Utah. Because each tree in this aspen grove originated from a single seed, it is the largest organism in the entire universe.
In the same way that Pando originated from a single seed, USANA desired that their Design System also come from a single source of truth.The principles and guidelines contained in this "single source of truth" would be accessible to and used by all of their teams.
As a first step, we helped USANA to define the goals and principles of the project using the company's core values. The project goal was to make the Design System efficient, consistent, and optimized. As well as being measurable and trackable goals, these were also goals for which we could be held accountable.
We also established a naming convention based on the Atomic design model of atoms, molecules, and organisms.
As a final step, we gained the commitment and support of our developers, Product Owners, and stakeholder groups.
Having buy-in from stakeholders from the beginning was critical to the success of the USANA design system.
We organized and planned meetings and presentations with everyone in authority at USANA. The goal of these meetings was to introduce the design system and explain its benefits. We also met with USANA's product owners, creative and marketing teams, and IT to discuss the design system. We hoped to help them by giving them a voice and a sense of ownership over the Design System.
Communication was critical in all of this, and the more we communicated with USANA and their teams, the better our chances of the Pando Design System succeeding.
The first step was to conduct a thorough audit of the current website in order to determine which elements we should keep and which ones should be retired.
During the audit of the existing site, we were able to refine our understanding and exploration of the story and outcome we wanted to tell with this extensive redesign.
In addition to typography, color, graphics, and other aspects of the site, the audit examined the website's usability.
After conducting the audit, we learned that in addition to redesigning website, a new brand would be required, which included a word-mark, a color scheme, and typography.
We then collaborated with our graphic design team to create a brand, while our UX team defined a color scheme and a font. The primary colors we chose were blues and greens, which represent health and wellness. We chose a sans-serif and a serif font combination for Typography.
Following the audit and organization of the existing components, it was time to actually design and build the new guidelines and components that would be the backbone to the Pando Design system.
We also verified that these components and guidelines were designed, tested, and adhered to industry standards and best practices, including following and complying with any and all accessibility rules, throughout their development.
We've created specification documentation for our components as one of the steps we've taken to guarantee that they are constructed correctly.
These documents show how to construct the component by demonstrating spacing, styling, and other design elements, as well as how the component need to behave. In particular, front-end developers and quality engineers have benefited greatly from using these documents to build and test against.
UI Kit
Another feature and requirement of the USANA Design system was the construction and implementation of a User Interface Kit (UI Kit).
The USANA UI Kit includes a variety of visual assets such as styles, typography, buttons, check boxes, and form fields that can assist designers in creating better user interfaces.
One of the key success elements for the USANA Design System has been the creation of a system of extensive documentation throughout the whole design process, as well as maintaining regular communication with all parties that would be using the design system.
To document this work, we used a variety of tools, including JIRA, Confluence, Milanote, and Figma.
We scheduled and maintained a monthly Design system meeting where we discussed progress and needs with all groups who would have access to or use the system. We also launched a company-wide Design system newsletter to document and share information about the system.
The goal of all of this was to keep the lines of communication open and to keep all teams informed of what was going on.
With all of these parts in place, the next step was to put pencil to paper and create the design system.
It was decided early on in the process that USANA would need a public-facing design system. As a result of having a public-facing website, USANA could share this valuable asset with a larger audience, and, as Brad Frost writes about making a design system public:
“Increases its visibility, which therefore increases the likelihood of use. Creates accountability by demonstrating a commitment to a product dedicated to consistency and reusability.”
The actual design process began with the creation of user flows, which were then followed by block-frames and, finally, wireframes. During these stages, we met with the design team on a regular basis to review and receive feedback on the work so far.
As soon as we were confident that the requirements were being met through these sometimes drawn-out processes, we moved on to designing a high-definition version of the project.
After finalizing the design, the next step was to build and develop it for the web. As part of the project's planning phase, we selected the web builder Webflow and code editor Code Pen to be the tools to buildout and manage the Design System.
The website's development took several months, however during that time both the UX and Development teams had the opportunity to evaluate, test, fix bugs, and provide valuable feedback. We also regularly communicated with project managers and stakeholders, keeping them informed on the site's progress.
The site was finally at a stage where we felt it was ready for release after more than three years of diligent work. Pando's launch was timed to coincide with an internal USANA newsletter and company-wide announcement.
A design system must be regularly maintained and managed if it is to succeed and be a useful tool for teams to design and develop better products.
Since the site's launch, this has been a top priority for our team, and we've been able to put together a system where users can submit requests or recommend changes to the design system.
A team of designers and developers then reviews the submissions and determines whether they should be added to the design system or resubmitted with changes.
Additionally, we are working to maintain best practices for web and accessibility standards by making sure that the system is routinely updated.
We also continue to evangelize the design system's utility to new users and maintain a blog where we share design system updates and other design-related content.
It is important to keep in mind that design systems are living documents that evolve and change in unison with the products and businesses they represent. Design systems are successful only when the goals, guidelines, and principles they establish are not only accepted by a business, but also become part of the culture, climate, and fabric of what that company represents. This will ultimately determine whether the USANA design system is successful or not.
