JOTSON
Enabling the Jotson team to scale quickly
Design operations
Design system
ILLUSTRATION SYSTEM
JOTSON, A FAST GROWING startup, partnered with Tiller Digital to shape the product design of their brand and product from the ground up. Over the course of a year, a lean, cross-functional team comprising of two in-house developers, myself, a designer and junior developer from Tiller collaborated to bring the product vision to life. As the app reached a pivotal stage, Jotson prepared to transition to bring design in-house, with Tiller providing support in in the hiring process of a senior product designer who can carry the momentum forward.
01
Solving fragmentation with design organization
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:
Unorganized design files slowing down the workflows
Lack of a robust illustration system to enhance product and marketing visuals
Disjointed collaboration between teams using the same Figma workspace
For my process, I started with a detailed audit of Jotson’s design files. This was conducted together with the incumbent designer from Tiller. We focused on restructuring and categorizing critical assets while identifying gaps in functionality. This included restructuring design files, building a categorization system, and creating documentation for each design file that provided context and a wayfinding system for the contents of the files.
tl;dr
THE GOAL
Prepare the product design files for turnover to Jotson and to their incoming senior product designer
MY APPROACH
Interview the current agency-based designer and assess the state of the design files for handover
Identify critical files that needs restructuring and clean up
Triage the restructuring and ensure a collaborative workflow on figma is preserved between the design agency and the Jotson product team
THE RESULT
Built a framework preserving the integrity of the agency’s workflow while enabling the Jotson team to build and iterate designs in the same workspace
Created a robust design library for Jotson’s product team and the agency’s marketing design team
Restructured and cleaned up product design files
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 workspace
We had to factor in that the figma workspace for the brand involved two teams, Jotson and Tiller. At the time, Tiller designers contributed to the product work, myself included. We had user flows, customer discovery strategy files, the customer discovery roadmap, and all the UI patterns for the product. Side by side to this were random files for marketing needs, brainstorming figjams, presentation deck materials, and merchandise design files.
The first priority was creating a system to categorize all of these random files and bring order into the shared workspace. However, we were in a time crunch and while work on restructuring the workspace was ongoing, the design system also needed tending.
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: product and illustration
Without a standardized design system, tech and design debt was accumulating, making it harder for the team to work efficiently and maintain product integrity. To address this, I led the development of Jotson’s design system, ensuring it provided both structure and flexibility for future growth.
At the center of this initiative was a deep audit of existing UI patterns, brand assets, and illustrations. We needed a scalable approach that wouldn’t just standardize visual elements but would also enable designers and developers to work more seamlessly. The solution was to build a unified design library, encompassing core UI patterns, an expanded illustration system, and clear guidelines for the team.
I was split between cleaning up the workspace and authoring the design system. Collaborating with me was the incumbent designer. Our process involved me authoring components, them testing it as an end user, sharing feedback, and me iterating on the components until we landed in a place where the components were functioning as intended.
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.
The new illustration system became a critical storytelling tool for Jotson. Initially, Jotson’s visual identity leaned heavily on static UI mockups and abstract visuals, which, while effective, lacked warmth and emotional engagement. We introduced a structured illustration framework—defining a cohesive style, color palette, and usage guidelines—to create visuals that felt uniquely Jotson. This allowed us to convey complex energy concepts in a way that was approachable and engaging for users. The illustrations weren’t just decorative; they served functional roles in onboarding flows, empty states, product education, and marketing materials, reinforcing Jotson’s brand personality at every touchpoint.
MICHELLE WALSTRA
SR. PRODUCT DESIGNER, JOTSON
Everything makes sense.
Handoff (file) is real good to preserve what went into dev. Really love the read-me (Getting Started) sort of file at the beginning.
04
Impact to the teams
The impact was immediate. Internally, design consistency improved across both the product and external brand touch points, helping establish trust and credibility in a crowded market. The structured illustration system played a role in simplifying energy data for users, making the app feel more intuitive and engaging. With a solid foundation in place, Jotson’s design and development team could now focus on innovation rather than constantly fixing inconsistencies.
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
Impact to Jotson and the product
User feedback was positive. We received unsolicited feedback of how beautiful the app was and of how the features were helpful to homeowners. The product is young with not a lot of features available yet. But by ensuring the design was done well with a thoughtful and critical eye at user experience, making the product look "beautiful" wasn't just to serve aesthetics but leveraging aesthetics in building loyalty, brand equity, and a pleasurable user experience.
06
What I learned
There's no need to reinvent the wheel. A big help in the process were all the design library community files from big brands that were available freely in figma. For sure, in this case, many of the patterns were unique to the brand and we still had to custom build a lot of it. But by doing a quick audit of what more established brands do with their design library it allowed us to quickly identify the structure we needed for the brand.
Building a design system is never just about assembling reusable components, it’s also about fostering alignment across teams and creating a structure that allows them to focus on what matters. With Jotson, I saw firsthand how a well-structured system not only improved workflows but also strengthened brand storytelling.
The addition of the illustration system was a particularly valuable insight in balancing functionality with personality. It reinforced the idea that effective product design isn’t just about functionality, it’s also how illustration or a strong visual language can help connect ideas and aid in clarity around the functions of the product.
The newly organized figma workspace offered ways of working that were efficient and more easily navigable. The design system was now scalable, accessible, and adaptable to Jotson’s future growth. Hearing firsthand from the team; from the new senior designer, to the devs, and from the COO, how beneficial the design library was in setting standards for the product made for a very nice moment.
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
