OnShift Design System
Redesign
2023
Challenge
OnShift, a software development company for Senior Care Facilities, designs and conducts user testing using Figma prototypes. These designs are created based on their design system. After designing with the design system file, I noticed areas of inefficiencies in this process.
Assets are vulnerable to alteration when copy-pasting between files, and subsequently the accuracy of each asset has to be considered when completing designs. Checking asset specifications requires hunting down the original asset for comparison or finding a written description.
Initially a personal goal, towards the end of my internship I was asked to improve the design system organization.
Solution
Switching to a Library based file network improves design efficiency when assets are converted into templates, protecting the original copy, and consolidating similar assets into a template group. Compiling all templates into a “master file” mimicking the previous system allows designers to access template copies in a way they are familiar with.
The creation of “Style Cards” improves consistency and clarity in communication. They reduce points of confusion between developers and designers using diagrams and css-like descriptions that record an asset’s construction, style, and behavior.
“Library”— A Figma Library which allows instances of Figma components to be accessed from other design files.
“templates” refers to Figma styles and Figma components
“template group” refers to component properties, specifically variants
Process
The first thing I did was take an inventory and evaluate the current design system for pain points, successes, and redundancy. After researching how other designers create Figma based design systems, I created a plan and began the redesign with atomic level assets and building up to more complex molecules and organisms.
Throughout the planning and design process, I reviewed with the senior designer to resolve issues and ensure the final system was efficient and easy to use.
Impact
Improved Asset Consistency
Converting assets into templates* allows designers to create and use exact copies of the original asset. This provides assurance to designers that the asset is accurate.
Template copies are linked to the original and can be updated allowing designs to evolve.
Expedited Design Process
The implementation of templates reduces the time designers spend searching documents for specific assets and their specifications. Designers can now locate and insert a template copy from within their design file.
Designers can also modify the template copy from within preset constraints to suit their needs before they insert the copy into the file.
Clear Communication between Devs + Designers
When an asset is converted into a template, a “Style Card” is created to record every detail of an asset’s construction. Their diagrams and css-like descriptions (written for developers) improve clarity in communication with developers and other designers about the asset.
