top of page
iPhone 12 - Green (3).jpg

Overview

Youyi Education is a company proving service related to university application for students who are planning to go abroad for education or transfer schools. This design system is a team project completed during the process of completing its official website in order to scale up its design products more efficiently.

Role: UX/UI Designer

Tools: Figma;Photoshop

Duration: Three weeks

Individual Contribution

This is a team work. I collaborated with other two designers and shipped the design system to the CEO within three weeks.

Overview

Why Design System?

Problem

We are a team of 3 designers. After we finished the first version of hi-fi prototype, we found it still hard to standardize our UI design despite our effort to create a unified style across different pages and banners. More importantly, the fixation of typography, spacing and color would seem repetitive work slowing down our work efficiency since we envisioned how many rounds we are going to iterate on the current product.

Solution

We decided to create a design system to have a clear vision of the usage of typography, colors, etc. 

Future Impact

It would also benefit the scale-up design of all products of the company and project engineers to work more efficiently.

Visual Consistency
Team Productivity
Group 1000002853.png
Close Brand-Product Gap

Overall Style Decision

Based on user research and the cross-functional team discussion, we all reached an agreement that we would love our website to convey a tone of youth and professionalism. On the other hand, the whole page should obey the minimalism style.

Party.png
Youthful
Businessman.png
Professional
Minimalistic
Style Decision

Atomic Design

We also agreed to use atomic design principle, which is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. We used the former three stages presented as follows:

Group 1000002870.png
Atoms are the smallest building blocks including rudimentary elements like color, typography and icons.
Group 1000002857.png
Molecules are groups of atoms bonded together to form a button, bookmark, text input or form label.
Group 1000002869.png
Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms like a header, footer or card.

Content

  • Components
  • Typography
  • Color Scale
  • Grid
  • Spacing
  • Icons

Typography

Words speak.
Paragraphs.png

Scale

​ I used type scale to test the most feasible typography scale for the design system. The base size is 16 px, 1em. For display, I used a scale value of 1.231%. For headings, I used a common difference of 4 to ensure the fonts can be perfectly placed on the webpage. I also adopted a line height of 150% for each font size for better visibility.

image 7 (1).png

Font: Inter and Georgia

This is one of the hardest decisions we made. As our goal is to present a sense of youth and professionalism, we first decided on Serif fonts- Georgia for main content. However, Georgia font seems too "elegant“ when we put it on the page. Them we decided to look at Sans Serif fonts as it is more "young". After comparing different fonts, our final decision was to use Inter for main content and Georgia for cards.

image 8.png

Why Inter?

Inter is an open-source sans-serif typeface designed by Swedish designer/programmer Rasmus Andersson. It was designed to work well on screens as a UI font and features a large x-height. The family is available in nine weights with matching italics, as well as a variable font version.

georgia-font.jpg

Why Georgia?

Georgia conveys a feeling of being friendly and intimate. Since the typeface is still legible at low resolutions, it creates an old-world charm with a modern appeal for online designs. Georgia is a bit more formal than some of the more common sans serif fonts.

Typography

Colors

Hue tells.
Colours.png

​← The neutral colors are white and blue in different scales. We considered how anxious the users might be in accessing an agent for university application, a blue and white background would send out a tone of calming and soothing.

​← The primary color is light blue to dark green scale. We use teal for the logo and buttons as it adds to the calming and soothing tone.

​← Light green is an intuitive color to indicate success.

​← Yellow is an intuitive color to indicate warning.

​← Red is an intuitive color to indicate failure.

Colors

Grid and Spacing

Distance denotes.

8 Point Grid System

We adopted the 8 Point Grey System as foundation for grid and spacing to make the distance consistent across pages. Division of 8 are used to size and space out the elements, padding, margins, etc.(Sometimes 4 if there is a need to go in tight.)

image 12.png

Spacing

Spacing (1).png
Spacing (1).png

Example of Use

Grid and Spacing

Icons

Icons.png
Icons

UI Components

Components (3).png
UI Components

Final Work Sample

首页.png

See Other Case Studies

image 16.png
image 19.png
bottom of page