Alaina Ylitalo

Less Guesswork,
More Consistency

Slowly but Efficiently Building a Foundation of Reusable Components for Long-Term Success

2023 - present

project overview

Greenplaces is an “all-in-one” sustainability platform helping organizations collect data and generate an auditable carbon footprint. The feature set includes customer-facing features for data collection and delivery, plus robust internal tools for processing and auditing data.

Greenplaces was scaling from manual consulting to automated carbon footprint tracking, requiring a more efficient platform. A major brand update (by the wonderful studio FinalFinal) added a layer of additional complexity, making a scalable design system essential.

goals

  • Create a scalable, consistent design system with established reusable components and patterns to improve design and development efficiency.
  • Align the app’s visual language with the new brand identity.
  • Improve collaboration between design and development for smoother handoffs.
  • Reduce time spent building pages from scratch

Research + Discovery

audit findings:

  • Inconsistent component styles and outdated, disconnected visual language.
  • Redundant components due to lack of reuse.
  • Pages were built twice - once for internal users, and once for customers, needing double the dev and QA time and resources
  • Absence of design tokens for colors, typography, and spacing.
  • Accessibility gaps, including poor contrast and missing focus states.

Stakeholder Insights:

  • Inconsistent workflows slowed design and development.
  • Users experienced confusion due to fragmented UI patterns.
  • Redundant admin and customer views increased development and QA time.

Competitive Analysis:

Competitors like Watershed and Persefoni had more polished but overly formal systems, presenting an opportunity to stand out with approaching carbon accounting with a more approachable UX.

Challenges

  • Without a component-based system in place, an immediate full overhaul wasn’t possible. We had to be strategic about where and how we made changes.
  • Separate admin and customer views meant double the work and QA. Required a back-end restructure on each page to be more efficient and improve longevity.
  • Careful planning required due to development resource constraints on the development team.

The Process

Phase 1 – Designing and Building Components

We prioritized core page types (forms, tables, object views) and followed atomic design principles to build a structured design library with tokens for colors, spacing, and typography, collaborating closely with the lead developer to align the component library with Figma and ensure accessibility across the front and back end.

Phase 2 – Incremental Rollout

The team released updates to high-priority pages first, taking an incremental approach for flexibility and minimal disruption to the set roadmap, with all new pages built using the "Jungle" design system.

Phase 3 – Modernizing the App

When we next got the opportunity, we refined and modernized the visual identity by updating orange from rusty to bright and adjusting typography to better align with brand guidelines, and introducing key brand elements like illustrations and rounded corners.

Phase 4 – Brand and UX Alignment

  • A large, highly visible project meant fully committing to the new brand in-platform was now prioritized across team leadership. This gave us the room to update our primary and gray palette tokens to accurately reflect brand visual language.
  • Page level components like the side-nav and header were redesigned and optimized, reducing unnecessary top-level content and visual noise and further pushing visuals to an airier, friendlier tone.

Phase 5 – Customization and Flexibility

Our new established design system now enabled flexible, tailored layouts for specific use cases while maintaining consistency.

Conclusion & Reflections

Challenges

  • Incremental Progress - Updates were introduced gradually over the course of a year+.
  • Competing Priorities – Design work was often deprioritized for feature development and other tech debt.
  • Design Advocacy – Consistency required ongoing alignment with competing development goals.
  • Legacy Debt – Many legacy pages remained due to time constraints.

Wins

  • Consistency – Unified look and feel across the platform reduces cognitive load for users.
  • Faster, Scalable Development – Reusable, documented components make it easier to ship features quickly and collaboratively. For creating a new table page with basic CRUD functionality, we went from an average development time of 7 days to 3 days, a 57.1% improvement.
  • Improved Usability – Consistency in patterns make navigation and interactions more predictable.
  • Accessibility – Standardized colors, fonts, and components improve compliance.
  • Reduced Errors – Pre-tested components lower the risk of design and development inconsistencies.
  • Brand Alignment – Stronger visual connection between product experience and brand identity.

Conclusion

While not always visible or fast, this work successfully established a strong foundation for long-term scalability, consistency, and an improved user experience for developers, designers and users.

next project →

alaina ylitalo
about