Onboarding and
Collaboration
Challenges
Role
UX Desginer, UI Designer
Developed in December/2022.
Reworked in July/2024.
Project Evolution
Note: This case study was built based on the GoFundMe design as it existed during the 2022 version of the platform.
problem
A lack of documentation means that the learning curve for new hires will be even steeper.
New designers and developers struggle to understand and adapt to the existing design and development process, facing a steep learning curve.
When I started working with another designer’s file earlier this year, I feared inconsistencies in UI across pages and components due to different design times and designers.
This lack of documentation and consistency delayed production, as I spent excessive time familiarizing myself with scattered guidelines and components.
why this product?
GoFundMe’s interface is simple but perfect enough to demonstrate design system principles.
GoFundMe is a popular platform with millions of users worldwide. The interface is simple but perfect enough to demonstrate design system principles. I developed a design system for such a diverse user base, allowing for in-depth exploration of component standardization, consistency, and scalability.
goal
Creating a user-friendly design system optimizes the onboarding experience and ensures efficient design to dev handover.
The goal here is simple: we want to make sure that new hires quickly understand the design system and start contributing effectively while improving communication between designers and developers within the company.
Implementing standardized documentation, centralizing design assets and guidelines will ensure that all teams have a common understanding of the project goals. Additionally, this library will avoid variations of UI components leading to inconsistency in all of the products.
process
Interfaces are made up of atoms.
While studying the best way to start a design system, I came across Brad Frost’s methodology comparing interfaces to chemistry. In this case study, I built the design system using atomic design methodology, breaking down the elements in five distinct levels:
Atomic design is atoms, molecules, organisms, templates, and pages concurrently working together to create effective interface design systems.
Frost, Brad. Atomic Design. CreateSpace Independent Publishing Platform, 2016.
After studying the screens and considering the hierarchy of the interface design systems, I started defining the basic atoms. I began my approach sorting out the foundational elements of the library.
Once the elements were set, I then used Figma Tokens to store the information and make it easier to manage the design system for anyone using it.
I started defining the basic atoms of the design system.
Molecules are atoms combined into groups, becoming simple UI components.
I aimed to help new hires quickly understand the design system and start contributing effectively. The molecules are simply atoms combined and can be easily dropped anywhere their functionality is needed, providing faster page creation. This approach encourages reusability and consistency throughout the interface.
Groups of molecules and/or atoms form distinct sections of an interface.
When grouping the molecules and/or atoms according to their unique properties and functionality, we could finally see the interface taking shape. Organisms are a standalone section of an interface with an important sense of context. They are ready-to-go components in action to resemble a page.
Organisms
It is time to place the components into a layout and build the pages
With the organisms ready, it is time to work on the templates and craft what the pages will look like. Once established, we can place real representative content and design the page. This is the most concrete stage of the design and it is where we can look at how all those patterns are working when we pour real representative content into the design system.
achieving the vision
This is a design system that optimizes the onboarding experience and ensures efficient design to dev handover.
I learned the foundations during Memorisely’s Bootcamp and applied new skills through independent research and gathering inspiration. Building this design system took considerable time and involved extensive back-and-forth.
Defining my goal was crucial, as it helped me make design decisions and direct my efforts.
Changes and refinements are inevitable, so being open to iteration can lead to better outcomes. I also discovered that well-documented guidelines and components make it easier for new team members to get up to speed and maintain consistency.
lessons learned from building and reworking the design system
Defining my goal was crucial, as it helped me make design decisions and direct my efforts.
If GoFundMe didn’t have a design system, this library would have achieved the initial goal: helping new hires quickly understand the design process and start contributing effectively, while also improving communication between designers and developers within the company. This would increase the quality of the shipped product while drastically reducing the time taken to ship.
This design system has simplified the creation, sharing, and synchronization of a wide range of components. Additionally, it will facilitate smooth knowledge transfer to new team members.
The component library helps developers maintain the sanity of code and consistency in the final product.
I plan to start outlining comprehensive documentation. This involves creating detailed records of design principles, guidelines, and components that are easily accessible to all team members.
This documentation will:
Use clear and concise language.
Include visual examples.
Be updated regularly.
Provide accessibility to all team members.
A design system needs good documentation to succeed within the team.
next steps
