Postcard Visual Refresh

This project centered on the creation of a lightweight design system aimed at solving product inconsistencies and accelerating feature delivery. It was a unique challenge—designing a system in a small team, with limited resources, and alongside ongoing product updates. The system was implemented incrementally, focusing on usability and adaptability, with a long-term vision for scaling the design process.
Project timeline

Dec 2023 - Present

Project type

Work project

UX/UI Design

Ruoxin You

Developer

Rinchen Tuladhar
Ross Beale
Steve Batcup

My Contribution

Design Audit
UX/UI Design
Documentation

Impact
  • 🚀 Reduced feature delivery time from average 2 months to just 2 weeks.
  • 📈 Improved design consistency across the product, cutting down on UI debt and improving the overall user experience.
  • 🎯 Empowered PMs and developers by giving them the tools to launch new features independently without waiting for design input.
Context
Postcard Customer Management System
Smaller Earth, a travel company focused on youth cultural exchange programs, used an outdated customer management system called Postcard.
While initially built by an agency, it required a complete refresh once we brought it in-house. As the only designer, I was tasked with updating the system, but the scope of redesigning the entire product seemed daunting—especially given our limited resources and my experience as a junior designer.
Challenge
  • With no design system in place, the team struggled with inconsistent UI elements and inefficient development cycles.
  • The system was aging, and we were working under tight deadlines, requiring a scalable, flexible solution to improve both UX and workflow.
  • I'm the only designer in this project, and we couldn't overhaul the entire system at once. The solution had to be gradual and integrated into the ongoing product updates.
Process
Identifying the Problem Early On
On my second day at Smaller Earth, I was tasked with redesigning the homepage. It quickly became clear that the product lacked a consistent design language—each new feature seemed to add more visual clutter. While I knew a full redesign and a new design system were needed, I also recognized that this wasn’t the right time to dive in.
Instead of continuing with the inconsistent designs, I proposed a new visual style to my manager: one that would reduce clutter, maintain brand familiarity, and lay the groundwork for future systemization. My goal was to implement a light touch first and build from there.
Live homepage
Initial prototype
My task
Process
Laying the Foundation for a Design System

I couldn’t afford to spend months creating a full design system, so I focused on laying the groundwork with small, reusable components. As we refreshed the product step by step based on functionality, I seized the opportunity to gradually introduce the design system (mostly on my own). I started by documenting key design principles and creating initial components that could be reused in future projects.

Steps Taken:

  • Defined core design principles to ensure every decision aligned with the overall vision.
  • Created a Visual Audit document to track all components used in the system, highlighting any inconsistencies or issues.
  • Developed simple, reusable components during ongoing projects, building a foundation for future systemization.

This approach allowed me to keep moving forward with product updates while developing a scalable design system in the background. The Visual Audit document also helped me identify how to integrate component updates into our broader product refresh process.

Process
Systemizing Forms: The First Major Milestone

Forms were a major pain point in the product, so when we had the opportunity to refresh them, I saw a chance to introduce a modular design system. By focusing on forms, I could start creating components that could easily be reused across different pages.

Steps Taken:

  1. Advocated for extra time to build a component library specifically for forms.
  2. Designed reusable, mobile-responsive form components that were consistent across both desktop and mobile.

Outcome:

  1. Standardized form design, reducing inconsistency and speeding up future iterations.
  2. The form system became a starting point for further component adoption by PMs and developers, streamlining future feature designs.
Process
Expanding the System: Building on Figma

Our design team was also working on marketing page designs, and since we were already using shared colors and fonts, it made sense to extend the design system across the entire team. I began building a comprehensive Figma doc that included variants, styles, and components, making it easy to use for future design projects.

  • Chose Figma’s Simple System as a foundation, adapting its structure to meet our specific needs (e.g. we have seven color system for different brands).
  • Developed variants and design tokens to ensure flexible, scalable components.
  • Tested the system with PMs and devs to refine usability and encourage adoption.

This setup helped streamline the design process and made the system accessible to the whole team for future projects.

Challenge
Facilitating Adoption Among PMs and Developers

One of the key challenges was getting PMs and developers to actually use the system. At first, they were more comfortable with screenshots or working in isolation, so transitioning to a more structured system was a hurdle.

Solution:

  1. Created a structured Figma library and organized it into a “Product Specs” file to mirror the product’s structure and make components easy to find.
  2. Promoted best practices for using Figma’s system to ensure consistency across designs.
Challenge
Bridging the Gap Between Design and Development

Getting the development team on board with the design system was another challenge. There were legacy code constraints, and the dev team wasn’t eager to implement the system all at once.

Solution:

  1. Provided clear documentation to help developers integrate the system seamlessly into the product.
  2. Proactively reminded developers when existing components had already been used, emphasizing reusability to reduce redundant work.
Reflections & Lessons Learned
  • ‍One design system does not fit all teams. The biggest challenge wasn’t creating the system, but ensuring it was adopted across the team. I learned that the best system is the one that works for your team—no need for a one-size-fits-all solution.‍
  • Incremental adoption is key. Trying to implement a full design system from scratch would have been overwhelming. By introducing the system gradually, I was able to gain buy-in and make the process easier for everyone.‍
  • Use existing resources. Instead of starting from zero, I leveraged tools like Figma’s Simple System, which helped speed up implementation and reduced the need for reinventing the wheel.