Stadium Goods Design System
Duration
4 weeks
Client
Farfetch
Category
E-commerce
Context
During my time at Stadium Goods, a surge in requests within the product backlog became apparent because there was no previous designer dedicated to managing these requests for Farfetch. This situation led to the identification of inefficiencies stemming from decentralized design practices. Personal repositories, a lack of version control, and the absence of a unified brand identity highlighted the need for a deliberate and strategic redesign.
At this point, my goals were straightforward:
Update the outdated brand to create a cohesive and modern visual identity in line with current trends.
Introduce a centralized repository to improve collaboration and streamline version control, addressing the encountered inefficiencies.
Implement master pages to standardize screen creation, reducing redundancy and enhancing the efficiency of the design process.
Establish a comprehensive design system to provide a structured framework for a consistent and user-centric experience, addressing immediate concerns and setting the foundation for long-term design coherence and efficiency.
🎯 Design Audit
To achieve the outlined goals, I initiated the process by conducting a comprehensive design audit. This involved identifying disparities and pain points. Close collaboration with stakeholders was crucial to ensuring that the redesign aligned seamlessly with the brand's evolution.
The key stakeholders involved in this endeavor were:
SG's Project Manager
SG's Director of Branding at Stadium Goods
SG's Director of Digital Marketing
SG's Development Team
The primary pain points identified during this audit were as follows:
Typography Variations: There were too many variations of typography, leading to inconsistencies in the visual language.
Undocumented Components: Components lacked proper documentation for the technical team, creating challenges in the implementation process.
Redundant Components: Similar-looking components added unnecessary workload for the development team without serving an essential purpose.
Communication Challenges: Difficulty in communication arose due to multiple versions of the same screens, making it challenging to track and relay changes effectively.
Figma Files Structure: Figma files were built with screenshots instead of utilizing components, hindering the efficiency of the design process and collaboration.
Lack of Synchronization: Changes made within the development stage were not consistently reflected in Figma, leading to discrepancies between the design and implementation.
Dispersed File Locations: Files were spread across different environments, contributing to a lack of centralized control and making it difficult to manage and track design assets.
🎯 Design System Basis
To address the issues identified during the audit, I established a centralized repository by setting up a central repository using Figma's version control tools to provide a structured environment for collaboration and version management. Then, I transferred design elements to the new repository, ensuring streamlined collaboration and centralized control over assets.
This is how I organized the system:
Foundation
The initial phase focused on establishing the Foundation, encompassing documentation and assets like the Logo, Typography, Iconography, and general Layouts. While each type of element had its designated page inside Figma's file, a concerted effort was made to bring them together for a more cohesive and illustrative representation.
Navigation
The second part focused on navigation, covering both app and web interfaces, and included components like headers and footers.
Components
The third part includes documentation for various components such as buttons, fonts, hero panels, panels, product filters, product size grid, loading states, product thumbnails, promoblocks, selections, tables, and tabs.
🎯 Master Pages Integration
After implementing the foundation of the design system, I introduced master pages to standardize the process of screen creation, reducing redundancy and promoting a consistent design language. Additionally, I conducted training sessions to familiarize designers with the new approach of master pages, ensuring a smooth transition and facilitating efficient usage.
🎯 Results
In conclusion, I collaborated closely with development teams to seamlessly integrate redesigned components into the existing codebase, fostering a unified and cohesive user experience. Simultaneously, I structured a design system update process while contributing to the development of new features within the Stadium Goods Website. These strategic actions led to significant outcomes, including the achievement of a unified and modern visual identity, streamlined design processes resulting in reduced implementation time, improved collaboration facilitated by a centralized asset repository, and an elevated user experience through the consistent implementation of design elements.
Stadium Goods Design System
Duration
4 weeks
Client
Farfetch
Category
E-commerce
Context
During my time at Stadium Goods, a surge in requests within the product backlog became apparent because there was no previous designer dedicated to managing these requests for Farfetch. This situation led to the identification of inefficiencies stemming from decentralized design practices. Personal repositories, a lack of version control, and the absence of a unified brand identity highlighted the need for a deliberate and strategic redesign.
At this point, my goals were straightforward:
Update the outdated brand to create a cohesive and modern visual identity in line with current trends.
Introduce a centralized repository to improve collaboration and streamline version control, addressing the encountered inefficiencies.
Implement master pages to standardize screen creation, reducing redundancy and enhancing the efficiency of the design process.
Establish a comprehensive design system to provide a structured framework for a consistent and user-centric experience, addressing immediate concerns and setting the foundation for long-term design coherence and efficiency.
🎯 Design Audit
To achieve the outlined goals, I initiated the process by conducting a comprehensive design audit. This involved identifying disparities and pain points. Close collaboration with stakeholders was crucial to ensuring that the redesign aligned seamlessly with the brand's evolution.
The key stakeholders involved in this endeavor were:
SG's Project Manager
SG's Director of Branding at Stadium Goods
SG's Director of Digital Marketing
SG's Development Team
The primary pain points identified during this audit were as follows:
Typography Variations: There were too many variations of typography, leading to inconsistencies in the visual language.
Undocumented Components: Components lacked proper documentation for the technical team, creating challenges in the implementation process.
Redundant Components: Similar-looking components added unnecessary workload for the development team without serving an essential purpose.
Communication Challenges: Difficulty in communication arose due to multiple versions of the same screens, making it challenging to track and relay changes effectively.
Figma Files Structure: Figma files were built with screenshots instead of utilizing components, hindering the efficiency of the design process and collaboration.
Lack of Synchronization: Changes made within the development stage were not consistently reflected in Figma, leading to discrepancies between the design and implementation.
Dispersed File Locations: Files were spread across different environments, contributing to a lack of centralized control and making it difficult to manage and track design assets.
🎯 Design System Basis
To address the issues identified during the audit, I established a centralized repository by setting up a central repository using Figma's version control tools to provide a structured environment for collaboration and version management. Then, I transferred design elements to the new repository, ensuring streamlined collaboration and centralized control over assets.
This is how I organized the system:
Foundation
The initial phase focused on establishing the Foundation, encompassing documentation and assets like the Logo, Typography, Iconography, and general Layouts. While each type of element had its designated page inside Figma's file, a concerted effort was made to bring them together for a more cohesive and illustrative representation.
Navigation
The second part focused on navigation, covering both app and web interfaces, and included components like headers and footers.
Components
The third part includes documentation for various components such as buttons, fonts, hero panels, panels, product filters, product size grid, loading states, product thumbnails, promoblocks, selections, tables, and tabs.
🎯 Master Pages Integration
After implementing the foundation of the design system, I introduced master pages to standardize the process of screen creation, reducing redundancy and promoting a consistent design language. Additionally, I conducted training sessions to familiarize designers with the new approach of master pages, ensuring a smooth transition and facilitating efficient usage.
🎯 Results
In conclusion, I collaborated closely with development teams to seamlessly integrate redesigned components into the existing codebase, fostering a unified and cohesive user experience. Simultaneously, I structured a design system update process while contributing to the development of new features within the Stadium Goods Website. These strategic actions led to significant outcomes, including the achievement of a unified and modern visual identity, streamlined design processes resulting in reduced implementation time, improved collaboration facilitated by a centralized asset repository, and an elevated user experience through the consistent implementation of design elements.
Stadium Goods Design System
4 weeks
Farfetch
E-commerce
Context
During my time at Stadium Goods, a surge in requests within the product backlog became apparent because there was no previous designer dedicated to managing these requests for Farfetch. This situation led to the identification of inefficiencies stemming from decentralized design practices. Personal repositories, a lack of version control, and the absence of a unified brand identity highlighted the need for a deliberate and strategic redesign.
At this point, my goals were straightforward:
Update the outdated brand to create a cohesive and modern visual identity in line with current trends.
Introduce a centralized repository to improve collaboration and streamline version control, addressing the encountered inefficiencies.
Implement master pages to standardize screen creation, reducing redundancy and enhancing the efficiency of the design process.
Establish a comprehensive design system to provide a structured framework for a consistent and user-centric experience, addressing immediate concerns and setting the foundation for long-term design coherence and efficiency.
🎯 Design Audit
To achieve the outlined goals, I initiated the process by conducting a comprehensive design audit. This involved identifying disparities and pain points. Close collaboration with stakeholders was crucial to ensuring that the redesign aligned seamlessly with the brand's evolution.
The key stakeholders involved in this endeavor were:
SG's Project Manager
SG's Director of Branding at Stadium Goods
SG's Director of Digital Marketing
SG's Development Team
The primary pain points identified during this audit were as follows:
Typography Variations: There were too many variations of typography, leading to inconsistencies in the visual language.
Undocumented Components: Components lacked proper documentation for the technical team, creating challenges in the implementation process.
Redundant Components: Similar-looking components added unnecessary workload for the development team without serving an essential purpose.
Communication Challenges: Difficulty in communication arose due to multiple versions of the same screens, making it challenging to track and relay changes effectively.
Figma Files Structure: Figma files were built with screenshots instead of utilizing components, hindering the efficiency of the design process and collaboration.
Lack of Synchronization: Changes made within the development stage were not consistently reflected in Figma, leading to discrepancies between the design and implementation.
Dispersed File Locations: Files were spread across different environments, contributing to a lack of centralized control and making it difficult to manage and track design assets.
🎯 Design System Basis
To address the issues identified during the audit, I established a centralized repository by setting up a central repository using Figma's version control tools to provide a structured environment for collaboration and version management. Then, I transferred design elements to the new repository, ensuring streamlined collaboration and centralized control over assets.
This is how I organized the system:
Foundation
The initial phase focused on establishing the Foundation, encompassing documentation and assets like the Logo, Typography, Iconography, and general Layouts. While each type of element had its designated page inside Figma's file, a concerted effort was made to bring them together for a more cohesive and illustrative representation.
Navigation
The second part focused on navigation, covering both app and web interfaces, and included components like headers and footers.
Components
The third part includes documentation for various components such as buttons, fonts, hero panels, panels, product filters, product size grid, loading states, product thumbnails, promoblocks, selections, tables, and tabs.
🎯 Master Pages Integration
After implementing the foundation of the design system, I introduced master pages to standardize the process of screen creation, reducing redundancy and promoting a consistent design language. Additionally, I conducted training sessions to familiarize designers with the new approach of master pages, ensuring a smooth transition and facilitating efficient usage.
🎯 Results
In conclusion, I collaborated closely with development teams to seamlessly integrate redesigned components into the existing codebase, fostering a unified and cohesive user experience. Simultaneously, I structured a design system update process while contributing to the development of new features within the Stadium Goods Website. These strategic actions led to significant outcomes, including the achievement of a unified and modern visual identity, streamlined design processes resulting in reduced implementation time, improved collaboration facilitated by a centralized asset repository, and an elevated user experience through the consistent implementation of design elements.
Stadium Goods Design System
Duration
4 weeks
Client
Farfetch
Category
E-commerce
Context
During my time at Stadium Goods, a surge in requests within the product backlog became apparent because there was no previous designer dedicated to managing these requests for Farfetch. This situation led to the identification of inefficiencies stemming from decentralized design practices. Personal repositories, a lack of version control, and the absence of a unified brand identity highlighted the need for a deliberate and strategic redesign.
At this point, my goals were straightforward:
Update the outdated brand to create a cohesive and modern visual identity in line with current trends.
Introduce a centralized repository to improve collaboration and streamline version control, addressing the encountered inefficiencies.
Implement master pages to standardize screen creation, reducing redundancy and enhancing the efficiency of the design process.
Establish a comprehensive design system to provide a structured framework for a consistent and user-centric experience, addressing immediate concerns and setting the foundation for long-term design coherence and efficiency.
🎯 Design Audit
To achieve the outlined goals, I initiated the process by conducting a comprehensive design audit. This involved identifying disparities and pain points. Close collaboration with stakeholders was crucial to ensuring that the redesign aligned seamlessly with the brand's evolution.
The key stakeholders involved in this endeavor were:
SG's Project Manager
SG's Director of Branding at Stadium Goods
SG's Director of Digital Marketing
SG's Development Team
The primary pain points identified during this audit were as follows:
Typography Variations: There were too many variations of typography, leading to inconsistencies in the visual language.
Undocumented Components: Components lacked proper documentation for the technical team, creating challenges in the implementation process.
Redundant Components: Similar-looking components added unnecessary workload for the development team without serving an essential purpose.
Communication Challenges: Difficulty in communication arose due to multiple versions of the same screens, making it challenging to track and relay changes effectively.
Figma Files Structure: Figma files were built with screenshots instead of utilizing components, hindering the efficiency of the design process and collaboration.
Lack of Synchronization: Changes made within the development stage were not consistently reflected in Figma, leading to discrepancies between the design and implementation.
Dispersed File Locations: Files were spread across different environments, contributing to a lack of centralized control and making it difficult to manage and track design assets.
🎯 Design System Basis
To address the issues identified during the audit, I established a centralized repository by setting up a central repository using Figma's version control tools to provide a structured environment for collaboration and version management. Then, I transferred design elements to the new repository, ensuring streamlined collaboration and centralized control over assets.
This is how I organized the system:
Foundation
The initial phase focused on establishing the Foundation, encompassing documentation and assets like the Logo, Typography, Iconography, and general Layouts. While each type of element had its designated page inside Figma's file, a concerted effort was made to bring them together for a more cohesive and illustrative representation.
Navigation
The second part focused on navigation, covering both app and web interfaces, and included components like headers and footers.
Components
The third part includes documentation for various components such as buttons, fonts, hero panels, panels, product filters, product size grid, loading states, product thumbnails, promoblocks, selections, tables, and tabs.
🎯 Master Pages Integration
After implementing the foundation of the design system, I introduced master pages to standardize the process of screen creation, reducing redundancy and promoting a consistent design language. Additionally, I conducted training sessions to familiarize designers with the new approach of master pages, ensuring a smooth transition and facilitating efficient usage.
🎯 Results
In conclusion, I collaborated closely with development teams to seamlessly integrate redesigned components into the existing codebase, fostering a unified and cohesive user experience. Simultaneously, I structured a design system update process while contributing to the development of new features within the Stadium Goods Website. These strategic actions led to significant outcomes, including the achievement of a unified and modern visual identity, streamlined design processes resulting in reduced implementation time, improved collaboration facilitated by a centralized asset repository, and an elevated user experience through the consistent implementation of design elements.
