A strong foundation
When designing products for our end user, we should be constantly asking ourselves if it is...
Accessible
Our designs should always address the needs of all potential users. Our products will be used by people with low vision, blindness, hearing impairments, cognitive impairments, motor impairments, and situational disabilities (such as a broken arm).
Adaptive
Product layouts must adapt to fit different screen sizes and form factors including mobile, tablet, foldable, and large-screen devices. When creating a layout, consider how the spacing and the parts of layout work together.
Easy to use
The end users journey through our products must be seamless. Identifying and removing points of tension or confusion will ensure high usability of our products. We should rely on user research and data analytics to make informed and impactful decisions, rather than leaning into our own personal preferences.
Interactive
Providing simple, yet clear actions for users to take will keep them engaged in our products. Entice users to explore bite sized, more digestible pieces of content via interactive elements like tabs, dropdowns, accordions and scrolling interactions.
Scalable
The purpose of this design system is to achieve scalability in our design. Utilizing components and trying to work within a set of guidelines are important steps towards reaching that goal. Always consider how anything you are creating could be used again in the future.
A practical style guide
At Fetch, our designers are tasked with working on a wide variety of digital media. Making our deliverables consistent and on-brand was previously a challenge for the team as we lacked any sort of design guidelines or foundational principles. I was tasked with getting the design team aligned via the implementation and adaptation of a style guide.
Color
Fetch previously didn't have a good understanding of how color use was impacting users with visual impairments. Utilizing the WCAG guidelines, we have clearly laid-out which color combinations are or are not acceptable to use, ensuring color compliance across all digital touch-points.
Typography
Type styles and sizes were previously chosen on a case by case basis. This resulted in visual inconsistencies throughout our products. Our style guide now clearly defines type specifications to be used in various design situations, ensuring our type is consistent everywhere.
Elevation
Without guidelines, our designers were achieving elevation in a variety of different ways, which resulted in each design feeling disconnected. Our design system now specifies a few simple yet effective options to choose from when they need to elevate elements in their designs.
Spacing
Each designer used to rely on their own preferences when adding spacing. This led to more visual inconsistency throughout our work. Defining specific values and a range of different ways those values can be used allows designers to maintain consistent spacing without any guess work.
Iconography
Without a well defined style, we ended up with a library of icons that did not always feel like they went together. We've honed in on a specific look and feel for icons which resulted in all new icons being more aligned visually. We also developed rules around when to use different icon styles.
Motion
Motion brings digital content to life and also helps users understand which elements are interactive. Without motion, our website and purchase funnel felt flat and interactions weren't always clear. Adding subtle motion to things like buttons and dropdowns helps keep our users engaged.
A comprehensive component library
A scalable design system cannot exist without a component library that makes updating commonly used elements incredibly easy. Utilizing a library of Figma components, we can make global updates in seconds and maintain a high level of consistency throughout our digital products.