JOTSON
Reducing tech and design debt with a structured energy management system
Design operations
Design system
ILLUSTRATION SYSTEM
JOTSON, A FAST GROWING 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 was about setting up the right foundation for their new product designer and the rest of the existing teams to work effectively without disruption.
To ensure a seamless transition, we needed to organize Jotson’s design workspace, establish a scalable design system, and streamline collaboration between the agency and in-house teams.
Using the double diamond framework, this project was structured across four key phases:
Research - Understanding the landscape
Conducted a design audit of Jotson’s files and figma workspace
Interviewed stakeholders to understand workflows and pain points
Gathered insights from the development team and COO to identify collaboration challenges and inefficiencies in design handoff
Research findings - Identifying the core issues
Fragmented file organization
Inconsistent UI components with a mix of public libraries and custom-made components
Lack of structured handoff with developers struggling to access up-to-date files leading to version mismatches and inefficiencies
Solutions - Implementing scalable solutions
Reorganized the figma workspace with clear file structures, naming conventions, and color-coded thumbnail covers for better wayfinding
Built a dedicated design system library with components consolidated into a single source of truth to ensure consistency across teams
Streamlined collaboration with handoff files separate from in-progress work and documented workflows for better developer-designer alignment
Ongoing implementation - Ensuring adoption and scalability
Onboarded the new product designer through workshops, walkthroughs, and documentation, ensuring a smooth transition
Collected feedback from developers and other stakeholders to fine-tune accessibility and usability of the new system
Refined processes based on real-world use, iterating on file structure and documentation to further enhance team efficiency
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
01
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
SOLUTION
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.
Snapshot of the then-current figma workspace and proposed restructuring
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.
02
Building a product design 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
IMPACT
The new system ensured that Jotson’s product team could scale effortlessly as the company grew.
Snapshot of the design audit. We identified duplicates and organized the designs based on how they can be split out into dedicated figma files.
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.
One of the restructured card patterns with more functionality built into the properties.
03
Systems thinking: Creating an illustration system
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.
After nailing the style, I updated the old illustrations into separated objects to create an atomic-level system. The final versions were then built into a component library to enable designers to compose new illustrated visuals as needed.
These are some of the updated illustration compositions that went on to be implemented into the app.
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 involves intentional structure. A well-documented, organized system enabled Jotson’s new designer to onboard smoothly without endless back-and-forth.
A design system is a living document. Adoption will remain high when the system keeps pace with the growth of the product and of the team.
Organization drives efficiency. A clean workspace and structured processes didn’t just benefit design, it also improved collaboration across product, marketing, and leadership.
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
