Expa
Design System
Building a design system for a global platform
AIESEC is a global organization that operates in 114 countries and territories, with more than 7000 partner organizations. Expa is AIESEC's online platform, where participants and companies/organizations are managed. However, the lack of a proper design system has resulted in a number of problems, including inconsistencies and longer development cycles.
The introduction of the Expa Design System (EDS) allowed us to accelerate and scale production, improve the quality of our work, and strengthen collaboration between designers and developers. This enabled us to maintain consistency, ship our products in a timely manner, and avoid getting bogged down in customizations that did not provide any additional value.
I was responsible for the design, documentation, and maintenance of the design system's component library, pattern library, and style guide from 2020 to 2021.
See full team at the end
Establishing purpose and principles
We had already established a basic style guide a few years ago, which was created by our lead, Arian. The development team had been using this guide as a reference, as well as utilizing open component libraries and customizing them to fit the Expa platform. However, we soon realized that this approach was not sustainable in the long term. To address this issue, we established a set of principles that we wanted our system to fulfill.
Tools over rules
Design system should be a toolbox, not an instruction manual. Support the team, don’t govern.
Cohesion, not consistency
When the system is intuitive, consistency becomes an automatic by-product of adoption.
Think inclusively
Accessibility should be an integrated part of design system development, not a box to check at the end.
Lead by example
Show, don’t tell. Explain the best practices with real examples, not instructions on how to create them.
Be selective
Keep only what’s necessary and perfect what remains. Every addition becomes a new pattern to follow.
Scalability
Building for flexibility, design tokens and new infrastructure that helps to iterate easily across different experiences.
After careful consideration, we decided to start from scratch and build a new component library and style guide that incorporated the best elements of the existing platform. We knew that this would be a challenging task, but we believed that it was necessary in order to build a more robust and scalable system.
One of the key challenges that we faced was balancing the need for flexibility and ease of use with the need to avoid introducing unnecessary complexity. We realized that it is easy to add new features and functionality to a system, but it can be much harder to remove them once they have become entrenched. Therefore, we made a conscious effort to keep things simple and avoid adding unnecessary features.
Nothing exists except atoms and empty space
Due to the constantly evolving nature of the platform, we decided to create a flexible architecture that could easily adapt to future changes. After conducting research and consulting with our developers, we implemented a modern version of the atomic design approach. This involves breaking down elements into their smallest, most basic form and building it up from there. Design tokens served as the foundation, which in turn were used to make components. These components later made up patterns and finally templates.
After careful consideration, we decided to keep all of our design components and style guide in Figma. Within Figma, we created a library file that served as the foundation of our design system. This library allowed us to define styles and components that could be shared across our team or organization and used in multiple designs.
For development, we used Storybook, which is an open-source frontend workshop that allows us to build UI components and pages in isolation. This approach allowed us to create a robust and scalable design system that could easily be maintained and updated over time.
An adaptive architecture
To begin building our design system, we focused on establishing the foundations of our visual language, which are the basic design tokens. These include colors, spacing, iconography, shadows, grids, borders, opacity and breakpoints.
Color
Color is an important element of our brand, as it helps to distinguish the brand and reinforce a consistent experience across products. We used color design tokens to manage our color palette and are categorized into four main groups: brand, semantic, text, and palette.
Aa
font-display-xlarge
font-family: 'Open Sans'
font-style: normal
font-weight: 600
font-size: 38px
line-height: 46px
Aa
font-display-large
Aa
font-display-medium
AA
font-suheading
Aa
font-body
Aa
font-display-large
Aa
font-display-large
Aa
font-caption
Typography
The typeface plays a crucial role in how our users perceive our brand and interact with our products. We chose Open Sans as our default typeface because of its clarity, legibility, and versatility.
Iconography
Icons helps to represent common actions and convey information to users in a clear and concise manner. We have designed our icons aiming to balance our human side with function.
One of the key advantages of implementing a centralized design system is that it makes it easier for teams to communicate and collaborate. This proved to be particularly valuable as our design system evolved, as it allowed us to make changes quickly and efficiently without disrupting the work of other teams. Additionally, by ensuring that all teams had access to the latest versions of our design elements, we were able to maintain consistency and ensure that changes made to our design foundations were reflected across our product design.
Crafting the building blocks
Once we had established the foundations of our design system, we began to create our design components. These components served as the building blocks for more complex patterns and templates.
To illustrate this process, let's take the example of a button. We began by designing a simple button compoenent, which included the basic visual elements such as the button's shape, size, and color.
Button
Buttons are an essential element of any user interface, as they allow users to trigger events and actions. In our design system, we have defined five different types of buttons.
Modal can include a description. Descriptions briefly communicate any additional information or context that a user needs to know in order to make one of the decisions offered by the buttons.
Cancel
Primary action
12
22
8
Dynamic
16
Add item
Button anatomy
The button label is always in sentence case. When there is no icon, the padding on both sides are the same.
Button types
We have defined two different sizes for buttons: large and compact. The different types of buttons are CTA, subtle, outline, ghost and destructive. Buttons can also have different states, which reflect their current status or behavior and they are default, hover, disabled, focused, and loading.
Similarly, we moved on to design and implement other components, such as text fields, switches, checkboxes, cards and many more. Like our buttons, these components were designed with different states and behaviors, and their usage was carefully documented. This allowed us to create a library of components that could be easily reused during the design process, and that were easy for developers to understand and implement.
Seeing the bigger picture
Following the atomic design model, we grouped the components to create more complex components. These reusable combinations of components were then used to create patterns that solved common user problems. Together with templates, these components and patterns were used to create the final page design. By utilizing this approach, we were able to create a consistent and user-friendly experience for our users.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import DropdownMenu, {
DropdownItemRadio,
DropdownItemRadioGroup,
} from '@expa-design-system/dropdown-menu';
const DropdownOpenExample = () => {
const [isOpen, setIsOpen] = useState(false);
return (
<DropdownMenu
isOpen={isOpen}
onOpenChange={(attrs: OnOpenChangeArgs) => {
setIsOpen(attrs.isOpen);
}}
trigger="Page actions"
>
<DropdownItemRadioGroup id="actions">
<DropdownItemRadio id="option1">Option 1DropdownItemRadio>
<DropdownItemRadio id="option2">OPtion 2DropdownItemRadio>
DropdownItemRadioGroup>
DropdownMenu>
);
};
The next step in the process was to hand over the design to the developers. Fortunately, the developers had been involved in the design phase from the beginning, which made the onboarding process smooth and seamless. Detailed documentation was a crucial part of the design process, which helped to eliminate any ambiguity and ensure that the developers had a clear understanding of what needed to be done.
To ensure that the development process was efficient and effective, the team developed and tested one component at a time using Storybook. We made regular updates based on the results of our testing, which helped to ensure that the final product met all of our requirements and exceeded our expectations.
Impact-driven approach
Developing a design system is a time-consuming and complex process, and it is important to measure its impact using meaningful metrics. After implementing our design system for 4 months, we were pleased to see that it had been successful, as evidenced by the positive results we were seeing.
98% component adoption
We estimated that more than 98% of the new designs are created using the EDS components.
2x design speed
Our designers were able two double their design output after the implementation of the design system.
46% faster development
Development time decreased drastically, thus we were rolling out new features into production faster than ever.
Consistency and efficiency
We were able to build efficiently and eliminate all inconsistencies in our new builds.
A great learning experience
I learned a lot of things while building this design system and the following are a few of them.
Design system is a journey
I initially thought that we could create a perfect and fully-fledged design system right out of the gate. However, through the process of building and implementing Expa Design System, I learned that it's important to view it as a living, evolving organism that will continue to adapt and grow as our product requirements change and expand. Instead of striving for perfection from the start, I now understand that it's better to focus on creating a solid foundation and continually improving and refining the design system over time.
Collaboration is key
As a design system designer, I have learned that it is crucial to engage in regular, open communication with everyone who will be using the design system. This means acting as a connecting point for the whole team, whether it is through meetings, online discussions, or concrete documentation. By fostering collaboration, we can surface and resolve any potential conflicts or challenges that may arise, leading to a stronger, more robust design system.
Learn more by teaching
I was responsible for introducing our designers and developers to the new design system we were implementing. Many of them were unfamiliar with both the design system and Figma, the tool we were using to manage it. To help them get up to speed, I held one-on-one sessions and created a comprehensive guide on how to use the component library.
I was fortunate to have the opportunity to work with an incredible team on this exciting project.
Arian Edward Project lead
Austine Joy Design
Manzur Khan, Vivek Srivastava, Michael Victor Development
Raghul Kuduva, Nikita Vergis, Soumya Nigam Design updates and maintenance