We conducted the development of a digital design system for a global risk management company, in partnership with their Digital team.
Digital design system
Design system
Design systems contain best practices, themes, and codes for every basic component, serving a wide range of designers and developers building digital products and experiences.
Shared vocabulary
Design systems aim to provide shared vocabularies between designers and developers, making the design and development process more efficient and focused.
Unify
Design systems support companies having the same design styles among different design teams.
Project goal
As the second team continuing the project, our goals are as following:
Research validation
Validate research findings conducted by the previous semester’s MPS team against industry best practices, standards, and latest trends.
Build design system elements
Partner with the Digital team members to analyze the findings and build design system elements (22 Design Components)
Develop UI code snippets
Develop UI code snippets based on the recommended UI components using HTML, CSS, and JavaScript.
Research validation
Before starting design works, we dived into the research validation first. Comparing research documents conducted by the previous team with design systems from industry leaders and the company's own researches, we revised the whole document.
Prototype
As a team, we finished 22 components' prototyping based on the researches documents. For each component, we built a usage, a style, and a code page to fully demonstrate its contents.
Usage
Style
Animation
To fully demonstrate the components' function to clients and our software teammates, I created several animations by using the Adobe After Effect.
Client presentation and poster session
The final deliverable contains 22 new components' sketch files, all seven components from the previous team, which have been polished to a consistent format, and 16 code snippets.
