Establishing Shortlist’s Design System
A long overdue exercise of creating a system to better equip rapid growth in the HR Tech space
Design System
Redesign
8 mins read
Overview
My Role
UI UX Designer
Timeline
March 2021 - May 2021
What I did
Planned and Conducted Internal Stakeholder Interviews
Surveys and Data backed User Research
Brand Persona
Design Audit
UI Component library with States and Variants
Prototyping
User Testing and User Acceptance Testing
Implementation plan and Handoff
Challenge
Some of the several critical challenges that we identified in our audit and also from collective feedback from stakeholders across the organisation were
Inconsistency in Design: A significant issue was the lack of a unified design language. This inconsistency not only affected the user experience but also weakened the product’s overall identity.
Lengthy Design-to-Handoff Times: The process from design completion to developer handoff was increasingly prolonged, creating bottlenecks in our workflow and slowing down product iteration.
Absence of Distinct Product Identity: Our product lacked a distinctive identity, making it difficult to stand out in a competitive market and weakening our brand recognition.
Increased Development Time: Developers were spending additional hours duplicating code due to the absence of a standardised design system. This redundancy not only increased development time but also heightened the potential for errors.
Delays in Business Responsiveness: The existing workflow inefficiencies resulted in delays when addressing urgent business requirements, impacting our agility and ability to respond promptly to market changes.
These challenges hindering the efficiency and impacted our product development process.
This underscored the need for a comprehensive overhaul of our design process, guiding our decision to develop a robust and scalable design system.
Before: Design inconsistency in components
Process
The whole Design System creation was based on Lean UX Design Process. The reason being
A Design System is always an evolving part of any product suite
Components should be quickly tested with many iterations before being implemented
There should always be a check to not repeat similar components or design patterns
The Lean UX Design Process
Think: Explore problems, gather research and form clear idea who the target audience is and how will the design help them.
Make: Create sketches, wireframes and prototypes, MVP’s
Check: Run Usability Tests, gather user responses and feedback from stakeholders. Make adjustments to designs accordingly and repeat the steps if necessary.
Lean UX Design Process
Result
Custom Shortlist Design System based on the Angular Material 8
Carefully designed states, instances, and variants for each components and design patterns
Consistent use of colors and typography aligning with the brand’s identity
Shared and handed off to developers for a master component list
Clearly defined rules, do’s and dont’s for adhering to set standards for both designers and developers
Impact
The implementation of the design system at Shortlist led to transformative outcomes, significantly enhancing the product development process.
The system brought about a 40% reduction in the time from design to development, greatly streamlining workflows. Additionally, it improved code reusability by 35%, reflecting the efficiency of the new design strategy.
One of the most notable achievements was the doubling of product release cycles, enabling Shortlist to introduce new features and improvements at an unprecedented rate.
The positive impacts were immediately evident in the first few quarters following implementation, with a noticeable reduction in QA efforts, underscoring the system's reliability. Furthermore, the ability to rapidly launch new MVPs (Minimum Viable Products) was greatly enhanced, driving faster growth across various product lines.
These developments not only improved operational efficiency at Shortlist but also better positioned them to meet market demands and adapt swiftly to changing business needs.
Conclusion and Learnings
Key learnings from this project include the importance of establishing a collaborative environment between designers and developers, which not only reduces redundancy in coding but also accelerates the development process. Adopting a Lean UX Design Process enabled rapid prototyping and testing, ensuring that user feedback was integral to the development cycle.
Credits
Austen Stranahan - COO (Shortlist)
Adhip Somanna - Senior Product Manager (Shortlist)
Pankaj Kaushik - Senior Product Designer (Shortlist)
Establishing Shortlist’s Design System
A long overdue exercise of creating a system to better equip rapid growth in the HR Tech space
Design System
Redesign
8 mins read
Overview
My Role
UI UX Designer
Timeline
March 2021 - May 2021
What I did
Planned and Conducted Internal Stakeholder Interviews
Surveys and Data backed User Research
Brand Persona
Design Audit
UI Component library with States and Variants
Prototyping
User Testing and User Acceptance Testing
Implementation plan and Handoff
Challenge
Some of the several critical challenges that we identified in our audit and also from collective feedback from stakeholders across the organisation were
Inconsistency in Design: A significant issue was the lack of a unified design language. This inconsistency not only affected the user experience but also weakened the product’s overall identity.
Lengthy Design-to-Handoff Times: The process from design completion to developer handoff was increasingly prolonged, creating bottlenecks in our workflow and slowing down product iteration.
Absence of Distinct Product Identity: Our product lacked a distinctive identity, making it difficult to stand out in a competitive market and weakening our brand recognition.
Increased Development Time: Developers were spending additional hours duplicating code due to the absence of a standardised design system. This redundancy not only increased development time but also heightened the potential for errors.
Delays in Business Responsiveness: The existing workflow inefficiencies resulted in delays when addressing urgent business requirements, impacting our agility and ability to respond promptly to market changes.
These challenges hindering the efficiency and impacted our product development process.
This underscored the need for a comprehensive overhaul of our design process, guiding our decision to develop a robust and scalable design system.
Before: Design inconsistency in components
Process
The whole Design System creation was based on Lean UX Design Process. The reason being
A Design System is always an evolving part of any product suite
Components should be quickly tested with many iterations before being implemented
There should always be a check to not repeat similar components or design patterns
The Lean UX Design Process
Think: Explore problems, gather research and form clear idea who the target audience is and how will the design help them.
Make: Create sketches, wireframes and prototypes, MVP’s
Check: Run Usability Tests, gather user responses and feedback from stakeholders. Make adjustments to designs accordingly and repeat the steps if necessary.
Lean UX Design Process
Result
Custom Shortlist Design System based on the Angular Material 8
Carefully designed states, instances, and variants for each components and design patterns
Consistent use of colors and typography aligning with the brand’s identity
Shared and handed off to developers for a master component list
Clearly defined rules, do’s and dont’s for adhering to set standards for both designers and developers
Impact
The implementation of the design system at Shortlist led to transformative outcomes, significantly enhancing the product development process.
The system brought about a 40% reduction in the time from design to development, greatly streamlining workflows. Additionally, it improved code reusability by 35%, reflecting the efficiency of the new design strategy.
One of the most notable achievements was the doubling of product release cycles, enabling Shortlist to introduce new features and improvements at an unprecedented rate.
The positive impacts were immediately evident in the first few quarters following implementation, with a noticeable reduction in QA efforts, underscoring the system's reliability. Furthermore, the ability to rapidly launch new MVPs (Minimum Viable Products) was greatly enhanced, driving faster growth across various product lines.
These developments not only improved operational efficiency at Shortlist but also better positioned them to meet market demands and adapt swiftly to changing business needs.
Conclusion and Learnings
Key learnings from this project include the importance of establishing a collaborative environment between designers and developers, which not only reduces redundancy in coding but also accelerates the development process. Adopting a Lean UX Design Process enabled rapid prototyping and testing, ensuring that user feedback was integral to the development cycle.
Credits
Austen Stranahan - COO (Shortlist)
Adhip Somanna - Senior Product Manager (Shortlist)
Pankaj Kaushik - Senior Product Designer (Shortlist)
Establishing Shortlist’s Design System
A long overdue exercise of creating a system to better equip rapid growth in the HR Tech space
Design System
Redesign
8 mins read
Overview
My Role
UI UX Designer
Timeline
March 2021 - May 2021
What I did
Planned and Conducted Internal Stakeholder Interviews
Surveys and Data backed User Research
Brand Persona
Design Audit
UI Component library with States and Variants
Prototyping
User Testing and User Acceptance Testing
Implementation plan and Handoff
Challenge
Some of the several critical challenges that we identified in our audit and also from collective feedback from stakeholders across the organisation were
Inconsistency in Design: A significant issue was the lack of a unified design language. This inconsistency not only affected the user experience but also weakened the product’s overall identity.
Lengthy Design-to-Handoff Times: The process from design completion to developer handoff was increasingly prolonged, creating bottlenecks in our workflow and slowing down product iteration.
Absence of Distinct Product Identity: Our product lacked a distinctive identity, making it difficult to stand out in a competitive market and weakening our brand recognition.
Increased Development Time: Developers were spending additional hours duplicating code due to the absence of a standardised design system. This redundancy not only increased development time but also heightened the potential for errors.
Delays in Business Responsiveness: The existing workflow inefficiencies resulted in delays when addressing urgent business requirements, impacting our agility and ability to respond promptly to market changes.
These challenges hindering the efficiency and impacted our product development process.
This underscored the need for a comprehensive overhaul of our design process, guiding our decision to develop a robust and scalable design system.
Before: Design inconsistency in components
Process
The whole Design System creation was based on Lean UX Design Process. The reason being
A Design System is always an evolving part of any product suite
Components should be quickly tested with many iterations before being implemented
There should always be a check to not repeat similar components or design patterns
The Lean UX Design Process
Think: Explore problems, gather research and form clear idea who the target audience is and how will the design help them.
Make: Create sketches, wireframes and prototypes, MVP’s
Check: Run Usability Tests, gather user responses and feedback from stakeholders. Make adjustments to designs accordingly and repeat the steps if necessary.
Lean UX Design Process
Result
Custom Shortlist Design System based on the Angular Material 8
Carefully designed states, instances, and variants for each components and design patterns
Consistent use of colors and typography aligning with the brand’s identity
Shared and handed off to developers for a master component list
Clearly defined rules, do’s and dont’s for adhering to set standards for both designers and developers
Impact
The implementation of the design system at Shortlist led to transformative outcomes, significantly enhancing the product development process.
The system brought about a 40% reduction in the time from design to development, greatly streamlining workflows. Additionally, it improved code reusability by 35%, reflecting the efficiency of the new design strategy.
One of the most notable achievements was the doubling of product release cycles, enabling Shortlist to introduce new features and improvements at an unprecedented rate.
The positive impacts were immediately evident in the first few quarters following implementation, with a noticeable reduction in QA efforts, underscoring the system's reliability. Furthermore, the ability to rapidly launch new MVPs (Minimum Viable Products) was greatly enhanced, driving faster growth across various product lines.
These developments not only improved operational efficiency at Shortlist but also better positioned them to meet market demands and adapt swiftly to changing business needs.
Conclusion and Learnings
Key learnings from this project include the importance of establishing a collaborative environment between designers and developers, which not only reduces redundancy in coding but also accelerates the development process. Adopting a Lean UX Design Process enabled rapid prototyping and testing, ensuring that user feedback was integral to the development cycle.
Credits
Austen Stranahan - COO (Shortlist)
Adhip Somanna - Senior Product Manager (Shortlist)
Pankaj Kaushik - Senior Product Designer (Shortlist)
Let's work together
Get in touch.
I'm currently available for new work on a freelance basis.
Feel free to reach out for your next design project.
Last Updated December 2023. Designed by Nikhil Thakkar
Let's work together
Get in touch.
I'm currently available for new work on a freelance basis.
Feel free to reach out for your next design project.
Last Updated December 2023. Designed by Nikhil Thakkar
Let's work together
Get in touch.
I'm currently available for new work on a freelance basis.
Feel free to reach out for your next design project.
Last Updated December 2023. Designed by Nikhil Thakkar