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
