Kolegahr

Create

and Elevate

Design System

Create and Elevate

Design System

Accelerate Design Team Workflow and Uphold Component Consistency in Kolegahr Website and Mobile App

2022 & 2023

Role

UI/UX designer

Platform

Website & Mobile App

Tools

Figma

Reading time

5 min read

Overview

The company (BSA) had products (Smart Presence) that focused on presence systems that couldn't be developed anymore for one reason or another. So the company wants to make new products to make it delightful modern app that works completely as HRIS. Where the two initial modules of the product being developed are attendance and payroll modules.

The Challenge

  • Presence products owned by the previous company did not have a system design. The product has no style guides, components and others. Meanwhile, this new product (Kolegahr) were asked to create a system design with the old product’s brand guidelines. So, I found it difficult to design the Kolegahr system because there was no consistency in the product.

  • In addition, in the go to market strategy process, based on the evaluation results, there were requests from stakeholders to make changes to product colors. So there needs to be adjustments in terms of color styles and some of the assets used.

Approach

  • Audit brand guidline

  • Explore and build UI components

  • Documentations

  • Implementation

  • Evaluation, research and design exploration (new color)

  • Rebuild UI design system

  • Implementation

Output

Produced 4 design system libraries (2 for the website platform and 2 for the mobile platform). Where the difference between the two system designs is the style guide.

Outcome

The design process becomes faster and all components are more consistent in each state and type. In addition, the process of changing the color of the system design is also much easier to work on because there is already an existing design system so that the library swap process becomes easier.

Audit User Interface Based on Brand Guideline

Design and Brand Guideline Analysis:

  • The color style on the user interface does not follow the brand guidelines. So the colors used on landing pages, Instagram and others are not the same as those used in the product user interface.

  • There is no consistency in the use of components. So that the components on one page with other pages can be different.

Explore and Build UI Component

There are several things that I did in exploring system design:

  • Doing brainstorming on design systems used by other applications in the figma community to learn the types of components that exist on the website and mobile app platforms

  • Participate in a system design tutorial class to simplify the process of creating a design library

  • Pay attention to functional aspects by creating component libraries that are often used to increase time efficiency in designing

  • Supporting aspects of flexibility to facilitate the process of making mobile app system designs adapted from website system designs

sidebar and navigation bar exploration

Documentation

After creating a design system, the next process is making documentation. This aims to make it easier for the development team and other design teams to read the library design system.

Implementation

Mobile App Interface

Mobile App Interface

Evaluation

After the design is implemented and the product has been used within the company for several months. In the discussion on preparations for going to market, there was a request from stakeholders to create a new brand guideline. So it doesn't use the brand guideline of previous presence products. After going through many discussions with the design, product, marketing and stakeholder teams, the design chosen is a design with new color styles. However, it does not change the entire existing design components. So that it is an adjustment to the style and existing image assets.

Design Exploration (New Color)

New brand guideline

In doing exploration, I coordinated a lot with the marketing and communication team. The color composition exploration was carried out based on the brand guidelines made by the marcom team. Several explorations were carried out to find the percentage comparison of purple and white colors in the interface. Based on the several color exploration options, it is discussed with stakeholders for approval of the color change process in the design system.

Mobile app design exploration

Website design exploration

Research

After doing the exploration, the research process is carried out through the survey method. This research aims to find out the needs or activities that are most often carried out by employees when accessing the Kolegahr mobile app. The survey process was conducted on 10% of user representatives.

Processing of survey results

The results of the survey show that the main needs of employees when accessing the homepage are:

  1. Ease of attendance

  2. Easy access to Kolegahr's main features

  3. Ease of submit for leave, overtime, reimbursement and attendance correction

  4. Ease of getting information about team members, peers and managers (employees who are on leave today and requests from team members)

Implementation of research results

Re-Build Design System

The process of changing the system design is starting by duplicating the existing system design library. In the new library, there are changes to the color styles and font sizes. Because the new design has a purple A to purple B gradient color with a composition of 70% white and 30% purple. So it still needs adjustments to some existing components and page designs. Apart from that, there are still adjustments to the image or illustration elements used on the website and mobile app. Currently, the new design library is being gradually implemented in website and mobile app designs for the next version.

Examples of design system documentation

Apart from updating the system design, I also created guidelines for implementing the new system design. This guideline helps developers to know where design changes occur in any part of the application. The implementation of this new color was also accompanied by improvements to previously inconsistent copy.

Guide to implementing system design, copy improvements and reviewing system design that has been implemented by the development team

Implementation

The new system design is applied to the Kolegahr application after going through a research and evaluation process by the UI/UX team.

Implementation

Takeaways

Here’s what was working

  • The use of design systems in Kolegahr speeds up the design team process and maintains design consistency

  • Improving the font size and buttons on the mobile app has had a significant impact on the ease of users reading information on the Kolegahr interface

Here’s where we need continued iteration

  • Some copies in website still use English so it looks inconsistent. Evaluation of the language used, it will be very useful for users to understand and carry out tasks in the application if the language similarity is good

  • Improved breadcrumbs because on the website, breadcrumb improvements are needed to increase user accessibility in accessing pages on the website

Leason Learned

From the process of making this system design I learned that design systems has a big impact on the design process. Making a component master that can impact all existing components, really helps the designer if there is a change in a component or design. In my case, requesting changes to the brand guideline by stakeholders that occurred became much easier to do because previously I had made a system design. Thus, manual adjustments are only made to certain components or certain cases.

Made with

in Jember