all cases

JOTSON

Reducing tech and design debt with a structured energy management system

Design operations

Design system

ILLUSTRATION SYSTEM

JOTSON, A FAST GROWING an energy management startup, worked with Tiller Digital for over a year, with a lean, cross-functional team. As Jotson prepared to bring design in-house, the challenge wasn’t just transferring files. It was also about setting up the right foundation for their new product designer to work effectively without disruption.

01

Structuring design for an efficient handoff

As part of the handover process, we needed to ensure a smooth transition of design files while continuing collaboration on marketing and customer discovery work. Both teams, Jotson and Tiller, were working in the same Figma workspace, requiring organized, efficient access to shared design assets.


Key challenges included:

❗️

Design files were fragmented – There was no structured system, making it difficult to track versions or reuse components.

❗️

The workspace lacked organization – Product files, marketing assets, and one-off brainstorming files were all over the place.

❗️

Inconsistent UI components – The product design pulled from various public and custom libraries, leading to mismatched patterns in radiuses, spacing, and typography.

It became clear that simply handing over files wouldn’t be enough. We needed to fix the foundation first.

tl;dr

THE PROBLEM

Jotson, an energy management startup relied on agency-led design and development for over a year. Now, with an in-house senior product designer joining, the team needed:

A structured handoff process for the incoming designer

A scalable design system. Design components were inconsistently built using a mix of public libraries and custom assets.

A more organized Figma workspace as both Jotson and the agency shared a messy workspace, making collaboration inefficient

MY APPROACH

Design audit for a deep dive into the product files and assess component consistency and file organization

Stakeholder Interviews with the current agency-based designer, developers, and Jotson’s leadership to understand collaboration pain points

Figma workspace restructure to clean up the shared workspace, improve navigation and set clear guidelines for future use

Design system build of a robust design library with standardized UI components and an updated illustration system to support product and marketing needs

THE RESULT

Created a scalable design system that streamlined Jotson’s product and marketing assets

Restructured the shared Figma workspace, improving collaboration between the agency and Jotson’s team

Enabled smoother onboarding for the incoming senior product designer, reducing ramp-up time

Snapshot of the design audit. We identified duplicates and organized the designs based on how they can be split out into dedicated figma files.

02

Restructuring the shared Figma workspace

Jotson’s Figma was a shared space between the agency and the in-house team, meaning that:

Product UI work coexisted with random marketing files and brainstorming sessions

Lack of folder structure made it difficult to locate assets

Agency designers struggled to track what had been finalized and what was still evolving

What we did:

Created a structured file organization system separating:

  • Product UI work (product strategy files, user flows, product features)

  • Marketing & web assets (website, campaigns, social, pitch decks)

  • Exploratory files (figjams and brainstorming files)

Defined naming conventions to ensure consistency across all files

Documented the workspace structure so new designers and developers could easily navigate

🎯

🎯

🎯

🎯

IMPACT

Jotson’s workspace became clean, organized, and future-proof.

Components were stored locally in the same file that product work was done. The lack of a design library meant inconsistencies in designs when elements are copied over to new files and components are detached and/or broken.

03

Systems thinking: building a product and illustration system

Beyond organizing files, Jotson needed a unified design system to standardize:

UI components – Buttons, forms, typography, and grid systems

Illustration system – A consistent visual style to improve brand storytelling

Usage guidelines – A clear set of rules and best practices for maintaining consistency

Without a standardized system, tech and design debt was accumulating. Developers had to reinvent patterns every time, and the lack of structure slowed down iteration.

💡

💡

💡

💡

SOLUTION

Audited and redesigned UI components to create a cohesive set of reusable assets

Refined the illustration style to be scalable, professional, and brand-appropriate

Developed documentation outlining component usage and best practices

The new system ensured that Jotson’s product design could scale effortlessly as the company grew.

Building the design library with components broken out according to their function. Besides the design library, a Getting Started page was created for every file to act as a navigator for users new to the files.

This shows how the old components were restructured to be simpler and to enable edit functions through the properties sections. This mitigated detaching and component breaking from users and simplified authoring of the design library.

Efforts were made to update the illustration style from its early line art style to something more fitting to the professional, mature brand that Jotson was evolving into.

The first iteration of the illustration style while modern, was too complex to scale well, especially when the primary use case was for the product and not for marketing.

I developed a refined version, stripping down the style to something simplified while preserving a level of detail that made it product and marketing friendly.

Shown here is a before and after of the illustration style for the onboarding flow in the app. I created a custom sticker component to notify on status of the design. Also, it's a little silliness that made us smile.

MICHELLE WALSTRA

SR. PRODUCT DESIGNER, JOTSON

Trace was fantastic during our Tiller-Jotson partnership. She brilliantly handled our customer discovery work while building our first design system that finally gave us the consistency we needed. I loved how she brought fresh ideas to the table, explained everything clearly, and kept everyone on track toward our goals.

Trace works fast without sacrificing quality, quickly grasps complex information, and always delivers valuable insights. She's approachable, genuinely cares about the work, and was a true pleasure to collaborate with. I can't recommend her enough!

04

Impact across teams

For the product team:

Faster iteration – The new design system sped up development cycles by reducing redundancy

Consistency across the UI – Standardized components eliminated inconsistencies

For marketing and leadership:

Structured assets for marketing and pitch decks – Branding across materials became cohesive and recognizable

Illustrations as a storytelling tool – Made complex energy concepts more engaging and intuitive

Onboarding flow with the new illustrations applied.

Stills of the app showing cohesion and a direct impact of the new design system

Showcasing the different functions of the app. The first screen shows a new product feature, a contract comparison tool, that shows users live competitive rates and recommendations for the most affordable utility plans. The second screen shows how resource articles show interactive province data and how it maps to the user's data, a user flow that takes the user to the analytics section for a deeper dive. The last screen shows the Bill Insights feature, a comprehensive analysis of the users utility data, trends to track, and resources to help the user in decision making.

The new website and an explainer slide using new design elements and illustrations.

An animated explainer video of the Jotson app. For the video, I created the illustration and prepared the storyboard on figma. I animated the final edit using After Effects. The sound effects were an extra touch I added to make the video more engaging. The turnaround time for this was very tight and required some late nights but the final video turned out pretty well for which I was quite happy with and so was the brand.

05

What I learned

A successful handoff isn’t just about files. It’s about structure.

A well-documented, organized system enabled Jotson’s new designer to onboard smoothly without endless back-and-forth.

A design system is a tool for growth.

By establishing scalable components, Jotson’s future designers and developers can build faster and more consistently.


Organization drives efficiency.

A clean workspace and structured processes didn’t just benefit design, it also improved collaboration across product, marketing, and leadership.

💭

💭

💭

💭

FINAL THOUGHT

The transition from agency-led to in-house design was seamless because we didn’t just hand over files; we handed over a system.

For a deeper dive into the process, I'd be happy to walk it through in an interview. Let's connect!

SHOUTOUTS TO—

Sara Niinima - For being an amazing teammate, for design pairing with me and cycling through playing as design system author and design system end-user. We did good.

Remus Lacatus - For being an amazing client, manager, and all around good human. For recognizing the role of design and where good design offers value in the product. For holding space for different perspectives and nurturing it to the benefit of the team and to the product.

Curtis Ruetz - For the most understated and best dev feedback design could receive and I quote: "So far no major issues, it’s mostly good. There were some growing pains as everything was in flux. Typography and colors has been pretty consistent." :D

WHAT MY COLLEAGUES SAY

Trace is incredibly dedicated and often goes above and beyond to make deliverables or create the best product. She is a very strong leader and has immense skill in leading client workshops, especially in the UX and CDR space.

WHAT MY COLLEAGUES SAY

Trace is incredibly dedicated and often goes above and beyond to make deliverables or create the best product. She is a very strong leader and has immense skill in leading client workshops, especially in the UX and CDR space.

For clarity and consistency, Trace is used in place of Patricia in the testimonials. Both refer to me. :)

This website is designed and built from scratch by Trace Orozco. All rights reserved.
© Copyright 2025 Trace Orozco

trace orozco

For clarity and consistency, Trace is used in place of Patricia in the testimonials. Both refer to me. :)

This website is designed and built from scratch by Trace Orozco. All rights reserved.
© Copyright 2025 Trace Orozco

trace orozco

For clarity and consistency, Trace is used in place of Patricia in the testimonials. Both refer to me. :)

This website is designed and built from scratch by Trace Orozco. All rights reserved.
© Copyright 2025 Trace Orozco

trace

orozco