Design system
Design system
Design system
My journey as the UX/UI designer for Spacecargo, leading the design of a mobile app to transform the parcel shipping experience
My journey as the UX/UI designer for Spacecargo, leading the design of a mobile app to transform the parcel shipping experience
My journey as the UX/UI designer for Spacecargo, leading the design of a mobile app to transform the parcel shipping experience
Working on the Spacecargo mobile app was an exciting and rewarding challenge. I focused on creating a seamless user experience, balancing user needs with business goals, and handling everything from initial research to final design. This involved continuous iteration, gathering stakeholder feedback, and addressing the unique complexities of the logistics industry. My main goal was to simplify processes like shipment tracking and payment options. While some project details are still under wraps, this case study highlights the key insights and design solutions I developed throughout the project.
Working on the Spacecargo mobile app was an exciting and rewarding challenge. I focused on creating a seamless user experience, balancing user needs with business goals, and handling everything from initial research to final design. This involved continuous iteration, gathering stakeholder feedback, and addressing the unique complexities of the logistics industry. My main goal was to simplify processes like shipment tracking and payment options. While some project details are still under wraps, this case study highlights the key insights and design solutions I developed throughout the project.
Working on the Spacecargo mobile app was an exciting and rewarding challenge. I focused on creating a seamless user experience, balancing user needs with business goals, and handling everything from initial research to final design. This involved continuous iteration, gathering stakeholder feedback, and addressing the unique complexities of the logistics industry. My main goal was to simplify processes like shipment tracking and payment options. While some project details are still under wraps, this case study highlights the key insights and design solutions I developed throughout the project.
ROLE
Product
Designer
ROLE
Product
Designer
ROLE
UX & UI
Designer
SCOPE
Mobile
Application
SCOPE
Mobile
Application
SCOPE
Mobile
Application
TIMELINE
3 Months
TIMELINE
3 Months
TIMELINE
3 Months
Project overview
Project overview
Project overview
Design systems are more than just collections of UI elements—they're the blueprint for consistency, efficiency, and scalability across digital products. In a world where user interfaces are becoming increasingly complex, having a robust system in place ensures that each project starts from a strong foundation rather than from scratch.
The design system I built focuses on the atomic design methodology, which emphasizes breaking down interfaces into their smallest, most manageable pieces. From these basic building blocks—atoms, molecules, and organisms—entire interfaces can be constructed, ensuring a cohesive and scalable design system.
Design systems are more than just collections of UI elements—they're the blueprint for consistency, efficiency, and scalability across digital products. In a world where user interfaces are becoming increasingly complex, having a robust system in place ensures that each project starts from a strong foundation rather than from scratch.
The design system I built focuses on the atomic design methodology, which emphasizes breaking down interfaces into their smallest, most manageable pieces. From these basic building blocks—atoms, molecules, and organisms—entire interfaces can be constructed, ensuring a cohesive and scalable design system.
Design systems are more than just collections of UI elements—they're the blueprint for consistency, efficiency, and scalability across digital products. In a world where user interfaces are becoming increasingly complex, having a robust system in place ensures that each project starts from a strong foundation rather than from scratch.
The design system I built focuses on the atomic design methodology, which emphasizes breaking down interfaces into their smallest, most manageable pieces. From these basic building blocks—atoms, molecules, and organisms—entire interfaces can be constructed, ensuring a cohesive and scalable design system.
For me, this wasn’t just about making a library of reusable components. It was about creating a system that would help simplify my design workflow, encourage consistency across projects, and provide an easy way to scale designs for future needs. This case study walks you through my journey of building an atomic design system, showcasing the process from ideation to developer handoff.
By the end of this case study, you'll see how atomic design principles can create flexible, intuitive systems that not only benefit designers but streamline collaboration with developers as well.
For me, this wasn’t just about making a library of reusable components. It was about creating a system that would help simplify my design workflow, encourage consistency across projects, and provide an easy way to scale designs for future needs. This case study walks you through my journey of building an atomic design system, showcasing the process from ideation to developer handoff.
By the end of this case study, you'll see how atomic design principles can create flexible, intuitive systems that not only benefit designers but streamline collaboration with developers as well.
For me, this wasn’t just about making a library of reusable components. It was about creating a system that would help simplify my design workflow, encourage consistency across projects, and provide an easy way to scale designs for future needs. This case study walks you through my journey of building an atomic design system, showcasing the process from ideation to developer handoff.
By the end of this case study, you'll see how atomic design principles can create flexible, intuitive systems that not only benefit designers but streamline collaboration with developers as well.
Why is a Design System Necessary?
Why is a Design System Necessary?
Why is a Design System Necessary?
Without a design system, every project starts to feel like building a house without blueprints. Inconsistent components, a chaotic workflow, and a lack of structure can quickly lead to frustration. Here’s why working without a design system becomes problematic
Without a design system, every project starts to feel like building a house without blueprints. Inconsistent components, a chaotic workflow, and a lack of structure can quickly lead to frustration. Here’s why working without a design system becomes problematic
Without a design system, every project starts to feel like building a house without blueprints. Inconsistent components, a chaotic workflow, and a lack of structure can quickly lead to frustration. Here’s why working without a design system becomes problematic
Inconsistency
Inconsistency
Inconsistency
Without a clear framework, designs often vary from project to project, leading to disjointed user experiences. Something as simple as a button can look and behave differently across different parts of an application.
Without a clear framework, designs often vary from project to project, leading to disjointed user experiences. Something as simple as a button can look and behave differently across different parts of an application.
Without a clear framework, designs often vary from project to project, leading to disjointed user experiences. Something as simple as a button can look and behave differently across different parts of an application.
Inconsistency
Inconsistency
Inconsistency
Designers find themselves re-creating the same elements over and over again. Need a card component? Build it from scratch. A new form layout? Start all over again. This repetition not only wastes time but also creates unnecessary variations.
Designers find themselves re-creating the same elements over and over again. Need a card component? Build it from scratch. A new form layout? Start all over again. This repetition not only wastes time but also creates unnecessary variations.
Designers find themselves re-creating the same elements over and over again. Need a card component? Build it from scratch. A new form layout? Start all over again. This repetition not only wastes time but also creates unnecessary variations.
Scaling is Difficult
Scaling is Difficult
Scaling is Difficult
As projects grow, maintaining consistency becomes harder. New features introduce new design elements that may not align with previous ones, resulting in a messy and fragmented interface.
As projects grow, maintaining consistency becomes harder. New features introduce new design elements that may not align with previous ones, resulting in a messy and fragmented interface.
As projects grow, maintaining consistency becomes harder. New features introduce new design elements that may not align with previous ones, resulting in a messy and fragmented interface.
Communication Breakdowns
Communication Breakdowns
Communication Breakdowns
Without a unified design language, developers may interpret designs differently. What looks one way in a design tool might end up implemented differently in code, causing endless back-and-forth adjustments.
Without a unified design language, developers may interpret designs differently. What looks one way in a design tool might end up implemented differently in code, causing endless back-and-forth adjustments.
Without a unified design language, developers may interpret designs differently. What looks one way in a design tool might end up implemented differently in code, causing endless back-and-forth adjustments.
What Pluses Does a Design System Have?
What Pluses Does a Design System Have?
What Pluses Does a Design System Have?
A design system provides a structured approach to managing design elements and processes, offering several key advantages. It serves as a comprehensive framework that brings uniformity and efficiency to design and development tasks. By centralizing guidelines and reusable components, it ensures consistency across projects and helps streamline workflows.
This approach addresses common challenges such as maintaining design quality and reducing redundancy. Overall, a design system is a valuable tool for achieving cohesive user experiences and aligning design efforts with project goals.
A design system provides a structured approach to managing design elements and processes, offering several key advantages. It serves as a comprehensive framework that brings uniformity and efficiency to design and development tasks. By centralizing guidelines and reusable components, it ensures consistency across projects and helps streamline workflows.
This approach addresses common challenges such as maintaining design quality and reducing redundancy. Overall, a design system is a valuable tool for achieving cohesive user experiences and aligning design efforts with project goals.
A design system provides a structured approach to managing design elements and processes, offering several key advantages. It serves as a comprehensive framework that brings uniformity and efficiency to design and development tasks. By centralizing guidelines and reusable components, it ensures consistency across projects and helps streamline workflows.
This approach addresses common challenges such as maintaining design quality and reducing redundancy. Overall, a design system is a valuable tool for achieving cohesive user experiences and aligning design efforts with project goals.
Consistency
Consistency
A design system ensures that every component, from buttons to icons, remains uniform across different projects. This consistency helps users feel at ease with the interface and builds a cohesive brand identity.
A design system ensures that every component, from buttons to icons, remains uniform across different projects. This consistency helps users feel at ease with the interface and builds a cohesive brand identity.
Efficiency
Efficiency
By using reusable components, designers and developers can save time and avoid duplicating work. Predefined styles and patterns streamline the design and development process, leading to faster turnaround times.
By using reusable components, designers and developers can save time and avoid duplicating work. Predefined styles and patterns streamline the design and development process, leading to faster turnaround times.
Scalability
Scalability
As projects grow, a design system makes it easy to integrate new elements without disrupting the existing design. This modular approach helps maintain consistency even as the project evolves.
As projects grow, a design system makes it easy to integrate new elements without disrupting the existing design. This modular approach helps maintain consistency even as the project evolves.
Improved Collaboration
Improved Collaboration
With clear guidelines and documented components, designers and developers can work more effectively together. The shared understanding reduces miscommunications and speeds up the development process.
With clear guidelines and documented components, designers and developers can work more effectively together. The shared understanding reduces miscommunications and speeds up the development process.
Faster Onboarding
Faster Onboarding
New team members can quickly get up to speed by referring to the design system’s documentation, making the onboarding process smoother and more efficient.
New team members can quickly get up to speed by referring to the design system’s documentation, making the onboarding process smoother and more efficient.
Enhanced User Experience
Enhanced User Experience
onsistent design components create a predictable and user-friendly experience, helping users navigate and interact with the product more comfortably.
onsistent design components create a predictable and user-friendly experience, helping users navigate and interact with the product more comfortably.
In summary, a design system enhances design consistency, boosts efficiency, and facilitates better collaboration, all while improving the overall user experience.
In summary, a design system enhances design consistency, boosts efficiency, and facilitates better collaboration, all while improving the overall user experience.
How I Started (Planning)
How I Started (Planning)
How I Started (Planning)
Before diving into building the system, I laid out a detailed plan. This was crucial because it allowed me to visualize the final outcome and ensured that every decision made along the way was intentional and aligned with the broader project goals.
Before diving into building the system, I laid out a detailed plan. This was crucial because it allowed me to visualize the final outcome and ensured that every decision made along the way was intentional and aligned with the broader project goals.
Before diving into building the system, I laid out a detailed plan. This was crucial because it allowed me to visualize the final outcome and ensured that every decision made along the way was intentional and aligned with the broader project goals.
Conducting a thorough audit of existing projects to identify the most common UI elements.
Conducting a thorough audit of existing projects to identify the most common UI elements.
Listing out all the atomic elements (atoms, molecules, organisms, etc.) that would form the backbone of the design system.
Listing out all the atomic elements (atoms, molecules, organisms, etc.) that would form the backbone of the design system.
Defining the overall structure and documentation plan to make sure the design system was easy to follow for anyone using it.
Defining the overall structure and documentation plan to make sure the design system was easy to follow for anyone using it.
Steps for Work on the Design System
Steps for Work on the Design System
Steps for Work on the Design System
Building a design system involves a methodical approach, breaking down the process into manageable steps to ensure a coherent and functional outcome. Here’s a detailed look at each stage of developing a design system:
Building a design system involves a methodical approach, breaking down the process into manageable steps to ensure a coherent and functional outcome. Here’s a detailed look at each stage of developing a design system:
Building a design system involves a methodical approach, breaking down the process into manageable steps to ensure a coherent and functional outcome. Here’s a detailed look at each stage of developing a design system:
1 Conducting a Design Audit
1 Conducting a Design Audit
1 Conducting a Design Audit
The first step in creating a design system is conducting a comprehensive audit of existing design projects. This involves reviewing current interfaces, identifying frequently used components, and understanding design inconsistencies. The audit helps to pinpoint common patterns, elements that need standardization, and areas where efficiency can be improved. By examining previous work, you gain insights into what works well and what needs refinement, setting the stage for a well-informed design system.
The first step in creating a design system is conducting a comprehensive audit of existing design projects. This involves reviewing current interfaces, identifying frequently used components, and understanding design inconsistencies. The audit helps to pinpoint common patterns, elements that need standardization, and areas where efficiency can be improved. By examining previous work, you gain insights into what works well and what needs refinement, setting the stage for a well-informed design system.
The first step in creating a design system is conducting a comprehensive audit of existing design projects. This involves reviewing current interfaces, identifying frequently used components, and understanding design inconsistencies. The audit helps to pinpoint common patterns, elements that need standardization, and areas where efficiency can be improved. By examining previous work, you gain insights into what works well and what needs refinement, setting the stage for a well-informed design system.
2 Defining Atomic Components (Atoms)
2 Defining Atomic Components (Atoms)
2 Defining Atomic Components (Atoms)
With insights from the design audit, the next step is to define the fundamental building blocks of your design system—atoms. Atoms are the simplest elements, such as buttons, input fields, and icons. Each atom should be designed with flexibility and consistency in mind, ensuring it can be reused across various contexts. Establishing these basic components is crucial as they serve as the foundation for more complex elements in the design system.
With insights from the design audit, the next step is to define the fundamental building blocks of your design system—atoms. Atoms are the simplest elements, such as buttons, input fields, and icons. Each atom should be designed with flexibility and consistency in mind, ensuring it can be reused across various contexts. Establishing these basic components is crucial as they serve as the foundation for more complex elements in the design system.
With insights from the design audit, the next step is to define the fundamental building blocks of your design system—atoms. Atoms are the simplest elements, such as buttons, input fields, and icons. Each atom should be designed with flexibility and consistency in mind, ensuring it can be reused across various contexts. Establishing these basic components is crucial as they serve as the foundation for more complex elements in the design system.
4 Building Organisms
4 Building Organisms
4 Building Organisms
The first step in creating a design system is conducting a comprehensive audit of existing design projects. This involves reviewing current interfaces, identifying frequently used components, and understanding design inconsistencies. The audit helps to pinpoint common patterns, elements that need standardization, and areas where efficiency can be improved. By examining previous work, you gain insights into what works well and what needs refinement, setting the stage for a well-informed design system.
The first step in creating a design system is conducting a comprehensive audit of existing design projects. This involves reviewing current interfaces, identifying frequently used components, and understanding design inconsistencies. The audit helps to pinpoint common patterns, elements that need standardization, and areas where efficiency can be improved. By examining previous work, you gain insights into what works well and what needs refinement, setting the stage for a well-informed design system.
The first step in creating a design system is conducting a comprehensive audit of existing design projects. This involves reviewing current interfaces, identifying frequently used components, and understanding design inconsistencies. The audit helps to pinpoint common patterns, elements that need standardization, and areas where efficiency can be improved. By examining previous work, you gain insights into what works well and what needs refinement, setting the stage for a well-informed design system.
5 Designing Templates and Pages
5 Designing Templates and Pages
5 Designing Templates and Pages
The first step in creating a design system is conducting a comprehensive audit of existing design projects. This involves reviewing current interfaces, identifying frequently used components, and understanding design inconsistencies. The audit helps to pinpoint common patterns, elements that need standardization, and areas where efficiency can be improved. By examining previous work, you gain insights into what works well and what needs refinement, setting the stage for a well-informed design system.
The first step in creating a design system is conducting a comprehensive audit of existing design projects. This involves reviewing current interfaces, identifying frequently used components, and understanding design inconsistencies. The audit helps to pinpoint common patterns, elements that need standardization, and areas where efficiency can be improved. By examining previous work, you gain insights into what works well and what needs refinement, setting the stage for a well-informed design system.
The first step in creating a design system is conducting a comprehensive audit of existing design projects. This involves reviewing current interfaces, identifying frequently used components, and understanding design inconsistencies. The audit helps to pinpoint common patterns, elements that need standardization, and areas where efficiency can be improved. By examining previous work, you gain insights into what works well and what needs refinement, setting the stage for a well-informed design system.
6 Documentation and Guidelines
6 Documentation and Guidelines
6 Documentation and Guidelines
The first step in creating a design system is conducting a comprehensive audit of existing design projects. This involves reviewing current interfaces, identifying frequently used components, and understanding design inconsistencies. The audit helps to pinpoint common patterns, elements that need standardization, and areas where efficiency can be improved. By examining previous work, you gain insights into what works well and what needs refinement, setting the stage for a well-informed design system.
The first step in creating a design system is conducting a comprehensive audit of existing design projects. This involves reviewing current interfaces, identifying frequently used components, and understanding design inconsistencies. The audit helps to pinpoint common patterns, elements that need standardization, and areas where efficiency can be improved. By examining previous work, you gain insights into what works well and what needs refinement, setting the stage for a well-informed design system.
The first step in creating a design system is conducting a comprehensive audit of existing design projects. This involves reviewing current interfaces, identifying frequently used components, and understanding design inconsistencies. The audit helps to pinpoint common patterns, elements that need standardization, and areas where efficiency can be improved. By examining previous work, you gain insights into what works well and what needs refinement, setting the stage for a well-informed design system.
Finalizing for Developers
Finalizing for Developers
Finalizing for Developers
After creating a comprehensive design system, the final step is to ensure it is effectively translated into a functional product. This involves several crucial activities to make the system usable and beneficial for developers. Proper finalization ensures that the design vision is accurately implemented and that the system integrates seamlessly into the development workflow.
After creating a comprehensive design system, the final step is to ensure it is effectively translated into a functional product. This involves several crucial activities to make the system usable and beneficial for developers. Proper finalization ensures that the design vision is accurately implemented and that the system integrates seamlessly into the development workflow.
After creating a comprehensive design system, the final step is to ensure it is effectively translated into a functional product. This involves several crucial activities to make the system usable and beneficial for developers. Proper finalization ensures that the design vision is accurately implemented and that the system integrates seamlessly into the development workflow.
Documentation
Documentation
Documentation
Detailed documentation is essential for a smooth handoff. It should clearly outline each component’s use, behavior, and variations. Include design principles and decisions to provide context, helping developers implement the design accurately and consistently.
Detailed documentation is essential for a smooth handoff. It should clearly outline each component’s use, behavior, and variations. Include design principles and decisions to provide context, helping developers implement the design accurately and consistently.
Detailed documentation is essential for a smooth handoff. It should clearly outline each component’s use, behavior, and variations. Include design principles and decisions to provide context, helping developers implement the design accurately and consistently.
Asset Preparation
Asset Preparation
Asset Preparation
Prepare and export all design assets: icons, images, and style guides in the correct formats. Ensure assets are well-organized and named consistently to facilitate their use in development and maintain alignment with the design system.
Prepare and export all design assets: icons, images, and style guides in the correct formats. Ensure assets are well-organized and named consistently to facilitate their use in development and maintain alignment with the design system.
Prepare and export all design assets: icons, images, and style guides in the correct formats. Ensure assets are well-organized and named consistently to facilitate their use in development and maintain alignment with the design system.
Style Guide
Style Guide
Style Guide
Create a comprehensive style guide that covers typography, color schemes, spacing, and layout principles. This guide acts as a visual reference for developers, ensuring the design’s aesthetic is consistently applied across the project.
Create a comprehensive style guide that covers typography, color schemes, spacing, and layout principles. This guide acts as a visual reference for developers, ensuring the design’s aesthetic is consistently applied across the project.
Create a comprehensive style guide that covers typography, color schemes, spacing, and layout principles. This guide acts as a visual reference for developers, ensuring the design’s aesthetic is consistently applied across the project.
Component Library
Component Library
Component Library
Set up a component library that reflects the design system’s elements. This library should include all components, their states, and variations, providing developers with a ready-to-use resource that mirrors the design specifications.
Set up a component library that reflects the design system’s elements. This library should include all components, their states, and variations, providing developers with a ready-to-use resource that mirrors the design specifications.
Set up a component library that reflects the design system’s elements. This library should include all components, their states, and variations, providing developers with a ready-to-use resource that mirrors the design specifications.
Review Sessions
Review Sessions
Review Sessions
Conduct review sessions with developers to discuss the design system, clarify any questions, and ensure mutual understanding. These sessions help align the team and address any potential issues before implementation begins.
Conduct review sessions with developers to discuss the design system, clarify any questions, and ensure mutual understanding. These sessions help align the team and address any potential issues before implementation begins.
Conduct review sessions with developers to discuss the design system, clarify any questions, and ensure mutual understanding. These sessions help align the team and address any potential issues before implementation begins.
Feedback Mechanisms
Feedback Mechanisms
Feedback Mechanisms
Establish channels for developers to provide feedback, ask questions, and report issues. Ongoing communication allows for timely adjustments and improvements to the design system based on real-world use.
Establish channels for developers to provide feedback, ask questions, and report issues. Ongoing communication allows for timely adjustments and improvements to the design system based on real-world use.
Establish channels for developers to provide feedback, ask questions, and report issues. Ongoing communication allows for timely adjustments and improvements to the design system based on real-world use.
Continuous Support
Continuous Support
Continuous Support
Provide ongoing support and updates post-implementation. Address bugs, update documentation, and refine the design system as needed to ensure it remains effective and relevant.
Provide ongoing support and updates post-implementation. Address bugs, update documentation, and refine the design system as needed to ensure it remains effective and relevant.
Provide ongoing support and updates post-implementation. Address bugs, update documentation, and refine the design system as needed to ensure it remains effective and relevant.
Thank You for Exploring This Case Study. I Hope You Found It Insightful!
Thank You for Exploring This Case Study. I Hope You Found It Insightful!
Thank You for Exploring This Case Study. I Hope You Found It Insightful!
Drawing boxes since ‘05 © 2024
Drawing boxes since ‘05 © 2024
