Global Asset Design Systems
My role
UI Visual Design, Front-end development, Design System Facilitator
I worked as the visual designer on creating the design system, which includes conceptual designs, designing detailed specification of each UI component, and how components fit together. During the development process, I collaborated with one of the front-end developers to translate the designs into code. As the facilitator of the design system, I focused on improving and adding components based on feedback.
Overview
Known internally as Global Asset is a design system for EIC Education. The design system’s mission is to provide consistent user and developer experience across EIC’s mobile and desktop applications.
Consistent User Experience
When the product team looked into the EIC’s technology roadmap, it expands into different systems designed to serve customers and internal staff. The roadmap envisions that all systems are integrated and users would interact between these different apps. We realized these apps need to have a consistent experience so that users can work efficiently between apps. By maintaining the same experience , it allows the users to be familiar within the ecosystem.
Speedy Design and Development
Having a design system not only benefits user experience, it also helped our development team to create scalable products while saving design and development times. The Global Asset system comes with components for mockups and front-end code. By starting off from a set of reusable components, designers and developers can quickly assemble new projects without starting from scratch.
Samples of systems using Global Asset
Process
Phase 1: THINK
With established design systems from Google and Salesforce, where teams are devoted full time into developing and maintenance, it may seem to be an overwhelming task to create a brand new design system. Instead of trying to build a complete design system, we believed on starting off with a simple foundation and grow iteratively to support new projects and businesses.
The initial step was to look at existing UI from Prepsmith, our company’s most used systems at the time. Although Prepsmith’s UI is well established, the design is created primarily for students. Repurposing Prepsmith’s styles is out of the question, since it contradicts our goal of creating a flexible foundation that can grow and adapt for different purposes. We need to start off from a clean and neutral state.
Phase 2: CREATE
Design
I started by creating conceptual layout pages consist of various UI element to see how everything would flow together.
Once the layouts are refined, I followed the Atomic Design concept by Brad Frost to breakdown the UI into small elements. The idea is for our team is to create a dynamic system where we can start with core elements and eventually assemble them into common patterns.
Components: Atoms
Components: Molecules
Components: Organisms
Components: Template
Code
Creating the static components for our designers is only a part of the design system. The second part would be translating components from art boards to code that our developers can begin testing and implementing. I paired with a front-end developer to translate designs into HTML and CSS. We started by coding atom elements like buttons, form fields and work our way to creating templates with layouts and grids. Our front-end developer also created a compiler that can easily let the development team to easily implement the design system into any project.
Phase 3: CHECK
Refinements
Global Assets will always continue to evolve to meet the needs of EIC’s business growth. The constant feedback loop with our users and developers helped made great impact on making our design system work more efficiently on the EIC ecosystem.
Here are a few improvements that are being implemented based on our developer’s feedback:
Improve documentation on patterns and style guide
(include best practices, samples) (confusion from developers sometimes occurs because they cannot find enough resources on how organisms were assembled, they tend to rely on looking into previous work or example code to discover how to achieve)
Good semantic versioning to keep track of changes
Upgrade designer’s libraries from Balsamiq to Sketch for greater flexibility
Take advantage of React, and convert components library to React for future projects.