Created a unified design system for the Vendor Portal to bring consistency, scalability, and efficiency to the company’s digital ecosystem.
I led the end-to-end design process — from visual exploration and component creation to documentation and developer handoff. The system reduced design and development time for new pages by ~30%.
Timeline:
7 months
Role
Senior Product Designer
Year
2019
Project Overview
The goal was to establish a consistent and reusable design foundation for internal and external supplier tools.
Before the project, multiple product teams were designing independently, leading to visual fragmentation and inefficiencies. My role was to define a cohesive design language and component library that could be easily scaled across products.
Problem Statement
Inconsistency in design patterns slowed down releases and increased maintenance costs.
Different teams used different buttons, layouts, and icon sets. This caused repetitive design work, longer development cycles, and a disjointed user experience. A single source of truth was needed to align designers and developers.
Research & Insights
To build a relevant and practical system, we first analyzed how existing tools were used.
I conducted 10 stakeholder interviews and audited 32 existing screens across teams. The biggest pain points: lack of component standards, inconsistent spacing, and low design predictability. A competitive review helped benchmark best practices from other B2B platforms.
User Personas
Research identified two main user groups with distinct needs.
Portal Admins — manage product data and operations daily; require efficiency and low error risk.
Supplier Representatives — need clear access to reports and documentation with minimal training.
Competitor Analysis
A short analysis of leading retail and B2B platforms guided visual direction and UX standards.
We identified how grid systems, typography hierarchy, and accessibility guidelines improved clarity and usability. Those findings defined the baseline for our own design principles.
Design Goals
We set clear, measurable goals to align the project roadmap.
• Build a unified component library in Sketch.
• Reduce page design time by 30%.
• Decrease visual inconsistencies by 80%.
• Establish accessibility baseline (WCAG AA).
• Prepare full documentation for design and development teams.
Ideation
The foundation started with spacing, typography, and color principles.
We applied an atomic design approach — defining smallest UI elements first and scaling up to complex components. This ensured visual harmony and faster iteration. All components were documented and linked within the design library for reuse.
Prototyping & Testing
We validated early versions of the system through interactive prototypes and user testing.
Eight participants tested flows built with the new components. We identified and fixed issues in form validation, table behavior, and navigation feedback. Task success rate improved by 22% after adjustments.
Final Design
The final system unified the visual language and improved collaboration across teams.
The component library included buttons, form fields, tables, modals, icons, grid system, and spacing tokens. Design documentation detailed component usage, states, and best practices for developers. All assets were delivered through a shared Sketch library with version control.
Outcomes & Impact
The design system improved team efficiency, scalability, and overall product quality.
• −30% page design and build time.
• −45% UI-related bugs in production (first 3 months).
• Onboarding time for new designers reduced from 2 weeks → 5 days.
• +18 NPS internal satisfaction increase.
• Complete documentation prepared for both design and development teams.
Reflection
Building the Vendor Portal design system was a lesson in balancing design scalability with practical delivery.
The system evolved from static guidelines to a living product — actively maintained and used across multiple teams. Next steps would include migrating to Figma components and integrating design tokens for dev automation.