FGT Design System

Posted byJondavid OttenbacherPosted inUX Projects

Fast Growing Trees

BACKGROUND:

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.

MATERIALS:

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.

By using preset frames in Figma, the team will be able to efficiently add desktop + mobile borders to any screen size
The layout grid feature in Figma allows components to be resized according to the device you need
Standard brand colors used throughout the site and product pages can be implemented as well, no more memorizing HEX codes!

RESEARCH:

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:

  • Colors
  • Typography
  • Icons
  • Header/Footer
  • Grids
  • Product + Collection Cards
  • UI Elements
  • Cart/Checkout Sections
Fast Growing Trees uses Source Sans Pro for the majority of their digital store front

OUTCOME:

  • A single thumbnail represents a category of plants
  • Categories can be broken down into groups of plants that have something in common. For example, this can be flowering plants, shrubs, or trees used for privacy.
  • After each category section is completed, some headers and copy can be added to describe the group of products.

FINAL MOCKUPS:

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.

Here’s an example of different parts of the design system being used in action. On this page we have the header, cart info, and checkout progress assets all working together to be used for a future test.

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.