Kurly Logistics Design System
Building a New Delivery System
I led the creation of a logistics-focused design system to unify the visual identity across multiple services while minimizing design and development effort. Previously, each product had a distinct look and feel, leading to inconsistencies and inefficiencies.
By establishing a cohesive design language, we streamlined workflows and enhanced usability across platforms. I collaborated closely with developers, aligning weekly to ensure seamless implementation. The result was a fully integrated system that not only improved brand consistency but also accelerated the design-to-development process.
Project Overview
Objective
This project aimed to design a new mobile app while building a comprehensive design system.
From establishing the foundation to defining core components, we created a scalable design language. Working closely with the development team, we successfully implemented the system, ensuring consistency and efficiency across both platforms.
ROLE
User Research, UX/UI
PROJECT DATE
Spring 2024 – Fall 2024
RESPONSIBILITIES
UI Design, Prototyping, Collaboration with Development
Designing for Logistics at Scale
The logistics team within the product design organization consisted of just two designers. Despite the small team size, we were responsible for a wide range of products, including fulfillment, last-mile delivery, and warehouse management—each with its own unique challenges and requirements.
There is no one-size-fits-all solution in logistics design. Every system had different workflows, users, and operational constraints. With this in mind, I developed tailored tools and processes to meet the diverse needs of each product, ensuring both efficiency and scalability.
Here are a few key initiatives that helped streamline our design approac
Problems & Goals
Problems
- Inconsistent design across multiple platforms (mobile and web).
- Lack of a unified design system for efficient scalability.
- Slow and inefficient design-to-development process.
Goals
- Establish a cohesive and scalable design system for both mobile and web platforms.
- Improve design consistency and usability across all products.
- Streamline the design-to-development process for faster delivery and better collaboration.
Design Process
01
Kickoff & Scope Definition
At the start of the project, we met with developers to define the scope and timeline. Given the scale of the system, we established key priorities:
- Prioritized frequently used components instead of building everything at once.
- Set a six-month timeline for the initial design and development phase.
- Planned to refine and expand the system after launch.
02
Research & Needs Assessment
To ensure the design system effectively supported various teams, we engaged with product planners from multiple services to understand their workflows and component needs. Through these discussions, we identified several key insights:
- Admin-heavy services required data-centric components like tables.
- A modular approach would improve efficiency and reusability.
- Standardizing UI elements would enhance consistency across services.
- Clear documentation was essential for easy adoption.
03
Foundation Setup
To create a scalable and cohesive design system, we began by establishing key foundations to ensure consistency across all services:
Color System
Developed a structured palette with semantic colors for clarity and accessibility.
Typography
Standardized font styles to improve readability and maintain a cohesive look.
Icons
Created a unified icon library for a seamless visual experience.
Grid System
Implemented a responsive grid to support flexible and scalable layouts.
04
Component Setup
After setting the foundations, we focused on high-priority, frequently-used components to ensure scalability and consistency. This included:
- Buttons, forms, tables, and navigation elements for a cohesive experience.
- Modular components for flexible use and easy customization.
- Clear documentation to enable independent work by designers and developers.
These include key elements like Button, Checkbox, Dropdown, and Table, among others.
05
Documentation of Guidelines
I documented each component in KLDS to provide clear and accessible guidelines for the team. The outcome was as follows:
- Increased team efficiency by enabling teams to create consistent screens without designer input.
- Improved collaboration across teams by providing practical examples and easy-to-follow documentation.
- Streamlined the process, reducing designer involvement and speeding up project completion.
I developed this guide to provide flexibility across user areas, defining padding and adaptable zones to ensure consistent yet dynamic layouts.
Applying KLDS to Projects
We applied the design system to a newly built in-house service, which was completed in a short timeframe with minimal design effort.
This allowed the team to quickly move from design to development, resulting in faster delivery and a more consistent user experience across the platform. The design system not only minimized repetitive design tasks but also empowered non-designers to contribute to the design process, maintaining consistency without compromising quality.
This system enabled us to rapidly and efficiently build a new admin service in-house, ensuring a seamless user experience across multiple touchpoints.
Reflection
What I learned
Through building and implementing the design system, I gained valuable insights:
Adaptability of design systems
I learned the importance of flexibility in design systems to ensure they can evolve with the project’s needs and scale.
Cross-team collaboration
Working with various teams, I discovered how design systems can streamline workflows and improve communication across departments.
Empowering through documentation
I realized how well-documented guidelines and components enable non-designers to contribute to the design process efficiently.
Next step
Through building and implementing the design system, I gained valuable insights:
Component Expansion
As the system scales, I will focus on adding new components based on team needs, such as more data-centric components or advanced UI elements.
System Optimization
I plan to optimize the system’s performance by fine-tuning existing components and ensuring they are even more reusable and flexible.
User Feedback Integration
I will gather feedback from end-users and stakeholders to refine the system, ensuring it continues to meet their evolving requirements and enhances usability.
