Kernel Design System
UI Design Inventory | UI Token and Component building
My Role
Developed Design Plan, Set up tokens, designed HiFi elements and components, Conducted Usability Tests, Structured UI Design Kit Inventory
Team
Radhika Phansalkar
Smridhi Gupta
Serena Wenjia Liu​
Project Duration
October 2024 - December 2024
7 weeks
Skills
UI Component Building​​​
Tools
Figma
Google suite for project management
IMDb (Internet Movie Database) is an online database of information related to films, television series, podcasts, home videos, video games, and streaming content online and ratings, and fan and critical reviews, etc.
The Challenge
As IMDb continues to grow as a global leader in movie and TV information, maintaining consistency, scalability, and backend infrastructure has become increasingly challenging. ​
The Issues
1
Non standard components
Inconsistent UI
2
Irregular themes
Inefficient maintenance
3
Lack of patterns
Scalability challenges
The Solution
A robust Design System - Kernel Design System, to unify the IMDb interface, improve collaboration between teams, and most importantly ease the strain on IMDb's backend systems.
UI Inventory in Figma, packaged with tokens and elements!
Elaborate documentation on Zero Height for UI implementation!
The Total Package!
​Building UI kit on Figma community
​
We first built a Figma UI Kit for the Kernel Design System, creating an extensive library of reusable elements, components, and design patterns tailored for IMDb’s ecosystem.
Comprehensive Design Documentation on ZeroHeight
​
To maintain usability and alignment, we meticulously documented the usage of each asset, element, component, and pattern in ZeroHeight, facilitating cross-functional collaboration.
Click to view!
Pitch and validating with Industry Standards
​
We presented our project to the Design Systems team at Pratt, demonstrating how our approach with best practices in design systems, usability principles, and component-driven development.
Defining the impact and setting objectives
Increased Development Efficiency
Focus on functionality rather than design with the library of reusabale UI components.
Faster Iterations
Integrate rapid adaptation without compromising on consistency or performance.
Improved Cross Functional Collaboration
Better collaboration between the design, front-end, and back-end teams, as everyone will be working from the same set of guidelines.
How?
1. Deconstruct and Analyze the current design system
The team used Brad Frost's Atomic Design System to deconstruct the and analyze the current UI system. A thorough break down was initiated by identification of pages and them components and elements embedded within them.​​​
Conducting a thorough audit of the existing system
The team conducted an audit of the existing UI system. This exercise gave the team three different perspectives and a more in-depth break down of the inventory.
​
For the next step the team assessed each inventory, made critical notes of overlaps and mislaps and finally developed a consolidated the three systems into one holistic inventory.​ Next, the team critically identified how the elements and components affect the user experince and assessed the areas of improvement.
Existing system
2. Establishing Brand Identity and UI components
Setting up Tokens
Design tokens are the foundational building blocks of any design system. They are small, reusable units of design decisions that translate to variables in code, enabling a consistent design language across a product.
​
We started by identifying the core design elements, such as colors, typography, spacing, and border radius. These are the atomic units that can be reused throughout the design.
Building a Typographic System
Typography is a critical part of any design system as it impacts readability, hierarchy, and overall aesthetic.
A typographic scale defines how font sizes are used in varied instances but yet in a harmonious way. This was established by creating different styles for headings, subheadings, body text, captions and links - very specific for the IMDb context.
Sorting Buttons, Anchors and Avatars
Buttons and links are core interactive elements in any UI. These components are designed with accessibility, usability, and consistency in mind.
-
Button Variants: Creating different button types, such as primary, secondary and tertiary. Each variant has its own design properties.
-
States: Each type has different states for buttons, such as default, hover, active, and inactive, to ensure they are interactive and accessible.
Simplifying Card components
Cards are containers that house content and can be used in a variety of contexts, such as trailers, media and content previews.
Card Layouts: Creating consistent structures for cards, including components like images, text, buttons, and icons. These cards are later implemented in patterns like carousels.
Streamline Navigation components
Navigation components ensure a consistent and efficient way to move users from one part of the application to another, creating a streamlined and easy experience.
This meant creating consistent dropdown menus, in-page navigation, clarity in depiction of page-links and weblink, clarity in functions and appearance of buttons, arrows styles, etc.
3. Assembling and designing
Kernel Design System - The Kit
Here's a sneak peak of the Figma UI Kit. The Figma UI Kit is a holistic set of design principles, defined tokens, styles, components and patterns required to build the IMDb website.
4. User Testing
"Woah! I built this page in 13 minutes!"
After assembling the Figma UI Kit, we uploaded the Kernel Kit on Figma Community. We then asked users to build any desired IMDb page using the Kernel Design System. We ran an observational study of how designers navigated and used the design kit to build the designs, noted the "Wow" and the "Oh No" moments.
Kernel UI Kit on Figma Community
User Testing, Pratt Institute | Nov 2024
5. Refining and Applying
After an intense session of user testing, we reanalyzed the UI kit and made further iterations to best fit the collaborators' needs, abiding by their mental models with an aim to ease the use of the kit.
IMDb Homepage
The IMDb homepage serves as the primary entry point and navigation hub, guiding users seamlessly through the platform. As the first touchpoint, it plays a crucial role in user decision-making by providing intuitive pathways, relevant content discovery, and a structured information hierarchy that enhances engagement and usability.
Before
After
IMDb Movie Detail Page
Movie detail pages (content detail pages) require consistency in themes, content presentation, and layout to ensure a cohesive user experience. Maintaining visual balance is crucial, allowing the content to take center stage while ensuring usability, readability, and seamless navigation across the platform.
Before
After
Reflections
Design systems are the strongest suite of an organization to build and progress the work. "Design systems are a culture shift disguised as a UI kit." - Lauren LoPrete
Atoms, to molecules, to components, all systems can be streamlined to best fit the product and company values. What matters most is to bring together the collaboration and goals of the team.
Design systems are a strategic intervention that bring together the disciplines of design, front-end, backend and advance the work processes.
Final Presentation, Pratt Institute | Dec 2024
A sneak peak into our Archives!
