Background
Joblogic is a UK-based Field Service Management (FSM) company, founded in 1998 and has developed an effective service management system. By 2019, I joined Joblogic and realized that our product interface design was still not being managed effectively. Our interface design system still relies on tools like Photoshop and lacks a specific Design System (DS).
The Joblogic ecosystem includes Joblogic web landing page, Joblogic web app for back office, Mobile app for Engineer and Customer portal for customers. The lack of unity in design approach has led to inconsistency and separation in the visual perception and user experience of our products.
Our mission is to build the Joblogic Design System to ensure consistency among design team members, improve efficiency and save time for our development teams, QC teams.
Objectives
We face limited resources and a higher priority on building new features, so our main goals at this stage are:
Build a Joblogic Web Design System
Create a design system for Joblogic Web based on the existing Joblogic Web system
Role
Lead UX UI Designer
Team
3 designers
Timeline
Since 2019
Responsibilities
- Plan a DS design roadmap for the team
- Set up a design system from scratch and develop a design foundation
- Create a sample library and build on existing components in the current Joblogic web application system
- Implement processes to encourage ongoing contributions and maintain the design system
- Teach the group how to skillfully use the design system
Design Process
Research
Before we started building the Design System, we conducted a detailed study. This includes:
Design Audit
We conduct tests on our products, listing all versions of specific ingredients on product pages.
Interview
We conduct user interviews and research (including tech, design, QC) to understand their expectations from the design system.
Research popular Design Systems
We study various popular design systems such as Material Design System, IBM Carbon Design System, Apple Human Interface and Atlassian Design System to learn from best practices.
Key findings
1. Inconsistency
Our products have many inconsistencies, be it in color, ingredients, instructions, etc., which can have adverse effects on the overall experience and brand image. This causes difficulties for the Dev & QC team.
2. Superabundance
Lack of a library of components leads to repetitive design and implementation work.
3. Use 2 icon font sets
Using two different font icon libraries (Font Awesome & Material Design Icons) caused inconsistency and slowed down page loading.
4. Structure
We realized there was a need for a clear structure for the design system.
Solution
Based on the information collected, we divided the design system into three main parts: Foundation, Components, Templates & Pages. In addition, we rebuilt a new Icon font set to replace the existing icons.
Planning
The first thing is to create a DS design roadmap plan to manage the work is necessary.
Foundations
The foundation is the basic foundation of the system. Ensure consistency in colors, logos, fonts, layouts, icons and enhancements. We've simplified the color palette to avoid duplication.
Components
Components include frequently used user interface elements such as buttons, selectors, text input fields, notifications, chips, statuses, page numbers and more.
Templates & Pages
Page Templates are pages with similar page layouts. Such as a log job page, job page, etc
Font Icons Set
We've collected all the icons used in the product and created a new, unified set of letter icons. In addition, we kept the icon name the same so as not to affect the front-end team's code when applying this new icon font set.
Test & Feedback
After releasing the initial design system, we conduct testing and collect feedback from the development team, quality control team and design team members. This iteration helps us continuously improve the system.
Overall, the whole team feels satisfied with the new design system.
Contribute continuously
Building a design system is an iterative process, just as technology evolves based on changing trends and user behavior.
To maintain the design system and continue to improve, we set up measures like Slack for discussion, Google Sheets for bug reports and update requests and Jira for workflow management.
Result
With the implementation of our design system, we have achieved significant results and achievements.
- 30% reduction design time: By leveraging reusable components and standardized processes, designers can focus on more complex issues, shortening project completion time.
- 25% enhanced communication: Designers, developers, and QCs can seamlessly collaborate, ensuring clear understanding of interface components, minimizing errors, and boosting teamwork efficiency.
- 15% workforce optimization (Save 6 hours/week/person): Design Systems automate repetitive design tasks, freeing up designers' time for creative endeavors and higher-value work.
- 95% consistent user interface: Design Systems ensure a uniform user interface across all products, providing a seamless user experience.
- Unified design culture: Everyone in the company, from designers and QCs to developers, shares a common design language, fostering effective collaboration, minimizing conflicts, and aligning towards shared goals.
In short, these numbers 📊 and specifics 📈 will help demonstrate the true value 💡 of the design system 🛠️ and how it has improved important aspects of the product 🚀.
What I learned
1. A tree and there is breath
It needs to be updated and maintained regularly to respond to company growth.
2. Not one, need everyone
One individual cannot build a massive DS in a short time, it needs the support of the entire team
3. Limit resources, time and priorities
When you don't have enough resources, time and low priority to build a DS, what do you do? To do that, I have come up with many approaches to do it. Such as building the basics first, planning resources appropriately (gain 10% working time in 1 sprint) and dividing each task into small pieces for everyone to do. Make sure not to affect the progress of the company's ongoing priority tasks.
4. Recognition comes from results, not just words
There was some ambiguity and doubt about the benefits of a DS when I asked that I wanted to build a DS. My lesson is You don't need to say too much, just do it and show it to everyone.
Next steps
The design system construction project is still continuing with:
- Continue updating and building more templates and component libraries.
- Build UI code system for development team (using Storybook).
- Build and add additional documentation to ensure that our library is always up to date and perfectly synchronized in both design and code.
- Complete design system on products (Mobile Application, Information Portal).
Final conclusion
The design system marked an important turning point in our development journey. It has helped increase performance, reduce development time and improve user experience. This story is a clear demonstration of the true value of building a consistent Design System and driving our growth and success in the industry.