Design System at Fulldive

Many thanks to Anna Nguyen, who was instrumental to creating this design system.

Over the past year, Fulldive has been working on crafting a design system for our Android mobile app. As a small team working on a content aggregation app, we had a unique set of problems to tackle.

Advocating for a Design System

Before we could begin working on the design system, we needed to be clear on what goals we wanted it to solve. Some things we found a design system could help us accomplish:

  • Alignment — Designers are ultimately crafting one cohesive experience, so we should be sharing principles, patterns, and elements
  • Speed up development time — Reusable components also makes engineers’ lives easier. While we were using Material Design, there were areas unique to our app that we needed to account for.
  • Polished UI— Standard patterns polishes up the UI and helps users become familiar with the app faster

We were able to get buy-in from our co-founders and engineering team by being clear about the benefits of making a design system. Ultimately, investing time in a design system means investing in the future of our product as well.

Design Principles

A design system should not simply be a collection of user interface components along with some design theory.
 — Jeff Crossman, GE’s Predix Design System

We also saw building a design system as a chance to align the team on design principles. We were at the stage where we were no longer ideating in as free-form an environment and needed to be converging on our work.

In a brainstorming session, we discussed what we were and weren’t. Our principles needed to be specific and actionable. Here’s what we came up with:

  1. We give users control
    Users should be able to easily customize and edit what content they see on the app. We keep suggested content to a minimum and in specific, limited areas.
  2. We are dynamic and continuous 
    Design components should work in several different contexts and adapt to many different types of content. Given that we’re a content aggregator, our platform should accommodate for anything from a tweet to an Instagram post.
  3. We prioritize entertainment over enterprise 
    Our app should feel light-hearted and playful rather than something used for work.
  4. We are content first
    Our UI should take a backseat to the content. Designs should be clean and not spammy.

In Practice

Our design principles helped guide us in crafting each aspect of our design system. Below are some examples that particularly embodied our principles.

Content Cards

While making components for our content cards, flexibility was top priority. We leveraged Sketch’s symbol overrides to minimize the number of individual elements we needed to make.

How our elements build up into a grid for posting.

We also needed to make sure to account for many different cases.

Cards for different types of content and contexts.

Bottom Sheets

A key challenge we faced was how to display social interactions (upvote/downvote, comments, saving, sharing) for a piece of content. People needed to be able to interact with content in both the list feed and once they’ve clicked in. Our solution was a standardized social bar that opens bottom sheets. This modular solution easily integrates into the many different contexts where we needed to show comments.

The bottom sheet is a modular solution, allowing people to access comments and saving whether within content or from a list card.

Color Palette

We also worked on making sure we were using color judiciously on the platform. Previously, we would default to our brand orange whenever we needed something to be highlighted. This actually worked against us because there would be no clear visual hierarchy on a page. When everything’s highlighted, nothing’s highlighted.

When revisiting our color palette, we carefully defined when colors should be used. By being more intentional with color, we were also able to let content take center stage on the platform.

Auditing our colors helped us prioritize actions on our page and let our UI breathe.

We also broadened our secondary color palette and defined colors for different states. For all our color choices, we made sure they were accessible by testing them on Accessible Colors.

A Living Document

Unfortunately, we don’t have a dedicated team to continuously update, evolve, and test the design system. To account for this, we set up a regular time for everyone to come together and evaluate. By checking up on the system regularly, team members can ensure any issues run into while designing day to day will be addressed.

Our design system is still in its beginning phases, but we’re excited to continue improving on it!