What This Project is About
Genie Design System was developed to address the inconsistencies and lack of cohesion in the Broadway.com website. This design system aims to establish a consistent and efficient design and development process for all future products and services. By implementing the Genie Design System, Broadway.com aims to enhance user experience, ensure inclusivity, and improve the credibility and loyalty of the brand.
My Team
Krystal Eborn
Lilian Yang
& Me
Tools
Figma
Zero height
Slack
Product Designer - Design Systems
MY ROLE
I contributed to the development of the design system in various ways. I audited the site for elements and inconsistencies, brainstormed and documented design principles, and defined spacing & grid and shadows guidelines. I also designed text inputs and lists as components and documented their guidelines on Zeroheight
Challenge
A little about Genie
The Genie Design System was created based off of a lack of a design system for the Broadway.com site. Some aspects of the site were inconsistent and needed a more simple way of bringing the site together in a cohesive manner.
Why do we need a design system?
Approach
To address the challenges faced, the Genie Design System was created with a focus on four primary design values and principles:
Values
1️⃣
Ensure diversity with inclusive design
2️⃣
Arouse curiosity with compelling experiences
3️⃣
Welcome everyone with a sense of connectivity
4️⃣
Build trust with excellent UX
Principals
Inclusive
Demonstrate respect for diversity by designing with accessibility standards and through a culture-friendly lens.
Compelling
Use stimulating language and interesting visuals to engage and motivate people.
Welcoming
Establish an inviting atmosphere by promoting a sense of community and togetherness in design, language, and media
Trustworthy
Ensure the content is factual and the sources used are trusted. Design with consistency and cohesiveness to deliver familiarity to people.
Accessibility
Atomic Design
The design system was created using the atomic design approach, which involves breaking down components into smaller, reusable building blocks.
Using the Atomic Design approach allowed us to create a consistent and scalable design system that can easily be updated and adapted to different contexts and needs.
Results
Foundation
Typography
It was critical for us to start having alignment within the team on the foundations of our system.
For typography, in our deconstruction, we identified many inconsistencies in size, weight, line height, and font style. We condensed the same style (Helvetica Neue) to be more consistent across the site.
Foundation
Color
Primary Color: We kept the same blue color currently used on broadway.com as our primary color. This maintains familiarity for users.
Color Scale: We introduced a color scale to provide flexibility for light and dark variations of the primary color. This allows us to create a visual hierarchy and add depth to the design.
Accessibility: We prioritized maximum accessibility when picking the colors for the design system. We followed WCAG 2.1 guidelines to ensure color combinations meet the max contrast requirements. This makes the design more inclusive for users with visual impairments or color blindness.
Foundation
Shadows
We use shadows to show depth, dimension and visual hierarchy. We use this on buttons, cards, and modals to create consistency and a visually appealing user interface.
Shadows are an important part of our design system and can be used to add depth, dimension and visual hierarchy to UI elements. Our shadow property includes color, blur, and offset.
Usage guidelines include using small, subtle shadows for buttons, larger shadows for cards, and shadows with larger offsets for modals.
Foundation
Grid & Spacing
We defined grids for four screen sizes, large desktop and medium, Ipad, and phone. And our spacing is based on multiples of 8
Atoms
Our system was built with the smallest component, which is what we call atoms. This includes icons, buttons, text inputs, tags, selectable and dropdown chips, accordions, navigation items, and individual list items.
As well as media components for photos, videos, and news. And most importantly, since we are designing for a broadway musical website, we have the Cards for Broadway shows. You might think these cards are more high-level than atoms, since they look like a combination of several different components. But, these components actually cannot be independent when not used exactly in this form.
Molecules
When these atoms are combined together, then they belong to Molecules. A molecule is a combination of 1 or 2 different atoms. And unlike atoms, they can still work by themselves even if one atom is removed,
Organism
In our system, an organism is a combination of more than 2 different atoms and molecules. If you break down this ‘Search-Musicals’ organism you can see that they are made of 5 different atoms: A logo, a text input, Dropdown Chips, and a button!
Templates & Pages
Then, when they are composed together to become a layout that provides the structure for displaying content, it is called a template. And then you combine these templates, it becomes A Page.
How is our system built?
Create variants: Variants are variations of the core components that have different styles or functionalities based on the context or user needs. For example, a button might have a disabled state or a hover state. By creating variants, you can add flexibility to your design system without sacrificing consistency
Define properties: Properties are the specific attributes of each component or variant. These attributes define how they look and behave, such as font size, color, padding, or margin. By defining properties, you can ensure that each component or variant has a consistent appearance and behavior.
Auto Layout: can be used in a design system to create flexible and responsive components. Designers can set constraints and rules for how the components should behave when the screen size changes, making it easier to design for different device types and screen sizes.
Using and maintaining the system
Genie Design system library is published through figma community!
Our guideline for using the system is online and published through zero heights, and it follows the same groupings as the Figma file for easy access and find-ability, we’re hoping the guidelines help with onboarding to understand the system better.
Who Can use it?
Designers
Can use our design system to create consistent, visually appealing designs that are optimized for all screen sizes. Be efficient and quickly create layouts and visual designs that are visually balanced and aesthetically pleasing.
Product Managers
Can use our design system to ensure that all design elements are consistent across all products and platforms. This can help to create a unified brand identity and improve the user experience.
Developers
Even though our design system does not include code, developers can still refer to it to understand the visual design and layout of the product. This can help them to create more efficient and effective code that aligns with the design system.
How to contribute?
Contributions to Genie Design System are welcomed! Whether for questions, concerns, or suggestions for improving Genie Design System!
