Class Project
A student project design system built to emulate the emotions of playfulness and fun. Basing the design off of the Sloomoo Institute, the team maintained the brand identity of Sloomoo by keeping its core colors. Through an intricate process of research and design, the team created a new slimy product named Gooi.
Project Overview
Gooi is a design system created as a tool that can be used by designers for Sloomoo Institute's digital products. The design system that we created can be differentiated from other design systems because it is focused on actualizing the physical brand into a digital experience.
6 Weeks | Spring 2023
Class Project
Design System
Daisy Garcia | Hannah Ramirez | Yang Cheng
Through Brad Frost's Atomic Design approach, we were able to develop a consistently scalable design system that could be easily updated and adapted in different contexts.
Analyzed the following metrics: number of sessions, page views, sequence of pages visited
Time Frame: 1 January 2022 - 5 October 2022
Analyzed real-time recordings, website page clicks, mouse movements, and scrolling patterns.
Time Frame: Last 30 days
We used Google Optimize to create our A/B Testing variations. It allows running some experiments that are aimed to help increase visitor conversion rates and overall visitor satisfaction.
The time frame is short to provide quantity and quality data for the website.
Hotjar could not track the Map and Zip Code Calendar, making it difficult to understand how users use and interact with them.
Atoms of our interface serves as the foundational building blocks that comprise all our user interfaces.
When atoms are combined, we get molecules: groups of atoms, bonded together that are the smallest fundamental units of a compound.
Organisms are UI components composed of groups of molecules and/or atoms. These organisms form distinct sections of an interface.
Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure.
The project begin with a audit of the existing site, to get a better understand of the current state of Sloomoo's existing design ecosystem. The plan was to screenshot unique instances of the main design assets such as typography, buttons, icons, input forms, drop downs, etc.
Upon dissecting the UI inventory, identified a lot of inconsistencies in the design assets, which only proved the need for a more systematic approach to documenting, communicating, and maintaining our design system.
By creating a captivating and fun experience through creative layouts and components, designers can use these guides which will make a consistent design by having a predictable experience.
It is important to consider accessibility. Color is a core element to the design. To follow accessibility guidelines, you need to consider the contrast between colors and be aware of the combination of colors.
Keep a playful tone and voice throughout the system. The consistent language used begins here and can be carried over to the development process. Try to avoid using overly technical jargon or intimidating language.
A visual experience is needed to capture the immersiveness of a physical space. Media is incorporated to bring the feeling of a physical space online. Components also react to interactions.
To get the whole team on the same page, we focused first on the foundational elements of the design system, such as brand logos, grid systems, spacing, typography, color palette, and iconography.
We believe in being playful and engaging. Our icons reflect this by being simple, rounded, and approachable. They're easy to recognize and remember, making them perfect for any design.
A well-designed layout is the foundation of any successful design, providing structure and hierarchy to our content. We used a 12 column grid with 16px for gutter and 64px for margins.
In addition to the foundational elements of the system, there exist other components that can be replicated to further enhance the system. These components are designed to align with the existing foundations elements and maintain a consistent overall design.
Buttons come in varying sizes, both small and large. Each button has two distinct states - default and selected. The availability of different colors and sizes provides versatility in their usage across various contexts.
Cards consist of a combination of images, text, and buttons, with distinct cards designed for specific use cases. Each card has two states - default and hover.
View All Components
These essential components serve as the building blocks, helping us create cohesive and consistent interfaces. Just like a puzzle, blocks fit together seamlessly to create a bigger picture.
Bringing a design system to life includes documenting what was was created. This is where the design is put into words creating a central place. Our team created a documentation of our design principles, accessibility standards, components and best practices for designing.
We use Zeroheight, a collaboration platform that integrates with Figma and allows product teams to create and maintain web-based design system documentation.
Our accessibility guidelines can be used to make design more accessible by giving designers tools to use.
By demonstrating how to use each component of the Gooi design system, the user is guided through the process.
In addition to the state representation for components, a Do's and Don't section is included for governance purposes.
There are several types of components listed by Gooi, with variations explained for each type.
The Gooi Design System was originally developed by students as part of a class project, and our team was responsible for maintaining and updating it until May 2023. However, we have since ceased our involvement with the system.
Nevertheless, we acquired significant expertise in crafting a design system that prioritizes web accessibility and adheres to a unified design language.
Learnings
Simply put, a design system is a comprehensive framework, meaning that individual components cannot function effectively in isolation. For instance, a UI kit created on Figma may be useful, but without accompanying documentation that outlines when and how to use it, a designer would struggle to utilize it effectively.
Biggest Takeaway
Incorporating accessibility into design should be mandatory and given serious consideration from the outset of any project. By taking this proactive approach, designers can streamline their workflow and avoid the need for subsequent redesigns that take accessibility into account.
Next Step
My intention is to integrate code into the design system using Zeroheight. As our team did not collaborate with developers directly during the project, it would be valuable to gain their input on how the system can best support their workflow.
