UI / UX Design
PHS Pre Built Component Designs
A new set of pre built, flexible website components designed in Figma for PHS’s CMS web builder, replacing reliance on hand coded elements. Each component is linked to a business goal and a CRO metric.
Year :
2026
Industry :
Workplace Services (B2B)
Client :
PHS Group
Project Duration :
Ongoing
Team:
Internal digital team, external development agency, and me as UI Designer
Problem :
The CMS web builder offered too few pre built components, and the ones that existed had little customisation, few layout variations, and no unified look. Teams filled the gaps by sourcing code in the free text editor to build components from scratch. The results often looked tacky, clashed with the rest of the site, and needed frontend coding knowledge to operate. This slowed page building, weakened brand consistency, and made the experience unpredictable for visitors.
Actions :
First page of the wishlist doc, detailing objectives and scope of work
Actions :
Challenge : A written wishlist full of overlap
The brief arrived as a written wishlist rather than a visual spec, which left a lot open to interpretation. Many requested components overlapped with existing ones, which caused confusion about what was genuinely new and what was a variation of something that already existed. I had to untangle that overlap, clarify the ask with the digital team, and decide where one flexible component with variants was better than several near duplicates. On top of the design work, I had to link every component to ROI and trackable CRO metrics, which meant thinking about measurement from the first sketch rather than after launch.
Result :
I translated the wishlist into a Figma component set with defined layout variations, customisation options, and dark and light modes, built on the existing brand and design system so the new components sit naturally beside the current site. Each component was documented with its purpose, its variants, and the metric it is expected to influence. The designs have been handed off to an external development agency and are being prepared for dev testing. The new library gives teams more customisation, more layout choice, more consistency, and better tooling than the free text editor approach it replaces.
Next Steps:
Support development and QA.
Review built components against the designs
Launch in the CMS.
Roll the components out to page builders and gather feedback.
Track and test.
Monitor the mapped metrics and A/B test component variants once live.
This is just a snapshot of the entire design process. Reach out for the full story!
More Projects
UI / UX Design
PHS Pre Built Component Designs
A new set of pre built, flexible website components designed in Figma for PHS’s CMS web builder, replacing reliance on hand coded elements. Each component is linked to a business goal and a CRO metric.
Year :
2026
Industry :
Workplace Services (B2B)
Client :
PHS Group
Project Duration :
Ongoing
Team:
Internal digital team, external development agency, and me as UI Designer
Problem :
The CMS web builder offered too few pre built components, and the ones that existed had little customisation, few layout variations, and no unified look. Teams filled the gaps by sourcing code in the free text editor to build components from scratch. The results often looked tacky, clashed with the rest of the site, and needed frontend coding knowledge to operate. This slowed page building, weakened brand consistency, and made the experience unpredictable for visitors.
Actions :
First page of the wishlist doc, detailing objectives and scope of work
Actions :
Challenge : A written wishlist full of overlap
The brief arrived as a written wishlist rather than a visual spec, which left a lot open to interpretation. Many requested components overlapped with existing ones, which caused confusion about what was genuinely new and what was a variation of something that already existed. I had to untangle that overlap, clarify the ask with the digital team, and decide where one flexible component with variants was better than several near duplicates. On top of the design work, I had to link every component to ROI and trackable CRO metrics, which meant thinking about measurement from the first sketch rather than after launch.
Result :
I translated the wishlist into a Figma component set with defined layout variations, customisation options, and dark and light modes, built on the existing brand and design system so the new components sit naturally beside the current site. Each component was documented with its purpose, its variants, and the metric it is expected to influence. The designs have been handed off to an external development agency and are being prepared for dev testing. The new library gives teams more customisation, more layout choice, more consistency, and better tooling than the free text editor approach it replaces.
Next Steps:
Support development and QA.
Review built components against the designs
Launch in the CMS.
Roll the components out to page builders and gather feedback.
Track and test.
Monitor the mapped metrics and A/B test component variants once live.
This is just a snapshot of the entire design process. Reach out for the full story!
More Projects
UI / UX Design
PHS Pre Built Component Designs
A new set of pre built, flexible website components designed in Figma for PHS’s CMS web builder, replacing reliance on hand coded elements. Each component is linked to a business goal and a CRO metric.
Year :
2026
Industry :
Workplace Services (B2B)
Client :
PHS Group
Project Duration :
Ongoing
Team:
Internal digital team, external development agency, and me as UI Designer
Problem :
The CMS web builder offered too few pre built components, and the ones that existed had little customisation, few layout variations, and no unified look. Teams filled the gaps by sourcing code in the free text editor to build components from scratch. The results often looked tacky, clashed with the rest of the site, and needed frontend coding knowledge to operate. This slowed page building, weakened brand consistency, and made the experience unpredictable for visitors.
Actions :
First page of the wishlist doc, detailing objectives and scope of work
Actions :
Challenge : A written wishlist full of overlap
The brief arrived as a written wishlist rather than a visual spec, which left a lot open to interpretation. Many requested components overlapped with existing ones, which caused confusion about what was genuinely new and what was a variation of something that already existed. I had to untangle that overlap, clarify the ask with the digital team, and decide where one flexible component with variants was better than several near duplicates. On top of the design work, I had to link every component to ROI and trackable CRO metrics, which meant thinking about measurement from the first sketch rather than after launch.
Result :
I translated the wishlist into a Figma component set with defined layout variations, customisation options, and dark and light modes, built on the existing brand and design system so the new components sit naturally beside the current site. Each component was documented with its purpose, its variants, and the metric it is expected to influence. The designs have been handed off to an external development agency and are being prepared for dev testing. The new library gives teams more customisation, more layout choice, more consistency, and better tooling than the free text editor approach it replaces.
Next Steps:
Support development and QA.
Review built components against the designs
Launch in the CMS.
Roll the components out to page builders and gather feedback.
Track and test.
Monitor the mapped metrics and A/B test component variants once live.
This is just a snapshot of the entire design process. Reach out for the full story!