#Design_System #Responsive_Design #Atomic_Design #Figma_Components

Design system: Media Object & Use Case

National Democratic Training Committee

#Design_System #Responsive_Design #Atomic_Design #Figma_Components

Design system: Media Object & Use Case

National Democratic Training Committee

Project Overview
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.
Background
NDTC (National Democratic Training Committee) is the largest Democratic campaign training organization in the nation. NTDC offers many resources including online courses.
Product and Technology team is the magic behind NDTC. We value responsiveness, inclusiveness, and accessibility in our design. We’re always seeking the best UX practice.
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.
Challenge & Solution
• Missing documentation and outdated responsiveness standards:
I audited and categorized all Media Objects in our product. Synthesized hundreds of screenshots and analyzed them into five media categories.To improve responsiveness, I design 5 breakpoints instead 3 to meet our new standard.
• Opportunities to improve the component’s accessibility:
I created different states of interactive elements with a distinct visual references. I defined the paragraph width to control character count, which increased readability.
• Explored common grounds between design and engineering:
I scheduled several meetings with developers to ensure alignment. I tailored the annotation to meet their needs. This process also taught me more about development. hey motivated me to sharpen front-end knowledge.
Project Plan
Timeline
Discover & Synthesis
• Audition: Collect documentation of all media components in the product
• Categorization: Group the findings based on the use case and properties
Ideation & Iteration
• New Media Object system: Main components, variant sets, annotation
• Wireframe: People List page & Biography page, annotation
• UI prototyping: Animate & annotate interaction
• Design reviews & dev alignments: Iteration wireframe, prototype, & annotation
Execution
• Finalize annotation
• Project Hand-off meeting
Project Scope
• My Role: Project owner & contributor
• Deliverables: 10 components plus their variants, 2 web-pages with 5 breakpoints (total 10 wireframes), and 1 interactive prototype
• Department: Product & Tech
• Team: Solo ownership. Reported to Manager/Sr. Product Designer
• Collaboration: Team’s feedback, designers’ component documentation, and developers’ review
• Tools: Figma, Browser Inspect tool (CSS & HTML), Abstract, Monday
Atomic Design
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".
Fig 1. A brief visual representation of Atomic Design method
Explore & Synthesis
Defined Media Object
Audition
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.
Categorization
I analyzed hundreds of screenshots and grouped them based on the use case and properties.
Fig 2. Process of sorting out collected screenshots into different categories.
Ideation & Iteration
Component Library
Our Design System was a single file. Each component took up a page within the file.
Fundamental Component
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.
Fig 3. Variant sets of image and video. Properties panel reflected the variant’s values.
Paired Component
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.
Fig 4. Media, Button, and Typography components could be swapped in the properties panel.
Use Case
I had an opportunity to design a people list page and a biography page using the new Headshot component I designed.
Headshot Component
I defined the Headshot component as a paired media component containing a headshot photo, name, and linking property.
Fig 5. Headshot component use case. The components contained a Media and Typography component.
People List page
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.
Fig 6. Anatomy of Our Team page.
View Full Wireframes >
Biography Page
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.
Fig 7. Anatomy of Staff Biography page.
View Full Wireframes >
Wireframe Iterations
Weekly design reviews gave different perspectives on my work. There were some key edits reflecting the design feedback.
Layout & Component Sizing
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.
Fig 8. Before and after editing the component size.
Readable Text Width
I adjusted the width of the text copy to complement <80 character counts in all breakpoints, which was more accessible according to A11Y guidelines.
Component Placement
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.
Fig 8. Before and after re-placing the social links component.
Interaction States
Focus State
I had to add more padding inside the Headshot component to increase spacing and avoid CSS complications with the border box.
Hover State
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!
Disabled 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.
Fig 9. Interaction states of the Headshot component.
Execution
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.
Annotation
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.
Fig 10. Demonstrated the level of annotation from the highest to lowest.
Annotation Content
Title - Name of the object. Description-What is this object? Details - Properties of the object.
Fig 11. Example of annotation content for the Headshot component.
Tailored Annotation
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.
Fig 12. The width of 6/12 columns and 50% shared the same value. But different terminology.
Final Deliverables
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.
Live Production
Video 1. Record of final product in production.
Future Opportunities
Figma File Restructure
Re-constructing the design system in Figma to avoid overwhelming info specially for the non-designers. Adding pages based on the use to gain more clarity and organization. The team will only see the thing they need to see.
Fig 13. The current file structure is on the left, and the restructured one is on the right.
Headless Design System & Design Tokens
Using design tokens could keep the design consistent and simplify the development process. Design token is similar to the class concept in CSS. Figma Token plugin even has an auto annotation feature. This is an exciting step to close the gap between design and engineering.
Fig 13. The current file structure is on the left, and the restructured one is on the right.
Back to Top ^