Background
518 Job Bank is an online employment company in Taiwan and it’s dedicated to helping small businesses in the service industry recruit employees. It was launched in 2009 and had 3 million members. 518 Job Bank helps members get their jobs and bridges the gap between employers and employees. Since the product was 10 years old, striving to differentiate itself from the competition in the online recruiting market in Taiwan. During the business transformation process, the company had decided to set itself apart from other online job banks by targeting service companies, especially storefronts, which might consider indiscriminate fees for personnel recruitment unfriendly and inflexible.
Therefore, it was time for the team to refresh the brand and the UI. The website’s UI was outdated and needed a facelift. We needed to clean up the design debt. Secondly, we needed to make better use of time and resources to build UI components and write design guidelines during the break between different design projects.
Challenge
The product didn’t make significant changes during the past 10 years, therefore indeed it accumulated a huge amount of design debt. It affected the efficiency and the reusability of the components. To speed up the development cycle and team collaboration, we rebuild the design system and the structure of the guidelines. However, making design guidelines was not the priority of the team, and people outside the design team initially didn’t find it important. Therefore, we only had time to build UI components and write design guidelines during the break between different design projects and constantly synced and discussed with the development team.
Goal
The goal of the project is to build an adaptable system of guidelines, components, and tools that support the best practices of user interface design. Moreover, we hoped to speed up the development cycle, enhance flexibility, and also improve collaboration between designers and developers.
The Process
With the team expansion, more team members would have opportunities to read and use the design guidelines. Therefore, we chose to edit the document on Dropbox Paper because it was easy to use and compatible with the markdown syntax.
In the beginning, we began with the abstract concept, such as the mission, brand story, and brand identity. We interviewed the stakeholders about the history of the brand. After we had a clear vision of the brand, we transition the brand identity to UI patterns by establishing foundations for color, typography, grids, components, and document collaboration guidelines. Then we expanded the scale of design guidelines to the brand guidelines and marketing materials. As the product development progresses, we periodically added iterations to the guidelines and kept updating the document based on the team's status and knowledge.
Project Tracking
Since we all had the task at hand, we needed to set priorities straight to facilitate the progress of design guidelines. In the meantime, we had to deliver a reasonable outcome within 6 months and demonstrated efficiency and reliability to the supervisor to prove that we not only could finish the task on time but also could take time out to write design guidelines. Therefore, we reviewed the progress monthly and then moved further to an annual review. We finished the brand style guide and design principles within 6 months, and we handed in the digital services design guidelines within one year.
Moreover, we also checked the document that we had completed at the end of the year to ensure that we were right on target.
The following list is our annual review checklist at that time:
Design Principle
The following principles are what I complied with when I was writing the design guidelines:
- Consistency
518 Job Bank had renewed its logo and the brand colors in 2019. To have a consistent experience across devices, we need to work closely with the app team and review the details of each UI component. - Accessibility
The core of the job searching platform is to display the information in a meaningful and consistent format so that job seekers and employers can find the essential information efficiently. Thus, we want to make sure the contrast between text and background should meet the specifications of WCAG Web Accessibility Guidelines, and the minimum standard is level AA. Secondly, we used responsive fonts which is to resize the fonts according to the viewport's size to ensure a comfortable and consistent reading experience across devices. - Reusability
Based on the new brand guidelines, we began with the abstract concept, defined UI components, and then created a UI library with maintainable CSS. We worked closely with the front-end developer and built the common UI elements in case of reinventing new wheels. Our main goal is to reduce maintenance costs. If we needed to tweak the UI elements, we used Git for version control and kept the designers informed.
The following is the screenshot of using Gitlab as our versioning control platform:
What’s in the Design Guidelines
File and Folder Structure
The outer categories are the brand’s visual identity, brand extension guidelines, and digital services design guidelines. This project mainly focused on digital services design guidelines and included cross-device design elements and the study of design guidelines.
Here is our file structure of the design guidelines:
The Structure of the Document
Take the typography as an example, we wrote from a larger scale such as the type scale to how to put it into practice. We first introduced the font family, the type scale, and the font size units (including responsive font size), and then wrote about applying the typography. When it comes to the buttons, we also started with the common types of buttons and explained the usage.
Specs
Take the primary button as an example, we illustrated different types of buttons and button groups. To collaborate effectively and to better understand, I provided the CSS attributes and left the usage notes.
Examples of Misuse
As a well-structured design guide, it’s also important to mention examples of misuse. Here’s the excerpt of the typography guideline. I listed some misuse of font weight. If the font-weight is misused, it will be difficult for readers to find the information. Moreover, the readers might have a more difficult time finding particular information. We compared the existing pages to the other existing landing page that passed the accessibility standards, reminding team members that accessibility (contrast and color use) is vital when it comes to web design.
The following excerpt is from the typography chapter:
The Design Output
Then we put the design guidelines and CSS components into practice. Here’s what we have accomplished in optimizing the user interface design. Finally, we can grab and insert the components listed in the design guidelines directly into our product and see the example down below of how to use the component.
Outcome
Green was originally the primary color of the employer’s mode. After that, we changed the primary color to navy blue. We replaced the old UI (such as the registration process) with the new design guideline.
Learning and Takeaway
To me, I’ve gained a lot of experience in building a design system. However, what I learned the most is to share experiences with the team and brainstorm useful insights with team members. Through a collaborative effort, we became effective problem solvers.
Writing design guidelines is a healing and fulfilling process. Throughout this process, I have the opportunity to find out about the painful UI debt and to improve the user experience. The ultimate goal of the design guideline is to carry out the concept of user-friendliness and a better living world. Only through the discussion and brainstorming, the design guidelines can be kept iterating and evolving. Product development is a never-ending journey. I realized the fact that the design guideline consists of shared beliefs and mutual agreement so that it can be considered the “guideline”. In a nutshell, this project helped me build stronger connections with my team.