Introduction

One of the most significant initiatives at Popmenu has been the development of our design system. With high growth and rapid feature development, we're at a pinnacle where we need to create consistency across the projects that we work on.

Working with our design director and front-end engineer, we have begun to make sweeping changes so that design and development have parity in the components and conversations in feature development.

We've also been speaking more on consistency on a micro-level (i.e., making sure all the colors are the same) and on pattern experiences and how specific templates and patterns convey certain experiences and expectations.

An exercise in systems thinking

My role has been more focused on direct feature work, but I enjoy thinking about systems as a whole. How will one feature and its parts affect past, current, and future projects? A conversation as of recent has been the consolidation of how we use specific components and patterns. I decided to look at Lists to begin and explore what we currently have and how we can work towards consolidating that pattern.

Material Design

Our current design and development framework extends from Material Design. Because of that, I wanted to see how Material defined lists and broke the pattern down.

Material defines lists as:

Lists are a continuous group of text or images. They are composed of items containing primary and supplemental actions, which are represented by icons and text.

With this in mind, I began to explore the different areas in our application that use list-like components and/or could adopt a list pattern.

Anatomy of a List

A big help was reviewing how Material breaks down the anatomy of a list item. The most significant breakdown was how Material creates the distinction between their Content Types:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/90a821ac-66da-41d9-8b2a-6a69e718e614/Untitled.png

From Material Design Website: https://material.io/components/lists#anatomy

List items are comprised of three different content types:

  1. Supporting visuals
  2. Primary text
  3. Metadata