NDTC needs an updated design system to keep the components consistent and make the hand-off process more agile. I was in charge of creating Media Object system. Then I came across the opportunity to implement the new components in a web-application project.

NDTC (National Democratic Training Committee) provides online resources and courses to the political community. We value responsive, inclusive, and accessible design. We thrive on exploring the best UX practice.

I applied Atomic Design method in this case. Began with the lowest hierarchy component, the basic building block called "atom". Then move towards the higher hierarchy components, such as "molecule" and "organism".

I collected screenshots for our current pages and the component lived within. We had default state, hover state, and focus state for these clickable headshot components.

I analyzed hundreds of screenshots and grouped them based on the use case and properties.

Our Design System was a single file. Each component took up a page within the file.

Image and video were singular Media components. Image and video are different types of media due to functionality. The aspect ratios and shapes here were the ones NDTC used.

Designers could replace the placeholder image as needed. Figma allows uploading images on the component level.

When an image or video pairs with other components, it becomes a paired component.

I wanted the component to be flexible but properly restrained when designing. I allowed designers to swap components if needed in the property panel. The hidden frames will restrict designers once it reaches the limits (Figma Component allows hiding but not adding frames).

Media Content was an example of a paired component.

I had an opportunity to design a people list page and a biography page using the new Headshot component I designed.

I defined the Headshot component as a paired media component containing a headshot photo, name, and linking property.

Displayed with a grid of headshot components. When clicking on the headshot, it will link to the Biography page.

The purpose of choosing a grid design was to utilize space for a list of individuals.

Displayed with a written profile of the people. Social media links were optional. The headshot component it’s a sticky to complement the lengthy text copy.

Weekly design reviews gave different perspectives on my work. There were some key edits reflecting the design feedback.

I used the single-column design at 568px mobile breakpoint. Some suggested adding another column since each component took up too much space.

I decreased the image size. And I kept the single-column design. Since it’s a common pattern in mobile design. The screen will fit more content while not overcrowding the screen. We have a good amount of profiles. So we should minimize the scroll.

I adjusted the width of the text copy to complement <80 character counts in all breakpoints, which was more accessible according to A11Y guidelines.

Social Media Links were placed underneath the headshot because it was a common pattern. My team pointed out that from a UX perspective, the social links were the least prioritized components (org value). So they’re moved to the end of the biography copy. They should serve as the “click here if you want to know more” purpose.

I had to add more padding inside the Headshot component to increase spacing and avoid CSS complications with the border box.

The world of animation always amazed me. Finally settled down on the image zoom-in effect after a brainstorming session with the UX team. Compared to the older hover effect, the image scale change is more effective and fun than the new hover state!

We didn’t need a disabled state in this project. But it was good to have it in the component library for future reference. We wanted to document this in the design system.

I checked in my progress weekly with the developers. Our goal was to to find out if there was any red flag and obstacle in the design.

Having multiple levels of annotation will avoid duplicated annotation and add clarification to developers. The amount of annotation levels depended on the complexity of the project.

Title - Name of the object. Description-What is this object? Details - Properties of the object.

There was some misalignment with the use of langue in design and development. I tailored the annotation to meet the developer’s needs. For example, we designed our grids system, which did not translate well in development.

I walked the developers through the design of Media components and the new wireframes in Figma. That included 2 Headshot components with annotation and high fidelity wireframes across 5 breakpoints with annotation.

Staying responsive to any question they had during the development resulted in efficient communication.