easy hire design system
A design system is a collection of reusable components, guided by clear standards, that can be assembled to build any number of applications, and the need for them goes hand in hand with the need for scale, efficiency, and consistency in Design. They bring order to chaos.
We have created a design system for Easy Hire. This system is a comprehensive set of guidelines, components, and assets that work together to ensure consistency in the design and development of Easy Hire for a better user experience.
expertise
UX Designer
platform
Figma
team
Laura, Rafael and Dora
The Foundation
You don't start building a house without its foundation so the same applies to design systems. You don't use concrete. The foundation of a design system is your spacing and grid system.
The website uses a grid system to adhere to the design principle of consistency, which enhances the overall readability and user experience. The design is predictable and familiar, making it easily scannable for the user.
Typography
For web, we wanted to go with a clean and versatile font for this system.
Typography plays a big role in the brand’s overall impact and impression on the target audience. The sans-serif fonts Poppins and Montserrat, convey simplicity and clarity. The fonts print well and are also quite readable for most users, making them good fonts to use on web. By using a type scale system we can clearly create a visual hierarchy on the website, enhancing the website's readability.
Iconography
The iconography plays a significant role in the visual communication, helping users quickly understand actions, features, and content without relying solely on text. The icons used on Easy Hire adhere to a consistent style and design aesthetic, which helps the users develop a mental model of how icons relate to specific actions or features. The icons can be used alone or alongside text in interactive elements such as buttons, cards and input fields. The icons should match the color scheme of the overall interface.
Color Palette
We added WCAG 2.1 contrast ratios to the color system so you can make sure you’re designing with accessibility in mind.
The error colors are used for error states and in “destructive actions”. The success color is used for success states and communicates a positive action. The warning color communicates that an action is potentially destructive or “on hold”.
Buttons
The button components are designed to be reused in different parts of the website. This promotes consistency and reduces the need to recreate this element from scratch every time. The primary button is used for main actions and the secondary button for secondary or less prominent actions. The buttons have different states (default, hover, pressed, disabled).
The buttons may also include icons. Keeping accessibility in mind, the colors have been checked with a contrast checker plugin. This was the buttons adhere to WCAG 2.1
Logo
The logo is a handshake that symbolizes unity, collaboration and connection. It represents the platform's commitment to fostering connection between international students and potential employers, reflecting the positive relationships the platform aims to facilitate in the job-seeking process. The logo should not be altered.
Input Fields
Easy Hire uses text input fields to capture text and searches the user does. All text input fields have placeholder text within them. The different states of the input fields are illustrated below.
Navigation - Top Bar
The navigation bar serves as a visual anchor at the top of the page and contains navigation links and icons that enable the users to access different parts of the site. The logo is placed at the left of the bar, in the middle you have navigation links, and to the right you have the user's profile picture.
The color of the navigation bar follows the overall design system ensuring consistency.
Navigation - Footer
The footer serves as the concluding section of the website and provides the user with essential information, navigation, and context about the website.
Results
Design Systems are like living organisms in that they are complex and ever-evolving.
What I showed here is just a section of what goes into a complete system. A complete system contains the following:
Documentation
A shared space where you say when and how to use the design system
Visual language
Guide to what the brand feels like
Pattern library - Also called "component library" includes what you see above
Brand guidelines - Includes principles, tone and voice, writing style, and more
Easy Hire is a work in progress but that's how it's supposed to be.
Thank you for reading my case study!