Lighthouse : Design System for SIMPK BPKH App
In this digital era, User Interface (UI) design has greatly evolved both in scale and efficiency. As the number of digital applications increases, designers are required to comply with the increasing demand for UI design at a fast pace. This is where the role of design systems came in. Some of us may refer to design systems using different terms such as design kit or design guidelines. Despite the naming difference, we can all agree that design system has become an important aspect in software development. In this article, I shall discuss the role of the Lighthouse design system in the development of SIMPK BPKH app.
About Design Systems.
According to Nielsen Norman Group,
A design system is a complete set of standards intended to manage design at scale using reusable components and patterns (Fessenden, 2021).
Based on that definition, a design system is a UI design guideline that is used to ensure design consistency, despite being worked on by many people. This is especially useful when you are working in a large team or organization, where communication might be a challenge. A design system is usually made before the process of designing the UI begins.
Nowadays, many big tech companies incorporate design systems in their UI design process. One famous example is Google, with their design system named Material Design. Design systems may differ from one another, adjusted to each of their own organization needs. However, based on the observable pattern of various design systems, we can conclude that most of them have these 2 elements in common:
- Style Guide — provides a guide on visual branding and content delivery.
- Components — provides a guide on UI elements for both designers and developers.
With this knowledge in mind, my team and I decided to implement a design system in the development process for the SIMPK BPKH app. In this project, my team was asked by BPKH as the client to design and implement the app based on the given requirements. This app will be the first mobile application to be used by BPKH. As a result, there are no specific guidelines for the design and the client leaves that matter up to my team. This became the main motivation for my team to develop a design system for the app.
Developing a Design System
Although it is not mandatory, it has been a common trait to have design systems named. My team and I decided to name our design system Lighthouse. Because, we hope that this design system can properly guide us to the right design, similar to what a lighthouse does.
Step 1: Style Guide
We began the process by determining the visual brand for the app. Our client does not provide specific branding requirements nor design benchmarks. Therefore, we first look for visual brand inspiration from BPKH's official site. From the website, we got a glimpse of how the BPKH visual brand should look like.
Color
When determining color, it is important to understand the psychology behind it. Each color is associated with certain emotions. From BPKH’s official site and logo, we conclude that the primary brand color is dark blue. It makes sense since dark blue is associated with trust, responsibility, and security. These 3 values are in line with the purpose of BPKH as a government institution that manages the funding for Hajj pilgrims.
Now that we have the primary color, it is time to expand the color palette. A good color palette usually consists of primary and secondary colors. A style guide should also specify colors for certain states, like red for error states.
Our primary color consists of blue shades because we want users to feel a sense of integrity and responsibility while using the app. We believe that these emotions are necessary for users when accessing a social welfare project monitoring app such as ours.
White will also act as the primary color for the background. Sure, dark mode is the new trend these days. But, we consider the fact that the app will mainly be used by middle-aged users who may have a difficult time reading the app content with a dark background. Also, the app will mainly be used outside on the field in the middle of the day. Therefore, it will be easier to see the contents of the app when the background has a light color.
Typography
The primary font family that we used for this design system will be Lato. It has a sans serif property, which we believe will bring a sense of formality to the design. Sans serif fonts are also easier to read. Lato is also a font that is available on Google Fonts, therefore we do not have to worry about any licensing issues.
In Lighthouse, typography includes guides on font size, font weight, font color, line height, and the context of use for a specific style of text.
Asset
Another aspect of the style guide that we should consider is assets. Luckily, the SIMPK BPKH app is an information system, therefore it does not require many assets. In Lighthouse, there are two types of assets that will be implemented on the app:
- Logo — the original BPKH logo from the client, therefore we cannot alter the design of this logo. Logos are used in the app to establish identity, the organization this app belongs to.
- Icons — icons are used to signify certain information or action to users. In this design system, the icons used were Material Design icons made by Google. This will ease the development process because the app will be programmed in Flutter and the default icons in Flutter are from Material Design icons.
Step 2: Components
With the style guide established, my team then proceeds to design the components. Components are the UI elements that are put together to build an interface, usually made reusable to ensure consistency. Common aspects for components guide include:
- Component name — a unique and specific name for each component. Unique and specific naming is important to avoid miscommunication.
- Description — a brief explanation of what the component is used for.
- Attributes — aspects of the component that can be customized or adjusted.
- State — visualize how the components will appear in a certain state.
Another important aspect that is usually present in a components guide is code snippets. Code snippets are code excerpts that depict how a certain component is coded in the frontend. Our Lighthouse design system does not include code snippets because we believe that it is not necessary for a small-scale project such as ours. Besides, my team acted as both designer and developer, so there should be no issue if code snippets are not present.
With the style guide and components established, our Lighthouse design system is finally complete and ready to use. But, not so fast! Before we code straight to its functionality, it is best to create reusable components first in the project repository.
From Design System to Actual Code.
My team begins with translating the Lighthouse design system into reusable frontend codes. This will ease us as developers by reducing code duplications, maintaining clean code, and easier to test. In Flutter, we can achieve this by implementing themes and custom widgets.
Step 1: Create a theme.dart file
To create a style that would be implemented throughout the project, we can create a theme file. This theme file will return a ThemeData that defines typography, color, and widget styling on all pages of the app. We specify the entry of the ThemeData as follows.
Step 2: Set up the theme for all pages
Now that the theme file is ready to use, simply import the dart file to the main.dart file. Then, in the MaterialApp class, set the theme parameter to the function found in your theme file.
Step 3: Create custom reusable components with stateful and stateless widget
Now that the theme is set, my team then proceeds to create custom reusable widgets. In Flutter, there are two types of widgets, stateless and stateful widgets. Stateless widgets are static widgets that never change their appearance. Meanwhile, stateful widgets are widgets that can change their appearance at a certain state over time.
The code below is an example of a custom search bar component that is used for our SIMPK BPKH app. This search bar is a stateful widget because it can change appearance based on the state of input that the user provides for the search.
Step 4: Implement custom reusable components
Once all reusable components are made, we can simply implement them by importing the widget to the designated dart file. Then, call the widget and specify its parameters if necessary.
Great! Now we have successfully implemented the design system as a frontend code. It’s been a long way indeed from the start. But why bother with all these steps? What can be gained by implementing a design system?
How Design System Benefit My Team.
As it turns out, the Lighthouse design system greatly benefits my team during the development process. Despite all the efforts it requires, I can guarantee that the benefits you could receive from the design system will be worth the effort. Below are some of the benefits of implementing a design system that I felt while developing the app.
Preserves Consistency
The use of design systems ensures consistency throughout the interface. In fact, consistency is one of the important aspects that makes a good UI design, as stated in Nielsen’s 10 Usability Heuristic. An inconsistent design can make users misunderstood the purpose of certain app functionality.
Saves Time and Effort
Design systems benefit both designers and developers by saving time and effort. This is made possible by the fact that design systems encourage reusability. Reusability means that new UI elements are made only if it is necessary. There is no need to create a new UI element if you can just reuse and customize the existing elements.
Help Reduce Miscommunication
In software development, we are often required to work in teams. Therefore, it may be difficult to ensure all members of the team think the same way. For example, the designer team intends for a card to be a carousel, but the developer team misinterprets the card as a dropdown instead. This kind of issue poses a challenge that can threaten design consistency and halt the development process. Therefore, design systems are required as a one-stop guide for all members involved in the development, to ensure that everyone has the same idea.
Conclusion: Is It Necessary?
The answer depends on the project and the team itself. If the scope of the project is small and the team members are only a few, then the absence of a design system will not become an issue. Also, if the design system only provides visual guides, then there should be no significant difference whether a design system is implemented or not. Therefore, we should consider implementing a design system based on the project’s scope and the team capacity. It is also important to consider the risk that inconsistency and inefficiency may pose on the development process.
After learning how to build a design system, I realized that I should have learned it sooner. I find that design systems are very useful to communicate with a fellow developer that has no sense of design. However, I do agree that building a design system can be difficult and time-consuming, so it is important to understand when it is necessary to do so. Hopefully, this article can introduce you to design systems and help you decide when to use a design system. Thank you and I’ll see you on the next one!
