2024
Creating a Design System for an info database website: IMDb
This project focuses on systems thinking. The result is a full design system which contains- brand and content guidelines, design principles, UI components, accessibility rules, governance information and system management.
Design System
Systems Thinking
Kernel Design System
The design system created for the IMDb website ecosystem.
Designing a Design System
A linear-ish process
Project timeline and scope
First, what is a design system? A style guide on Figma right? Well, not really.
Through study materials and instruction of our professor,
I learned that:
a design system is all encompassing
What do I mean by that? Here’s a better definition:
“ A design system is a collection of documented elements that embody the design principles and rules of an organization.” (Vesselov & Davis, 2019)
Another definition we followed throughout:
“ Design systems are a culture change designed as a UI kit” Lauren LoPrete
Deconstruct
Looking it at as a designer-
What are the building blocks of a website?
Variety of buttons on the IMDb website
What else?
A range of different elements
Navigation: Menus, breadcrumbs, and other navigation aids
Text: Different fonts, sizes, and weights used for headers, body text, and captions
Media: Types (images, videos) and sizes used across the website
Icons: Distinct icons
Buttons: Styles and colors
Links: Text links and their respective destinations
Filters: Different filtering options available to refine content
Components: Reusable elements such as carousels
Supplementary Information: Additional content, such as disclaimers, footers, and copyright information
To understand these, I conducted a UI audit of the IMDb website and created a comprehensive UI inventory.
Step 1:
Elements 101 - the UI inventory
To gain a better understanding of both the current visual elements of the website and also the information presented, I created a full inventory of the UI. The inventory highlighted the problems that I wanted to address on the new Design system.
A portion of the full inventory
What stood out:
1. An abundance of buttons
2. An abundance of text styles making it difficult to understand the hierarchy of information
3. Many variations of carousels with diverse designs
1. How many buttons/ actions/ links etc. are too many?
Variety of buttons on the IMDb website
In the inventory, there were over 15 different button styles with many performing similar functions. Often, clicking on these buttons will lead to different results. So, a user never knows when a new page will pop up, or whether they are interacting with the listing or if they are filling a form and so on.
2. What’s the most important heading to look at? “The Perfect (Couple)” or “Featured today”?
Variety of typographic styles on the IMDb website
We found that there wasn't always a set size hierarchy to the information presented which can lead to the website feeling less intuitive. Too many text styles added to this problem. For example: The titles of movies/tv shows were often larger than the main navigation titles.
3. Do we really need that many different carousels?
Variety of carousels on the IMDb website
At the end of the day, IMDb is a database. It contains multitudes of information that is segmented and categorized in many different ways - a great thing for user experience. However, the organization of these categories is visually irregular; i.e. there are not only many different styles but some styles are used often, again making it visually hard to distinguish and less intuitive.
At this stage, we have an inventory, and three issues we want to address (buttons, typographic styles and carousels) with a new design system.
USE
Understanding a design system as a user, first.
Step 2:
Using a design system
- detach component
To further understand how design systems work, I attempted to redesign the IMDb interface using a different design system - Paste, by Twilio. This gave me a nuanced understanding of the user - i.e. who will be using this design system. It also introduced well sorted and usable components as an essential part of using a design system. While this process was harder at first, it became much clearer later on in the process.
Why Twilio? I was looking for:
The components I needed for the IMDb website including navigation menus, buttons, typography and visuals/image boxes.
Flexibility for ease of grouping components together.
A comprehensive design system that encompasses all aspects of a website’s UI.
Explanations, reasonings and examples of components.
Redesigned IMDb page using Paste
What did I learn?
1. Using Paste, most of the content on the IMDb interface became more digestible.
2. A consistent layout helps users understand content better.
3. It was difficult to compress all the buttons on the IMDb webpage into the new design system. However, the result highlighted a hierarchy of information.
Since there is an abundance of information on IMDb's website, I paid extra attention to placing information in the correct order - thereby improving the overall information architecture. This was most visibly reflected in the navigation, headers and the cast and crew sections.
1. Removed IMDbPro button
Two logos can make the experience confusing for users.
2. Removed the filter for search
The design system accounts for universal search (Twilio website)
3. Moved Watchlist to the left side
“Account-specific controls should be aligned to the left.”
There is no existing in-page navigation on the IMDb website which makes the information look scattered
Added breadcrumbs and moved the buttons on the right to the in-page navigation for maintaining hierarchy.
The design system uses “Avatars” in a grouped format with a “+x” value to signify more items if a user needs to view them.
2. Keeping the layout consistent
Cards live inside carousels. 1. Images are always left aligned with text on the right side
Since the distinct carousels and their cards appear in abundance, the new design system helped standardize the visuals, adding to the overall consistency of the design.
3. Maintaining hierarchy of information
Information hierarchy on a TV show page
While IMDb allows users to find information in many ways, it can often be overwhelming to distinguish the most frequently used or important actions. Through the new design system, I was gave a sense of hierarchy to the information.
- hey this makes a lot of sense
Using a new design system was not an easy task to take on, it was confusing what component to use where - especially all the buttons, badges, labels and icons. However, the documentation proved to be an important resource that helped guide me through the process. The dos and don'ts as well as the purpose of each component made it much easier to place each component. It instilled in me why documentation is an integral part of any design system.
Phew okay so I have an inventory, i have redesigned webpages and I understand how to design for users. Let's create our own design system.
CREATE
Step 3:
Creating a new design system through a bottom up approach
In order to create a design system, we followed the atoms to organisms approach made popular by Jack Frost. We started with our building blocks - design tokens-atoms such as typography, colors, spacing, margins, padding. Then, we used these tokens to build our molecules such as buttons, basic typography, avatars and badges.
Next, we added our organisms such as in-page navigation, cards, modals, tooltips and so on. Finally, we added some templates such as topbar navigation, footer and carousels.
Part 1: The design
Building from the atoms, making decisions - what do we need?
Brainstorming and making decisions for a basic style guide.
Design tokens for spacing
Design tokens for component colors
Text styles
Molecules - Designing comprehensive components
Button components for all types of buttons. (primary, secondary, tertiary)
Component instances and customizability
Buttons are of three types with specified usage guidelines which maintain consistency and their components are highly customizable for easier use throughout the interface.
The components include properties that make them easy to use and edit according to their intended usage. They also contain all the states they would exist in such as default, hover, pressed and inactive. We took great care of designing components that allow our users to be as flexible as they can while using them.
Components =
Figma proficiency + Systems Design
I firmly believe that the best way to understand components on Figma is through designing for a design system. It was at this stage that I fully comprehended components. I wish it was this clear at the stage of using of a design system, which would have taken considerably less time to use!
Organisms - Designing patterns for groups of components
Top navigation/ topbar
Menu
Footer
Part 2:
Putting the Design System together:
Socialization support
Brand & Content Guidelines
Design Principles
Accessibility Rules
Governance Information
UI Components - structure, documentation and design assets
Design Principles
Clear & Intuitive -
The design system prioritizes an easy-to-navigate structure that promotes learning and exploration, reduces cognitive overload, and ensures a natural and intuitive hierarchy for enhanced clarity and usability.
Immersive -
The design system consistently delivers an engaging and personalized interaction, ensuring that exploring its various components remains an enjoyable and captivating journey for designers.
Accessible -
Prioritize inclusive design practices to create interfaces that are usable and accessible to users with diverse abilities and preferences.
Creative -
The design system is engineered to spark curiosity and promote engagement by offering a range of components and tools that not only encourage but also facilitate experimentation and imaginative design solutions.
Informative -
The design system is built on the principle of providing users with all the necessary information and resources needed to empower them in creating their own unique designs, fostering a seamless and guided design process.
Focusing on Accessibility
To ensure an optimal user experience and accessibility on IMDb, the following five guidelines are fundamental. These principles are key to enhancing navigation, usability, and inclusivity across the site, ensuring that all users, regardless of their abilities, can fully access and engage with IMDb's content.
1. Consistent Background Colors for Similar Sections or Page Hierarchies.
2. Descriptive Alt Text for Images
3. Sufficient Color Contrast throughout the website
4. Responsive Design for Device Independence
Following these tailored guidelines, the Kernel Design System adheres to the broader principles of WCAG 2.0, known as POUR:
Perceivable: Ensuring all users can perceive information, including those relying on assistive technologies.
Operable: Supporting navigation and interaction through various input methods.
Understandable: Making content and functionality intuitive and user-friendly.
Robust: Ensuring compatibility with diverse technologies and tools.
Example of guidelines for adhering to accessibility principles taken from the Kernel Design System
Now that we're all done.
Introducing..
The
Kernel
Design System
View
A demo of the design system and how to peruse it
Key features:
Typographic System
Clear Hierarchy: Noted in the audit and subsequent inventory of the design system, our key focus was on hierarchy of information. Established clear distinctions between headings, subheadings, and body text with a consistent use of font sizes, weights, and line heights.
Scalable Typography: Implemented a more flexible and responsive typography system that adapts seamlessly across different screen sizes and devices.
Spacing guidelines: to provide additional assistance in using typography.
Standardized Text for Buttons: Established uniform button text styles and sizes to ensure clarity and consistency in call-to-action elements.
Typography styles
Button, anchor and avatar sorting
Consistent button design: Icon + button set as the standard, removing confusing iterations of different buttons.
Making the information concise using avatars: Sections such as cast that contain images of people can be incredibly long on IMDb. We sought to make these concise, making the pages more navigable overall.
Before: IMDb current cast lists
After: Avatars in the new design system
Anchors for information that opens in a new window: IMDb's variety of buttons don't make it entirely easy for users to get familiar with them. We sough to use Anchors to specify links that open in new tabs. This ensures consistency and familiarity that allows users to intuitively navigate the website. These can also be used within button styles.
Before: IMDb variety of buttons
After: single new-tab link style
Simplifying card components
With over 10 types of different card types, we standardized cards: These cards can account for all the information that is present in the current different card types, while remaining visually similar to provide more continuity to the website.
Before: IMDb current card types
After: Standardized card styles
Adding consistent menus across the website: With multiple drop down menus, IMDb has a new style attached to each menu, leading to inconsistent visual design.
Re-arranging key information into in-page navigation: As an information database website, IMDb holds a lot of information and comes across as overwhelming. It can be difficult to find the relevant information because of a. the sheer length of pages which leads to scrolling fatigue b. inconsistent hierarchy of information which leads to a higher number of users dropping off.
This is why the in-page navigation is essential. Leading users to know from the get-go:
what information is available to them
how to access that information
Before: Unclear page menus and organization
After: Clear information hierarchy and navigation
Would we do anything differently if we had more time?
In short, yes.
1. Most importantly, we would like to collaborate with developers to make sure the design system caters to both developers as well as designers.
2. Create additional components - especially for media and advertisements, which occupy considerable space.
3. Research and test the existing Information Architecture to ensure better documentation of the components and further define the hierarchy of information on the interface.
In conclusion
The design system project provided an invaluable experience, emphasizing the importance of systems thinking in both team collaboration and creating solutions for diverse user groups, namely designers and developers. Throughout the project, several key learnings emerged that contributed to the overall success and effectiveness of the design system.
Firstly, conducting the UI inventory revealed the significance of consistency in design. Ensuring uniformity across various components and patterns significantly improves user experience and enhances brand recognition. This process highlighted the necessity of adhering to a cohesive visual language throughout the design system.
Secondly, as the project progressed to creating a system, the importance of clear and concise documentation became evident. Proper documentation not only facilitates the adoption and implementation of the design system but also serves as a valuable resource for stakeholders, enabling them to understand the design principles, components, and best practices effectively.
In addition to these key learnings, the project led to a notable outcome - achieving proficiency in Figma, a leading interface design tool. This newfound expertise proved essential in designing and managing the design system components, streamlining the workflow, and collaborating effectively with the team.
Reflecting on the project, it is clear that the experience has significantly contributed to personal growth as a designer and cultivated a keen interest in design systems. This understanding of the holistic approach to design will continue to shape future projects and foster a more user-centric and collaborative mindset in the design process.