top of page
Design System Cover.png

Design System

Scoop Technologies, Inc.

My project role:

Product Design Intern

Duration:

6 months

Documenting the company's first design system.

Platform:

Frontify, Sketch

1. The challenge

When I first joined Scoop as a Product Design Intern, Scoop had a pretty solid foundation for a design system. However, there was no written documentation of the design system to consolidate information, create a source-of-truth, and allow for knowledge sharing across the company.

2. Asking the experts

I started by reaching out to other Product Designers with design system experience via LinkedIn, and was able to connect with a past Design Lead for IBM's Carbon design system and the Design Lead on Capital One's design system.

​

I created an interview guide and over our video calls together, asked questions like:

​

  • How do design and engineering teams at your company collaborate on the design system?

  • After establishing a design system, how do you continue to maintain it?

  • How are your teams incorporating accessibility into your design system?

3. More Googling

In addition to chatting with other designers, I also did extensive internet research.

​

  • I explored various companies' design systems, such as Shopify's Polaris, IBM's Carbon, and of course Google's Material Design.

​

  • I read articles and blog posts, such as one from UX Collective on Medium about the challenges and benefits of design systems.

​

  • I studied Brad Frost's blog posts on atomic design principles to see how Scoop could apply that framework in organizing our design system.

4. Organizing the Sketch Libraries

As mentioned earlier, Scoop already had a good design system foundation to work off of. We had individual Sketch files for typography, icons, colors, iOS-specific, Android-specific, and universal platform components.

​

I helped organize the files and convert them into Sketch Libraries so that the Product Design team could use them to work more efficiently and ensure consistency across designs.

A screenshot of a Sketch Library page, showcasing a button component and its many states and colors.
A screenshot of a Sketch Library page, showcasing different sizes and colors of typography.

Screenshots of our Universal and Type Sketch Libraries.

5. Writing the "dictionary entries"

The bulk of my project work was writing and organizing documentation for our mobile component library, which I did using the Frontify platform.

​

Based off of my research and for Scoop's needs, the 3 high level sections were:

​

  1. UX Manifesto - Highlighting Scoop's general UX thinking and principles

  2. Brand Style Guide - Specific to Marketing

  3. Mobile Component Library - A glossary of all the components in our mobile product

​

I specifically worked on the Mobile Component Library section, which had sub-sections:

​

  • Background information

  • Tools information

  • UX style guide

  • Components

  • Combined components

  • Navigation components

  • States

  • Naming conventions

​

I wrote the content for each page, formatted with:

​

  • Definition

  • Types

  • Styles

  • Do's and don'ts

  • Screenshot examples from our mobile app

A screenshot of the Frontify page on the button component.

6. Asking for feedback

Throughout my content writing, I received guidance and feedback from my manager, the Head of UX, at weekly check-ins. I opened up the first round of feedback to the other 2 Product Designers at Scoop, and then got a second round of feedback from our iOS and Android Engineers.

A screenshot of a Google Doc that shows text about the background of the project and what kind of feedback I was looking for.

A screenshot of the Google Doc I used to inform and collect feedback from our mobile engineering team.

7. Final thoughts

While the documentation of Scoop's design system is on pause until the company finds resources to build an internal Wiki, the Product Design team has been using the Sketch Libraries in all of our design work, and we have been able to direct folks and refer to Frontify ourselves when we need clarification on components and use cases.

​

Future plans for the Scoop design system include:

​

  • Finding a more accessible platform to host our documentation

  • Adding code into documentation

  • More collaboration between the Product Design and Engineering teams

  • Adding documentation for a Web Component Library

  • Ensuring our components pass digital accessibility standards

bottom of page