Workflow Design System
Project type
Design System Build
Tools
Figma
Overview
Our company needed to update our HR Workflow System because the old one didn't suit our needs anymore. We decided to make our own system, but while designing it, we found lots of design inconsistencies and it was hard to explain everything to the developers. There were no guidelines for things like fonts and colours, so the result wasn't great. That's when I was asked to fix the inconsistencies and create a single design system to make things easier for developers and speed up the design process.
Inconsistent Design
There were lots of differences in how things looked, like fonts, colours, and design elements, across the HR Workflow System.
Communication Issues with Developers
Because there wasn't a clear design system, it was tough to explain how things should work to the developers, leading to misunderstandings and mistakes.
Slow Design Process
Making new screens or features took a long time because designers had to start from scratch each time, which made the HR workflow less efficient.
Challenge
Comprehensive Audit
I looked closely at the existing HR Workflow System to find all the design inconsistencies and figure out what needed to be improved.
Team Workshops
I organised workshops with designers, developers, and other team members to understand everyone's needs and make sure we were all on the same page about what the new design system should include.
Design System Creation
Using Figma, I created a clear design system that included things like fonts, colours, and reusable design elements. This made it easier for everyone to follow the same design rules and create consistent designs.
Feedback and Improvements
I asked for feedback from the team regularly and made changes to the design system based on their suggestions. This helped us make sure the design system met everyone's needs.
Approach
Consistent Design
The new design system made everything look the same across the HR Workflow System, which helped to get rid of the design inconsistencies.
Better Collaboration with Developers
With clear design rules and reusable design elements, it was easier to explain things to the developers, and they could work faster and make fewer mistakes.
Design System Creation
Designers could now create new screens and features much more quickly because they didn't have to start from scratch each time. This helped to speed up the HR workflow.
Feedback and Improvements
Users liked the new, consistent design of the HR Workflow System, and found it easier to use.
Outcomes
Invest in Design Systems
Having a clear design system is important for making sure everything looks consistent and works well together.
Work Together
Getting input from everyone involved in the project helps to make sure the design system meets everyone's needs.
Design System Creation
Design systems should be updated regularly to make sure they stay useful and meet the changing needs of the team.
Key Takeaways
Conclusion
By fixing the design inconsistencies and creating a clear design system, we were able to make the HR Workflow System work better for everyone. Going forward, we'll keep improving the design system to make sure it continues to help us work efficiently and deliver a great user experience.
More Projects
.png)
Like what you see? Let's talk!
Email
its.usamabaloch@gmail.com
Linked in:
linkedin.com/in/usama-baloch
Resume:
Download my Resume
© 2024 - Usama Baloch - Portfolio