Shopi
I worked as a freelance designer on this six-week project, leading the audit and restructuring of Shopi’s UI foundations across three apps. The goal was to create a more consistent and scalable design system that improved usability, reduced design and development guesswork, and supported future product growth.
Alongside defining the system, I also applied it to product screens to test it in real use and make sure the patterns were practical, flexible, and ready to use.
Design systems
Scalable UX
UI foundations
My role
Audited all components to identify inconsistencies and redundancy
Designed flexible, variant-based components
Built and documented the library with usage guidelines
Tested the system on a UI project to validate
Mentored a junior designer
Problem
Shopi had several apps, but no shared design system. As the product grew, this created inconsistency across screens, usability issues for users, and extra work for designers and engineers.
Solution
I audited the existing UI, defined foundational standards, organised reusable patterns, and created a structured component library with supporting guidance for future use.
Impact
This design system work replaced ad-hoc component building with a shared library. It reduced design and engineering effort on new features by giving teams a single source of truth. A year later, the client reached out about working together again.
Shopi
I worked as a freelance designer on this six-week project, leading the audit and restructuring of Shopi’s UI foundations across three apps. The goal was to create a more consistent and scalable design system that improved usability, reduced design and development guesswork, and supported future product growth.
Alongside defining the system, I also applied it to product screens to test it in real use and make sure the patterns were practical, flexible, and ready to use.
Design systems
Scalable UX
UI foundations
My role
Audited all components to identify inconsistencies and redundancy
Designed flexible, variant-based components
Built and documented the library with usage guidelines
Tested the system on a UI project to validate
Mentored a junior designer
Problem
Shopi had several apps, but no shared design system. As the product grew, this created inconsistency across screens, usability issues for users, and extra work for designers and engineers.
Solution
I audited the existing UI, defined foundational standards, organised reusable patterns, and created a structured component library with supporting guidance for future use.
Impact
This design system work replaced ad-hoc component building with a shared library. It reduced design and engineering effort on new features by giving teams a single source of truth. A year later, the client reached out about working together again.
Shopi
I worked as a freelance designer on this six-week project, leading the audit and restructuring of Shopi’s UI foundations across three apps. The goal was to create a more consistent and scalable design system that improved usability, reduced design and development guesswork, and supported future product growth.
Alongside defining the system, I also applied it to product screens to test it in real use and make sure the patterns were practical, flexible, and ready to use.
Design systems
Scalable UX
UI foundations
My role
Audited all components to identify inconsistencies and redundancy
Designed flexible, variant-based components
Built and documented the library with usage guidelines
Tested the system on a UI project to validate
Mentored a junior designer
Problem
Shopi had several apps, but no shared design system. As the product grew, this created inconsistency across screens, usability issues for users, and extra work for designers and engineers.
Solution
I audited the existing UI, defined foundational standards, organised reusable patterns, and created a structured component library with supporting guidance for future use.
Impact
This design system work replaced ad-hoc component building with a shared library. It reduced design and engineering effort on new features by giving teams a single source of truth. A year later, the client reached out about working together again.
From chaos to coherence
Developers lacked clarity on existing features, UI patterns, and behaviours.
Without a shared system, components were often recreated from scratch, which led to inconsistency, slower implementation, and a less cohesive product experience. With three separate apps and many pages, the problem became harder to manage over time.
From chaos to coherence
Developers lacked clarity on existing features, UI patterns, and behaviours.
Without a shared system, components were often recreated from scratch, which led to inconsistency, slower implementation, and a less cohesive product experience. With three separate apps and many pages, the problem became harder to manage over time.
From chaos to coherence
Developers lacked clarity on existing features, UI patterns, and behaviours.
Without a shared system, components were often recreated from scratch, which led to inconsistency, slower implementation, and a less cohesive product experience. With three separate apps and many pages, the problem became harder to manage over time.
6-week plan
The goal was clear: I needed to set up a plan to ensure consistency in Shopi, enhance its professional appearance, and improve usability.
Here's the plan I followed:
6-week plan
The goal was clear: I needed to set up a plan to ensure consistency in Shopi, enhance its professional appearance, and improve usability.
Here's the plan I followed:
6-week plan
The goal was clear: I needed to set up a plan to ensure consistency in Shopi, enhance its professional appearance, and improve usability.
Here's the plan I followed:
Step 1: UI Audit
Bringing everything together
As a first step, I audited the existing UI by bringing components and screens into one place. Looking at everything together made it easier to spot repeated issues, inconsistencies, and gaps across the apps.
This audit helped me identify where the biggest problems were and decide which areas needed standardisation first. It also created a clear starting point for the rest of the system work.
Step 1: UI Audit
Bringing everything together
As a first step, I audited the existing UI by bringing components and screens into one place. Looking at everything together made it easier to spot repeated issues, inconsistencies, and gaps across the apps.
This audit helped me identify where the biggest problems were and decide which areas needed standardisation first. It also created a clear starting point for the rest of the system work.
Step 1: UI Audit
Bringing everything together
As a first step, I audited the existing UI by bringing components and screens into one place. Looking at everything together made it easier to spot repeated issues, inconsistencies, and gaps across the apps.
This audit helped me identify where the biggest problems were and decide which areas needed standardisation first. It also created a clear starting point for the rest of the system work.
Step 2: Consistency for Basics
Shopi already had some foundations, such as primary colours and font styles, but the UI still felt inconsistent across apps, especially in background colours, typography, and spacing.
I started by standardising the basics:
Colours: I categorised colours based on their usage.
Typography: I based font sizes on iOS standards to establish consistency across pages.
Spacing: I implemented a 2/4 spacing system across all screens.
Step 2: Consistency for Basics
Shopi already had some foundations, such as primary colours and font styles, but the UI still felt inconsistent across apps, especially in background colours, typography, and spacing.
I started by standardising the basics:
Colours: I categorised colours based on their usage.
Typography: I based font sizes on iOS standards to establish consistency across pages.
Spacing: I implemented a 2/4 spacing system across all screens.
Step 2: Consistency for Basics
Shopi already had some foundations, such as primary colours and font styles, but the UI still felt inconsistent across apps, especially in background colours, typography, and spacing.
I started by standardising the basics:
Colours: I categorised colours based on their usage.
Typography: I based font sizes on iOS standards to establish consistency across pages.
Spacing: I implemented a 2/4 spacing system across all screens.
Step 3.1: UI Patterns
After addressing the basics, I focused on atoms and molecules.
I grouped interface elements into key categories such as structure, lists, actions, forms, and icons, then organised related patterns within each group.
This helped turn scattered UI decisions into a clearer system and made it easier to distinguish which components needed strict consistency and which needed more flexibility.
Step 3.1: UI Patterns
After addressing the basics, I focused on atoms and molecules.
I grouped interface elements into key categories such as structure, lists, actions, forms, and icons, then organised related patterns within each group.
This helped turn scattered UI decisions into a clearer system and made it easier to distinguish which components needed strict consistency and which needed more flexibility.
Step 3.1: UI Patterns
After addressing the basics, I focused on atoms and molecules.
I grouped interface elements into key categories such as structure, lists, actions, forms, and icons, then organised related patterns within each group.
This helped turn scattered UI decisions into a clearer system and made it easier to distinguish which components needed strict consistency and which needed more flexibility.
Step 3.2: Flexible Structure
In the final stage of the system work, I focused on making components as adaptable as possible.
Using variables and component structure, I created a flexible setup that could support different use cases without losing consistency. It was important that the system was easy for others to understand and extend. This made the library more usable in practice, not only well organised in theory.
Step 3.2: Flexible Structure
In the final stage of the system work, I focused on making components as adaptable as possible.
Using variables and component structure, I created a flexible setup that could support different use cases without losing consistency. It was important that the system was easy for others to understand and extend. This made the library more usable in practice, not only well organised in theory.
Step 3.2: Flexible Structure
In the final stage of the system work, I focused on making components as adaptable as possible.
Using variables and component structure, I created a flexible setup that could support different use cases without losing consistency. It was important that the system was easy for others to understand and extend. This made the library more usable in practice, not only well organised in theory.
Step 4: Test the system
How to determine if a design system is effective?
During my time, we had a UI project, which I saw as an opportunity to test our design system. With the skeleton prepared, I prioritised creating high-fidelity designs. This enabled me to evaluate the components' effectiveness in balancing consistency and flexibility.
Step 4: Test the system
How to determine if a design system is effective?
During my time, we had a UI project, which I saw as an opportunity to test our design system. With the skeleton prepared, I prioritised creating high-fidelity designs. This enabled me to evaluate the components' effectiveness in balancing consistency and flexibility.
Step 4: Test the system
How to determine if a design system is effective?
During my time, we had a UI project, which I saw as an opportunity to test our design system. With the skeleton prepared, I prioritised creating high-fidelity designs. This enabled me to evaluate the components' effectiveness in balancing consistency and flexibility.
Reflection
This project taught me that the hardest part of building a design system is not creating components, but making the right decisions. Auditing the existing UI meant working through inconsistent patterns across multiple apps and deciding what to keep, what to standardise, and what to remove. Those choices shaped everything that followed.
Mentoring a graduate designer through the project also helped me grow. It taught me to give clearer feedback without taking over.
If I revisited the project, I would build accessibility standards into the system from the start rather than treating them as something to improve later.
Reflection
This project taught me that the hardest part of building a design system is not creating components, but making the right decisions. Auditing the existing UI meant working through inconsistent patterns across multiple apps and deciding what to keep, what to standardise, and what to remove. Those choices shaped everything that followed.
Mentoring a graduate designer through the project also helped me grow. It taught me to give clearer feedback without taking over.
If I revisited the project, I would build accessibility standards into the system from the start rather than treating them as something to improve later.
Reflection
This project taught me that the hardest part of building a design system is not creating components, but making the right decisions. Auditing the existing UI meant working through inconsistent patterns across multiple apps and deciding what to keep, what to standardise, and what to remove. Those choices shaped everything that followed.
Mentoring a graduate designer through the project also helped me grow. It taught me to give clearer feedback without taking over.
If I revisited the project, I would build accessibility standards into the system from the start rather than treating them as something to improve later.
Read next
Read next
Read next