Flex Design System
I redefined and documented a new design system for the Indeed Flex app.
Impact
New design process and increased cross-functional teams alignment
Improvement in delivery times
Visual design quality and design consistecy increase
Scope
Redefine how the UI is documented and used to improve the product and process.
Team
Lead UX Designer & Product Owner (my role)
an Android Engineer
an iOS Engineer
and collaboration with Web Engineers and an illustrator.
Timeline
1 year (Dec 2023-Dec 2024).Work done in parallel to other projects.
Platforms
Initially to be focused only on Mobile Native (Android/iOS). Extended to Mobile Web and Desktop platforms to support UI alignment.
Tools
Figma (auto layouts & variables), Jira.
Flex Design System
I redefined and documented a new design system for the Indeed Flex app.
Impact
New design process and increased cross-functional teams alignment
Improvement in delivery times
Visual design quality and design consistecy increase
Scope
Redefine how the UI is documented and used to improve the product and process.
Team
Lead UX Designer & Product Owner (my role)
an Android Engineer
an iOS Engineer
and collaboration with Web Engineers and an illustrator.
Timeline
1 year (Dec 2023-Dec 2024).Work done in parallel to other projects.
Platforms
Initially to be focused only on Mobile Native (Android/iOS). Extended to Mobile Web and Desktop platforms to support UI alignment.
Tools
Figma (auto layouts & variables), Jira.
Flex Design System
I redefined and documented a new design system for the Indeed Flex app.
Impact
New design process and increased cross-functional teams alignment
Improvement in delivery times
Visual design quality and design consistecy increase
Scope
Redefine how the UI is documented and used to improve the product and process.
Team
Lead UX Designer & Product Owner (my role)
an Android Engineer
an iOS Engineer
and collaboration with Web Engineers and an illustrator.
Timeline
1 year (Dec 2023-Dec 2024).Work done in parallel to other projects.
Platforms
Initially to be focused only on Mobile Native (Android/iOS). Extended to Mobile Web and Desktop platforms to support UI alignment.
Tools
Figma (auto layouts & variables), Jira.
The Flex Design System was born in the need of creating UI alignment in the product and teams. I led the initiative by fixing inconsistencies in the product and reshaping the UI pattern libraries.
The Flex Design System was born in the need of creating UI alignment in the product and teams. I led the initiative by fixing inconsistencies in the product and reshaping the UI pattern libraries.
The Flex Design System was born in the need of creating UI alignment in the product and teams. I led the initiative by fixing inconsistencies in the product and reshaping the UI pattern libraries.
Joining the Flex design team felt like stepping into an ongoing debate—“Which button style should we use?”, “Does this layout follow the guidelines?”, “Are we even aligned on what the guidelines are?” These discussions often stretched far longer than they needed to, yet still left teams unsure of the "right" answers.
Each team seemed to have their own approach, and while creativity was abundant, the lack of consistency was palpable. UI components were being reinvented constantly, creating confusion, inefficiencies, and even frustration across cross-functional teams.
Joining the Flex design team felt like stepping into an ongoing debate—“Which button style should we use?”, “Does this layout follow the guidelines?”, “Are we even aligned on what the guidelines are?” These discussions often stretched far longer than they needed to, yet still left teams unsure of the "right" answers.
Each team seemed to have their own approach, and while creativity was abundant, the lack of consistency was palpable. UI components were being reinvented constantly, creating confusion, inefficiencies, and even frustration across cross-functional teams.
Joining the Flex design team felt like stepping into an ongoing debate—“Which button style should we use?”, “Does this layout follow the guidelines?”, “Are we even aligned on what the guidelines are?” These discussions often stretched far longer than they needed to, yet still left teams unsure of the "right" answers.
Each team seemed to have their own approach, and while creativity was abundant, the lack of consistency was palpable. UI components were being reinvented constantly, creating confusion, inefficiencies, and even frustration across cross-functional teams.
For the entire team, it meant more back-and-forth, as designs felt like reinventing the wheel and developers coding new custom components every time.
For the entire team, it meant more back-and-forth, as designs felt like reinventing the wheel and developers coding new custom components every time.
For the entire team, it meant more back-and-forth, as designs felt like reinventing the wheel and developers coding new custom components every time.
Designing in a jungle of creativity and endless iterations
I was feeling that we were losing precious time and energy solving the same problems over and over again. I started diving into our existing tools and libraries, hoping to understand something. Yet, the design system we already had in place felt more like a document gathering dust than a living, breathing resource.
Designing in a jungle of creativity and endless iterations
I was feeling that we were losing precious time and energy solving the same problems over and over again. I started diving into our existing tools and libraries, hoping to understand something. Yet, the design system we already had in place felt more like a document gathering dust than a living, breathing resource.
Designing in a jungle of creativity and endless iterations
I was feeling that we were losing precious time and energy solving the same problems over and over again. I started diving into our existing tools and libraries, hoping to understand something. Yet, the design system we already had in place felt more like a document gathering dust than a living, breathing resource.
There was a feeling of not being proud of the product we were creating. It was necessary to clear up the confusion and define a design foundation that we could all stand on.
There was a feeling of not being proud of the product we were creating. It was necessary to clear up the confusion and define a design foundation that we could all stand on.
There was a feeling of not being proud of the product we were creating. It was necessary to clear up the confusion and define a design foundation that we could all stand on.
Process
Process
Process
Process
Process
Discover
Context
Indeed Flex (formerly Syft) connects jobseekers and employers on a flexible recruitment platform, offering instant access to roles in industries like hospitality, retail, and beyond. While acquired by Indeed in 2018, Indeed Flex continued to operate with its own independent structure and culture.
Discover
Context
Indeed Flex (formerly Syft) connects jobseekers and employers on a flexible recruitment platform, offering instant access to roles in industries like hospitality, retail, and beyond. While acquired by Indeed in 2018, Indeed Flex continued to operate with its own independent structure and culture.
Discover
Context
Indeed Flex (formerly Syft) connects jobseekers and employers on a flexible recruitment platform, offering instant access to roles in industries like hospitality, retail, and beyond. While acquired by Indeed in 2018, Indeed Flex continued to operate with its own independent structure and culture.
Rapid development of Flex’s products at the beginning lacked a scalable design strategy. Teams worked in silos under tight deadlines, leading to inconsistent UIs
Rapid development of Flex’s products at the beginning lacked a scalable design strategy. Teams worked in silos under tight deadlines, leading to inconsistent UIs
Rapid development of Flex’s products at the beginning lacked a scalable design strategy. Teams worked in silos under tight deadlines, leading to inconsistent UIs
Challenges
The acquisition by Indeed introduced new opportunities, but most of legacy UI and code was custom. Talking to designers, engineers and product owners, provided additional insights about the challenges that we were facing.
Missing Component Standards
The native mobile app co-lived with some screens implemented as WebView. This brought confusion for implementation since designs didn’t use the right components, but there wasn’t a notion of the right ones either.
Misaligned Libraries
Existing Figma libraries didn’t match coded components. In other cases the implemented UI wasn’t documented. The lack of a source of truth brought new custom UIs.
Platform Parity Gap
Lack of uniformity between the Android and iOS versions of the app. In some cases the UIs looked totally different between platforms.
Limited Governance
No dedicated ownership or clear guidelines for maintaining and scaling the system.
Disjointed Tokens
The token structures for native mobile, WebView, and web platforms were different, so a common semantic token convention was missing.
Cultural resistance
Some designers and product owners resisted change, preferring bespoke solutions over a unified system. Leadership didn’t understand the value of a Design System either.
Challenges
The acquisition by Indeed introduced new opportunities, but most of legacy UI and code was custom. Talking to designers, engineers and product owners, provided additional insights about the challenges that we were facing.
Missing Component Standards
The native mobile app co-lived with some screens implemented as WebView. This brought confusion for implementation since designs didn’t use the right components, but there wasn’t a notion of the right ones either.
Misaligned Libraries
Existing Figma libraries didn’t match coded components. In other cases the implemented UI wasn’t documented. The lack of a source of truth brought new custom UIs.
Platform Parity Gap
Lack of uniformity between the Android and iOS versions of the app. In some cases the UIs looked totally different between platforms.
Limited Governance
No dedicated ownership or clear guidelines for maintaining and scaling the system.
Disjointed Tokens
The token structures for native mobile, WebView, and web platforms were different, so a common semantic token convention was missing.
Cultural resistance
Some designers and product owners resisted change, preferring bespoke solutions over a unified system. Leadership didn’t understand the value of a Design System either.
Challenges
The acquisition by Indeed introduced new opportunities, but most of legacy UI and code was custom. Talking to designers, engineers and product owners, provided additional insights about the challenges that we were facing.
Missing Component Standards
The native mobile app co-lived with some screens implemented as WebView. This brought confusion for implementation since designs didn’t use the right components, but there wasn’t a notion of the right ones either.
Misaligned Libraries
Existing Figma libraries didn’t match coded components. In other cases the implemented UI wasn’t documented. The lack of a source of truth brought new custom UIs.
Platform Parity Gap
Lack of uniformity between the Android and iOS versions of the app. In some cases the UIs looked totally different between platforms.
Limited Governance
No dedicated ownership or clear guidelines for maintaining and scaling the system.
Disjointed Tokens
The token structures for native mobile, WebView, and web platforms were different, so a common semantic token convention was missing.
Cultural resistance
Some designers and product owners resisted change, preferring bespoke solutions over a unified system. Leadership didn’t understand the value of a Design System either.
UI audit
I initiated an audit in the UI to gather all inconsistencies and this way demonstrate the need of unification. I partnered with the staff engineers to understand the complexities.
These findings helped to build the foundation for rebuilding the system.
UI audit
I initiated an audit in the UI to gather all inconsistencies and this way demonstrate the need of unification. I partnered with the staff engineers to understand the complexities.
These findings helped to build the foundation for rebuilding the system.
UI audit
I initiated an audit in the UI to gather all inconsistencies and this way demonstrate the need of unification. I partnered with the staff engineers to understand the complexities.
These findings helped to build the foundation for rebuilding the system.
I started to run weekly meetings with the staff engineers and invited designers to join to prioritise tasks and fixes. The first tasks consisted in fixing font issues and colour inconsistencies.
The engineers picked issues in the UI, and I helped to find the root cause. From this work, I proposed to fix some colour misalignments that existed between native and WebView screens.
I started to run weekly meetings with the staff engineers and invited designers to join to prioritise tasks and fixes. The first tasks consisted in fixing font issues and colour inconsistencies.
The engineers picked issues in the UI, and I helped to find the root cause. From this work, I proposed to fix some colour misalignments that existed between native and WebView screens.
I started to run weekly meetings with the staff engineers and invited designers to join to prioritise tasks and fixes. The first tasks consisted in fixing font issues and colour inconsistencies.
The engineers picked issues in the UI, and I helped to find the root cause. From this work, I proposed to fix some colour misalignments that existed between native and WebView screens.
Define
Having a deeper understanding of how things were structured technically, helped me to define how the different libraries would need to be connected.
In this process I had to reach agreements with the each platform engineer to have a strategic plan that solved the issues.
In this process I also learned, about tokens, and that the WebView screens that co-lived with the native ones used a different token structure (Indeed's).
For this reason I articulated the libraries in a way that everything made sense.
Define
Having a deeper understanding of how things were structured technically, helped me to define how the different libraries would need to be connected.
In this process I had to reach agreements with the each platform engineer to have a strategic plan that solved the issues.
In this process I also learned, about tokens, and that the WebView screens that co-lived with the native ones used a different token structure (Indeed's).
For this reason I articulated the libraries in a way that everything made sense.
Define
Having a deeper understanding of how things were structured technically, helped me to define how the different libraries would need to be connected.
In this process I had to reach agreements with the each platform engineer to have a strategic plan that solved the issues.
In this process I also learned, about tokens, and that the WebView screens that co-lived with the native ones used a different token structure (Indeed's).
For this reason I articulated the libraries in a way that everything made sense.
Jira design tickets
Before starting to produce the UI components in Figma, I created an Excel spreadsheet to list the most urgent components to have. In collaboration with the design team, we prioritised the list.
I created a Jira board to have a backlog of tasks and have ticket numbers to attach as reference in the Figma branches for its identification.This way, it was easier to identify and share tasks, see what was missing and what was done.
Staff engineers created their own tickets to implement the improvements in the app.
Jira design tickets
Before starting to produce the UI components in Figma, I created an Excel spreadsheet to list the most urgent components to have. In collaboration with the design team, we prioritised the list.
I created a Jira board to have a backlog of tasks and have ticket numbers to attach as reference in the Figma branches for its identification.This way, it was easier to identify and share tasks, see what was missing and what was done.
Staff engineers created their own tickets to implement the improvements in the app.
Jira design tickets
Before starting to produce the UI components in Figma, I created an Excel spreadsheet to list the most urgent components to have. In collaboration with the design team, we prioritised the list.
I created a Jira board to have a backlog of tasks and have ticket numbers to attach as reference in the Figma branches for its identification.This way, it was easier to identify and share tasks, see what was missing and what was done.
Staff engineers created their own tickets to implement the improvements in the app.
Make
Applying the atomic design principles, I started putting in order the design primitives. That was documenting our global colours, fonts, spacings, etc. To make things work smoothly, I unified the colour tokens using the same semantic definition done by Indeed.
Since in our product we had WebView screens that used Indeed token system, and it was already intuitive and well structured, I proposed to use the same structure to align systems.
Make
Applying the atomic design principles, I started putting in order the design primitives. That was documenting our global colours, fonts, spacings, etc. To make things work smoothly, I unified the colour tokens using the same semantic definition done by Indeed.
Since in our product we had WebView screens that used Indeed token system, and it was already intuitive and well structured, I proposed to use the same structure to align systems.
Make
Applying the atomic design principles, I started putting in order the design primitives. That was documenting our global colours, fonts, spacings, etc. To make things work smoothly, I unified the colour tokens using the same semantic definition done by Indeed.
Since in our product we had WebView screens that used Indeed token system, and it was already intuitive and well structured, I proposed to use the same structure to align systems.
The Figma component library
Once I defined the most basic components like buttons, icons, tags, checkboxes, radios, etc. I continued with the more complex components from our priority list.
One of the greatest early contributions from the Design System team was introducing the ‘List Item’ and ‘Cards’ components, which significantly improved some screens.
During the UI audit we found a great amount of variations for similar UI that could be reduced to one of these components. The change was noticeable in some screens like Profile, Work Preferences, Settings and Support.
The Figma component library
Once I defined the most basic components like buttons, icons, tags, checkboxes, radios, etc. I continued with the more complex components from our priority list.
One of the greatest early contributions from the Design System team was introducing the ‘List Item’ and ‘Cards’ components, which significantly improved some screens.
During the UI audit we found a great amount of variations for similar UI that could be reduced to one of these components. The change was noticeable in some screens like Profile, Work Preferences, Settings and Support.
The Figma component library
Once I defined the most basic components like buttons, icons, tags, checkboxes, radios, etc. I continued with the more complex components from our priority list.
One of the greatest early contributions from the Design System team was introducing the ‘List Item’ and ‘Cards’ components, which significantly improved some screens.
During the UI audit we found a great amount of variations for similar UI that could be reduced to one of these components. The change was noticeable in some screens like Profile, Work Preferences, Settings and Support.
Test
During the process of component creation I asked for feedback both to designers and developers. The intent was to find the right way of structuring the Figma libraries to organise Android and iOS components for a better usability.
This helped:
to verify the structure of the system
to refine both the usability of the components and fixing flaws.
define a process to identify the need of new components and contributing to the system
Test
During the process of component creation I asked for feedback both to designers and developers. The intent was to find the right way of structuring the Figma libraries to organise Android and iOS components for a better usability.
This helped:
to verify the structure of the system
to refine both the usability of the components and fixing flaws.
define a process to identify the need of new components and contributing to the system
Test
During the process of component creation I asked for feedback both to designers and developers. The intent was to find the right way of structuring the Figma libraries to organise Android and iOS components for a better usability.
This helped:
to verify the structure of the system
to refine both the usability of the components and fixing flaws.
define a process to identify the need of new components and contributing to the system
Implement
When I partnered with the staff engineers to align Figma and code, I suggested improvements to existent components and refined other UIs to align them with production.
Staff engineers understood many of the inconsistencies present in the app, so I supported to make those improvements ‘tangible’. While they helped to flag the issues and prioritise strategically the changes, I created the components in Figma and shared the updates with the design team and stakeholders.
This way we improved the live app with incremental small gains, while other teams started to reach out more for guidance using the right components and libraries.
Implement
When I partnered with the staff engineers to align Figma and code, I suggested improvements to existent components and refined other UIs to align them with production.
Staff engineers understood many of the inconsistencies present in the app, so I supported to make those improvements ‘tangible’. While they helped to flag the issues and prioritise strategically the changes, I created the components in Figma and shared the updates with the design team and stakeholders.
This way we improved the live app with incremental small gains, while other teams started to reach out more for guidance using the right components and libraries.
Implement
When I partnered with the staff engineers to align Figma and code, I suggested improvements to existent components and refined other UIs to align them with production.
Staff engineers understood many of the inconsistencies present in the app, so I supported to make those improvements ‘tangible’. While they helped to flag the issues and prioritise strategically the changes, I created the components in Figma and shared the updates with the design team and stakeholders.
This way we improved the live app with incremental small gains, while other teams started to reach out more for guidance using the right components and libraries.
Illustration library
Illustrations had been a huge inconsistency problem in the Flex app. I worked with marketing and an illustrator in the team to find a new style.
When the new style was approved by different stakeholders, I partnered with the engineers to replace the old ones.
This way I created a new illustration library to use in Figma as part of our design system.
In addition, I also defined a library of assets to build illustrations faster.
I documented some “building shapes” of the illustrations produced in a sub library to create new assets without having to depend every time of an illustrator.
This effort brought a radical visual improvement and alignment in the app that was celebrated by many key stakeholders.
Illustration library
Illustrations had been a huge inconsistency problem in the Flex app. I worked with marketing and an illustrator in the team to find a new style.
When the new style was approved by different stakeholders, I partnered with the engineers to replace the old ones.
This way I created a new illustration library to use in Figma as part of our design system.
In addition, I also defined a library of assets to build illustrations faster.
I documented some “building shapes” of the illustrations produced in a sub library to create new assets without having to depend every time of an illustrator.
This effort brought a radical visual improvement and alignment in the app that was celebrated by many key stakeholders.
Illustration library
Illustrations had been a huge inconsistency problem in the Flex app. I worked with marketing and an illustrator in the team to find a new style.
When the new style was approved by different stakeholders, I partnered with the engineers to replace the old ones.
This way I created a new illustration library to use in Figma as part of our design system.
In addition, I also defined a library of assets to build illustrations faster.
I documented some “building shapes” of the illustrations produced in a sub library to create new assets without having to depend every time of an illustrator.
This effort brought a radical visual improvement and alignment in the app that was celebrated by many key stakeholders.
Deliver
The work produced in this project, besides the UI, was provided in the form of updates and guidelines to foster a new way of work aligned to we had in code.
I provided the updates in a dedicated Slack channel in posts with links, quick video demos/walkthroughs to explain usage and in meetings with the design team. In terms of guidelines, I provided:
Guidelines of usage of the system
This included a design system structure diagram, how to activate the right libraries and understanding component differences in our ecosystem.
Guidelines of components usage
Documented guidelines of use of components to keep certain harmony and consistency in the designs, including DOs and DONTs.
Guidelines of how to contribute to the system
Drafted a process to contribute to the system, to foster collaboration and scalability.
Guidelines of good practices
Transmitted desired good practices of usage of the system, like avoiding detaching components, criteria to propose new patterns and cross-teams collaboration.
Deliver
The work produced in this project, besides the UI, was provided in the form of updates and guidelines to foster a new way of work aligned to we had in code.
I provided the updates in a dedicated Slack channel in posts with links, quick video demos/walkthroughs to explain usage and in meetings with the design team. In terms of guidelines, I provided:
Guidelines of usage of the system
This included a design system structure diagram, how to activate the right libraries and understanding component differences in our ecosystem.
Guidelines of components usage
Documented guidelines of use of components to keep certain harmony and consistency in the designs, including DOs and DONTs.
Guidelines of how to contribute to the system
Drafted a process to contribute to the system, to foster collaboration and scalability.
Guidelines of good practices
Transmitted desired good practices of usage of the system, like avoiding detaching components, criteria to propose new patterns and cross-teams collaboration.
Deliver
The work produced in this project, besides the UI, was provided in the form of updates and guidelines to foster a new way of work aligned to we had in code.
I provided the updates in a dedicated Slack channel in posts with links, quick video demos/walkthroughs to explain usage and in meetings with the design team. In terms of guidelines, I provided:
Guidelines of usage of the system
This included a design system structure diagram, how to activate the right libraries and understanding component differences in our ecosystem.
Guidelines of components usage
Documented guidelines of use of components to keep certain harmony and consistency in the designs, including DOs and DONTs.
Guidelines of how to contribute to the system
Drafted a process to contribute to the system, to foster collaboration and scalability.
Guidelines of good practices
Transmitted desired good practices of usage of the system, like avoiding detaching components, criteria to propose new patterns and cross-teams collaboration.
I also provided guidance to my colleagues and other stakeholders for their respective projects on using the design system. I did this in 1-1 meetings, over Slack, or by providing feedback, suggestions and design corrections in Figma.
I also provided guidance to my colleagues and other stakeholders for their respective projects on using the design system. I did this in 1-1 meetings, over Slack, or by providing feedback, suggestions and design corrections in Figma.
Next steps
This was a very enriching project with many interesting challenges that really tested me. Thanks to the support of my teammates and colleagues, we improved the overall look and feel of the product and the process.
The different teams started working more aware of the importance of a design system, and collaborating more.
However, there are still things to improve to take the design system to the next level. While the support from management is remarkable, there are organisational things that could be done better to encourage more collaboration and greater adoption of the system.
Moving forward is needed:
More official direction of a more rigorous design process to avoid unwanted design practices still happening at a low scale (i.e. building fast without using design system components).
Processes that ensure design quality before development.
More resources to have all UI usage documented and synchronised.
A documentation site, like Zeroheight.
Fixing remaining consistencies in the app.
Defining dark mode using Figma theme variables.
Next steps
This was a very enriching project with many interesting challenges that really tested me. Thanks to the support of my teammates and colleagues, we improved the overall look and feel of the product and the process.
The different teams started working more aware of the importance of a design system, and collaborating more.
However, there are still things to improve to take the design system to the next level. While the support from management is remarkable, there are organisational things that could be done better to encourage more collaboration and greater adoption of the system.
Moving forward is needed:
More official direction of a more rigorous design process to avoid unwanted design practices still happening at a low scale (i.e. building fast without using design system components).
Processes that ensure design quality before development.
More resources to have all UI usage documented and synchronised.
A documentation site, like Zeroheight.
Fixing remaining consistencies in the app.
Defining dark mode using Figma theme variables.
Next steps
This was a very enriching project with many interesting challenges that really tested me. Thanks to the support of my teammates and colleagues, we improved the overall look and feel of the product and the process.
The different teams started working more aware of the importance of a design system, and collaborating more.
However, there are still things to improve to take the design system to the next level. While the support from management is remarkable, there are organisational things that could be done better to encourage more collaboration and greater adoption of the system.
Moving forward is needed:
More official direction of a more rigorous design process to avoid unwanted design practices still happening at a low scale (i.e. building fast without using design system components).
Processes that ensure design quality before development.
More resources to have all UI usage documented and synchronised.
A documentation site, like Zeroheight.
Fixing remaining consistencies in the app.
Defining dark mode using Figma theme variables.
Felipe MQ
Senior UX Designer
Felipe MQ
Senior UX Designer
Felipe MQ
Senior UX Designer
Projects
Get in touch
If you think we could be a good fit working together, connect!