Building a Design System For a Creative Marketplace

Visual Designer

Product Designer

Figma

Background

I joined https://www.rrgraphdesign.com/ in 2020 as their first dedicated product design hire. I observed their design teams were working off their version of a style guide and component library. With no shared language to create a cohesive user experience, all products were built by relying on design sense. This leads to:

Discrepancies between design mockups and the final products.

Inconsistencies between current designs and legacy designs or between projects.

Increased design and development effort due to re-creating components and patterns from scratch.

"How do we build a consistent design language on our platform?"

PROCESS

1. Audit

We created a Notion's board to audit existing processes, features, and UI components across all our products.

2. Research

We conducted market research and asked ourselves,

"What were other companies doing with their design systems that we can learn from?"

We looked at Adobe Spectrum, Ant Design, Intuit Quickbooks, and Mailchimp design systems. We wanted to take the best practices from those great design systems and see how they organized and displayed their content.

3. Define

We created a checklist to define what we need based on our prior research and site audit.

4. Design

In Figma, we started creating a style guide and UI elements. To maximize workflow, we created a component and organized them based on our design system structure.

Foundation library on Figma

Component library on Figma

5. Plan and Implement

We made a weekly timeline based on what needed to be done and by who. This helps to keep stakeholders and everyone involved in the design system updated on progress, as well as facilitate resource allocation.

6. Document

Making the design system accessible is important so anyone can see and contribute. We hosted our design system on Frontify.com.

OUTPUT

Design System Thinking

The banana design system focuses on foundations and components, so as to allow more room for creativity in what designers do with the system, in marketing websites and products. Consistent patterns are of course important, but we kept them to a minimum and designed them to allow for flexibility.

Foundation 🌱

Logo

Versatility and alignment is our goal for this logo update. In addition, we changed the brand's color to be more yellowish as we wanted to show the brand's personality.

Colors

A new primary color palette has been created based on our new yellow color.

We created an extended color palette and checked the contrast ratio to make sure each color meets WCAG 2.1 guidelines.

Typography

The banana design system uses exclusively Inter, a simple and neat-looking font. It has a circular shape in several characters which gives us a friendly impression.

A module-type scale was carefully crafted to a ratio of 1.125 (major second)

Spacing & Responsiveness

Consistent spacing makes an interface clear and easy to scan. Banana has two spacing scales; one for general spacing within components and the other for layout spacing.

Design responsively is also essential. We created a set of standard breakpoints to maintain layout integrity across screen sizes.

Iconography

Banana mostly uses the Microsoft Fluent UI system icon. With a rounded corner and outline style, it gives a friendly and modern look to the interface.

Illustrations

Using 3D illustration, we create an exciting and playful look and feel for our brand.

Components 💠

Components refer to distinctive UI elements that are used over and over throughout a product—normally actionable, sometimes to convey meaning.

Below is an example from Banana Design System.

Patterns 🧩

Patterns refer to recurring or ever-present elements or practices throughout a product.

Below is an example from Banana Design System.

Putting it all together 🌈

Our internal tools are all data-heavy, and we have a marketplace that has a wide variety of items. Regarding our product being web-based, we knew that simplicity, readability, and load time are all paramount. That's why from early on we were striving for a clear and clean aesthetic.

Below is one of our products that has been using the design system.

TAKEAWAY

A design system is never done and these were just the very first baby steps. It’s already amazing to see the amount of impact it has across the whole team, ranging from the eagerness of engineers to create designs (who would otherwise be discouraged because they had to search for elements) up to the mentioned reduced decision fatigue.

OUTCOME

How do we measure its success? 🎯

Before we have a design system, we spent approximately 3 months (one quarter) building a web app using WordPress and without a framework. In some cases, we still rely a lot on third-party plugins which cost us more money. Hence, we defined the main goal of our design system and we came up with this one: