Terrascope Design Language System (TDLS) App shell
The App UI shell refers to the structural elements of an app or website that remain consistent across different screens, such as navigation menus, sidebars, headers, and footers. It ensures a unified look and feel throughout the product.

Product quality—Terrascope Design Language System (TDLS) & product branding

Corporate Carbon Footprint (CCF) product design

Corporate Carbon Footprint (CCF) product design

I played a key role in both the DLS and product branding efforts. I significantly contributed to the TDLS and elevated the overall quality of craft and UX for both the product and the brand. In addition to leading the aesthetic design of UI components, data visualizations, and branding, I also defined DLS principles and guidelines. These standards empowered other designers to work more consistently and efficiently, resulting in improved product quality, team agility, and strengthened brand recognition.

I played a key role in both the DLS and product branding efforts. I significantly contributed to the TDLS and elevated the overall quality of craft and UX for both the product and the brand. In addition to leading the aesthetic design of UI components, data visualizations, and branding, I also defined DLS principles and guidelines. These standards empowered other designers to work more consistently and efficiently, resulting in improved product quality, team agility, and strengthened brand recognition.
I played a key role in both the DLS and product branding efforts. I significantly contributed to the TDLS and elevated the overall quality of craft and UX for both the product and the brand. In addition to leading the aesthetic design of UI components, data visualizations, and branding, I also defined DLS principles and guidelines. These standards empowered other designers to work more consistently and efficiently, resulting in improved product quality, team agility, and strengthened brand recognition.

Industry

Industry
Climate tech

Role

Role
Co-lead designer

Responsibility

Responsibility
Platform design

Impact

Workflow Efficiency: Figma, Chromatic, Linear, Storybook, and Lokalise were integrated tools to streamline the workflow and reduce design-to-development time by 30% and accelerate feature releases by 20%.

Productivity Boost: Increased team productivity by 25% through comprehensive documentation and streamlined processes. (50+ design journals)

User Growth: Enhanced key website-related metrics, especially various user engagement metrics, have had a positive impact. For instance, session duration has increased by over 25%.

Design (DLS)

Design system on Figma
  • The well-defined variants of UI components not only communicate well with multiple team members.
Usability at the core
  • The design language system elements, such as radius and colours, were meticulously defined to enhance usability. For instance, larger radius were applied to content-focused components to aid readability, while sharper edges were used for elements like data visualizations to emphasize their structure. Colours were selected from the Radix palette, ensuring accessibility, scalability, and seamless dark mode optimization, all in line with Web Content Accessibility Guidelines (WCAG).
Design journal
  • Design journaling was used not only to document the design rules, principles, and UI patterns defined but also to communicate with the multidisciplinary teams and keep iterating before moving to DLS production.

Design
(Visual design direction)

Terrascope product / marketing visual direction
  • Market Positioning: Differentiated the brand from competitors by implementing a unique visual design direction inspired by the abstract and modern aesthetics of Bauhaus.
  • Strategic Color Addition: Based on user research, we introduced green as a secondary color to enrich the brand's appearance and reinforce its identity around sustainability. This created a harmonious balance between the tech-focused purple and the eco-friendly green.
  • Outcome: Successfully launched the marketing website (terrascope.com) and developed internal deck templates as well as external-facing social media post templates.

Learnings

In working on a DLS, I learned that effective communication is crucial. During design, it’s key to prioritize high-impact components. Once the design is done, tools like Chromatic (for visual testing), Linear (for tracking progress), Storybook (for testing) and other integrated tools help monitor changes and foster collaboration. Communication continues after development, ensuring designers, POs, and engineers can test and use the components effectively.

Related projects.

Product design

Design leadership

Terrascope Corporate Carbon Footprint (CCF) product

I led the redesign of the company’s core product. Our enhancements dramatically reduced task complexity, with one feature saving time to complete a task by 75% (~4 hours per user).

Open project

wondo jeong

Private access