Fast Growing Trees
Design systems provide a more efficient way of creating high fidelity prototypes. Adding the same rules for images, text styles, and other elements commonly used in UX Design works for a while, but eventually it may slow down the design process for your team. The same elements that are used in the HTML theme file can be recreated as a drag and drop format for your preferred design software.
The other impressive feature found in Figma is the ability to save previous versions of your design system, so that you can show when newer versions are launched with your team. This helps establish rollouts for new features found on the site, and allow for implementation across multiple brands.
Tools: Figma, HTML/CSS
The first guidelines I set up for the design system were the standard device sizes and breakpoints commonly used on the web. For Fast Growing Trees, over 60% of their users come from a mobile device, so mobile-first was always the starting point for any site tests the UX team would run.
Desktop grids are commonly broken down into 10 or 12 column grids (Fast Growing Trees uses 12 columns for Desktop, and 6 for mobile and tablet screen sizes). Safe areas for specific screen sizes allow properties like margins to be shown on the art board.
The company specific design system incorporated parts of Shopify’s Polaris design system. While many of the parts of Fast Growing Trees’ site are able to be changed, there are some back-end features that have a limited amount of changes that can be made to them.
Websites have an overwhelming amount of detail to them, so breaking them down into sections is generally easier to handle.
For Fast Growing Trees, I broke it down into:
- Product + Collection Cards
- UI Elements
- Cart/Checkout Sections
Version 1.0 of the Fast Growing Trees design system was about creating a more efficient way of making the website more user-friendly. Once the main elements used throughout the website are laid out, you can get into more complicated features, like page templates or new site-wide features that are proven to be wins for your users.
The most important reason for advocating for a design system is to create an easier stream of communication throughout team members. Designers, stakeholders, content writers and developers can collaborate on a system that needs to be changed in one place, and give feedback that the entire team can consider.