Introduction

One of the biggest initiatives at Popmenu has been the development of our design system. With high growth and rapid feature development, we're 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 that are had in feature development.

We've also been speaking more on consistency not only on a micro level (i.e. making sure all the colors are the the same) but also on pattern expereinces, and how certain 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 certain componets and patterns. I decided take a 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 had the potential to adopt a list pattern.

Anatomy of a List

One of the biggest helps was reviewing how Material breaks down the anatomy of a list item. The biggest breakdown was how Material creates 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