The design system was built to increase efficiency and consistency among designers and developers at Hijrstudio.
Hijrstudio is a digital creative agency based on Bogor, Indonesia. The services offered are IT Consultant, Branding, UI/UX, Product Development, Website Development, Interactive, & Social Media Management. This study case will focus on creating a design system that help their UI/UX design and website development process.
This design system is also intended to complete the author's education at the University of Indonesia by making it a thesis. The projects took approximately four months to complete.
Hijrstudio encountered problems related to collaboration during the process of working on software development projects, one of which was at the design and implementation stages of project interface design involving UI/UX Designers and Frontend Developers.
There are inefficiencies and inconsistencies in the interface design of the projects being worked on. So...
In this project, I contribute as a UI/UX Designer and UX Researcher. I get in charge of:
- UX Researcher : creating the research plan, arrange the interview questions, conduct interview, benchmarking, analyze the data & findings, conduct usability testing, etc.
- UI/UX Designer : ideation, arranging the information architecture, exploring inspirations, building the UI components, document the components into the design system documentation which contains a style guide, etc.
In making this design system, I use User-Centered Design method that consist of 4 stages (Understand Context of Use, Specify User Requirements, Design Solution, and Evaluation).
Stakeholder interviews were conducted in a semi-structured involving 3 UI/UX Designers and 2 Frontend Developers.
The questions posed to participants discussed 3 things: the learning process and adaptation of designers, the process of designing user interface designs, and the needs of designers related to the design system.
Answers from respondents were analyzed and grouped in terms of current workarounds and pain points they faced.
Focus Group Discussions were conducted to explore information regarding communication between designers and developers as well as output expectations from the designer and developer side.
Benchmarking was carried out on 5 Design System owned by large companies: Material, Atlassian, Spectrum, Ravier, and Asphalt.
Benchmarking is carried out to identify and analyze 3 aspects: the available UI components, style guide documentation, and information architecture. The results of the analysis will be taken into consideration in the DS design process.
Interface audits are carried out on projects that have been designed by Hijrstudio. An examination was made of several pages of interface design from various projects that were put together in a single Figma file. We checked the implementation of elements such as color, typography, shape, and spacing, etc. of each component used.
Based on the results of stakeholder interviews, focus group discussions, benchmarking, and interface audits that have been carried out previously, a requirement document related to design system is made as a conceptual basis in the design system creation process.
Requirements related to system design consist of two parts: requirements related to UI component libraries and design system documentation.
The process of determining the types of UI components that we want to design is carried out using the Participatory Design technique. The following are the types of UI components and their categorization that will be designed.
After that, we designed the information architecture to get an overview of the Design System.
In designing components, we use the atomic design method, where we design from the simplest components to the most complex components.
We used Figma's built-in design token to design this DS. The tokens we use include text styles, color styles, effect styles, and grid styles.
As for the process of customizing the interface design theme, we use plugins from Figma, namely Figma Token. We use the Figma Token to make it easier for designers and developers in the design customization process.
Designers can store tokens easily according to client needs which can later be used in changing the theme of the default component. In addition, we also provide a special naming system to facilitate communication between developers and designers regarding changing themes. Naming like color.primary, color. neutrals, etc.
After that, we create a default reusable UI component library that can be used by designers and developers in working on a project. UI Component library includes 8 UI components and their variants. In addition, Foundations are also designed which contain basic visual elements for designing a project.
All the UI components that have been designed are documented in design system documentation and contains the style guide of each component.
Design system documentation includes: Components, Anatomy, Specification, Usage, Types, Theming, and Code Snippets for each components.
The following is an example of a design system documentation page.
UT is conducted to evaluate the design that has been designed by measuring two metrics: Time Performance and Task Performance.
UT is conducted by providing scenarios related to the use of the design system. Here are the result of the UT.
The following are the results of usability testing carried out on designers, in terms of the task performance, it appears that all participants were able to complete all of the given tasks, although there were several cases where they succeeded but experienced problems.
In terms of time performance, the use of Design System has proven to be able to speed up designers in designing an interface, this is shown by the faster average time in doing tasks when using the Design System.
After that, the participants were asked about the context of using the design system after completing a scenario, the aim was to explore the qualitative evaluation from the participants. The questions were: What do you like and don't like about this DS?, Are there any problems while working on this scenario? etc.
After that, recommendations for improvement are given based on the results of the evaluation that can be carried out in the next iteration.
Design System consisting of a UI Component Library containing 8 reusable UI components and a Style Guide that includes a Design Token.
The evaluation results show that the developed Design System is quite good, seen from the 100% success rate and the increased time performance of UI/UX designers and frontend developers at the evaluation stage.
