I’m Trace, a designer building design<>code workflows with AI and design systems

/PROJECTS

FIG. 01AI/WF
NAME
AI workflows
NOTES
Harnesses in Obsidian. Chains of .md skills. Agent workflows (essentially cron jobs) serving Discworld emojis and Futurama memes.
AI workflows

Harnesses in Obsidian. Chains of .md skills. Agent workflows (essentially cron jobs) serving Discworld emojis and Futurama memes.

/SELECTED WORK

2x faster handoffs: A design and illustration system to cut design debt

  • ENERGY
  • DESIGN SYSTEM
  • ILLUSTRATION SYSTEM
DESIGN SYSTEM
0-1
Built and improved reusable components, cleaned up the file structure, established a new illustration system
FASTER HANDOFFS
2x
Teams could find and use the right files with less back-and-forth
ORGANIZED WORKSPACES
3+
Clear workspaces for product, web, and marketing teams
Snapshot of the new Jotson design system: components, typography, color, and illustration guidelines
A snapshot of the new design system

tl;dr

I helped Jotson, a growing energy management app, get ready to bring design in-house. The goal was to organize their design files, build a clear system, and help their new designer hit the ground running.

I got their Figma workspace organized with clear lanes for cross-channel collaboration, and together with another designer, built their first design system, redrew their icon library and established their illustration system.

Main navigation before: a grid of fixed nav variants

BEFORE

Variant bloat with fixed nav items and states

Main navigation after: one agnostic component

AFTER

One agnostic nav with robust properties

BEFORE & AFTER
Retooled the main nav to one component with robust properties.
Critical at this stage of the product with nav items still changing as features launched.
Analytics screen before the data visualization redesign

BEFORE

Analytics screen after the data visualization redesign

AFTER

BEFORE & AFTER
Introduced a richer data visualization experience with clear context
Onboarding screen
Onboarding
HQ screen
HQ
Analytics screen
Analytics
Resources screen
Resources
Toolkit screen
Toolkit
Improvements made on the user experience and interface design based on research findings
01—

Core system

The team found Jotson’s Figma files hard to use. Files were mixed, names were unclear, and devs didn’t know what was final. I was brought in to fix that.

I led the work:

  • Create sections for product, web, and marketing
  • Set up clear naming rules and color-coded covers
  • Build a dedicated design library with shared components

The product now has a single source of truth. Teams could find what they needed fast, designs became more consistent, product handoffs doubled and teams could now collaborate easier.

Original Jotson illustration style, a labeled household energy diagramOriginal Jotson illustration style, a labeled household energy diagram
BEFORE
Naive illustration style. Didn’t fully convey the complexity of the brand nor the flexibility to move between marketing and product use cases
Kilowatt-hours
Litres
Pounds
AFTER
Evolved style using silhouettes and negative space. Brand-focused with flexibility to cross between marketing and product use cases.
Spot illustration compositions, before and after
BEFORE & AFTER
Illustration compositions for product and marketing use
Original onboarding flow screens
Onboarding flow screens in the new design system
BEFORE & AFTER
Onboarding flow
02—

Illustration system

The old illustration style didn’t match the evolving product. I created a simpler, grown-up version of it. The new illustrations leveraged negative space and silhouettes with an intentionally limited palette. They were designed to be clean, modern, and scalable across sizes and surfaces and fit the brand’s maturity.

They are now better at explaining complex energy topics simply and on-brand, and work across product, web, and marketing.

03—

Key insights & design implications

Issues:

  • Files were disorganized, so teams lost time searching
  • Design debt was high, so devs rebuilt patterns again and again
  • Style was inconsistent, with no shared visual rules causing a fragmented user experience

Fixes:

  • A structured system made work easier for everyone
  • A single source for design artifacts saved developers time
  • A shared style gave users a consistent brand experience from first touchpoint
EXPLAINER VIDEO
An animated explainer of the Jotson app. I made the illustrations, storyboarded it in Figma and animated the final edit in After Effects, with sound effects as an extra touch. The turnaround was tight and took some late nights, and the brand and I were both happy with the result.

Impact & measurable outcomes

Short-term impact:

  • Product and dev teams worked faster
  • The new designer onboarded smoothly and was able to hit the ground running
  • Visual language is now aligned across product, web, and marketing

Long-term impact:

This project showed how a structured system leads to better teamwork, and how small changes can make a big difference.

  • The design system continues to grow and help provide users with a singular product experience across touch points
  • Teams now follow a clear process
  • Cross functional collaboration is faster and more efficient

/FEEDBACK

Sheldon: Trace has a fantastic visual sensibility and brought real polish to our product.

01 / 08Jotson
Sheldon ManabatSenior Software Developer

Trace was instrumental in our product design efforts to deliver a clean and scalable design system that made development smooth and efficient. She brought real polish to our product through her thoughtful approach to iconography and visual design.

Her ability to balance design thinking with practical execution made her contributions incredibly valuable from both a product and engineering perspective.

If I had to point out at one of her strongest skills, that would definitely be the ability to look at a design piece, understand that something is off, and turn that vague feeling into an objective and actionable feedback.

This ability to effectively deliver feedback has brought a lot of value to the team output and increasing their work quality.

I loved how she brought fresh ideas to the table, explained everything clearly, and kept everyone on track toward our goals. The design system she built for us finally gave us the consistency we needed.

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!

I appreciate Trace's organized and analytical mind. She communicates clearly and helps add extra clarity to processes that might otherwise be muddy and unorganized.

She advocated for us, fostered collaboration, and invested in everyone’s growth. Her leadership created an environment where we could do our best work and support each other.

I learned so much from her about what it means to lead.

Working alongside Trace at Helcim was an absolute pleasure. I genuinely miss our collaboration.

If I had to highlight one of her many strengths, it would definitely be her talent for identifying solutions where none previously existed. Her approachability and support made challenging scenarios much smoother, and I was genuinely grateful to have her partnership.

When the client struggled with inconsistencies and scalability issues in their design system, Trace’s deep understanding of both design principles and technical constraints allowed her to implement a solution that not only addressed these challenges but also improved the overall user experience. The impact of her work cannot be overstated.

Her innovative approach to simplifying the design system was a game changer, leading to greater consistency, efficiency, and ease of use for the team.

She is a very strong leader and has immense skill in leading client workshops, especially in the UX and CDR space.

What’s up, what’s up.

Currently at Noterro, building a design-to-code workflow loop with a design system that’s readable by AI on Figma and from the codebase.

Before that, I led design operations at Helcim and designed products at Tiller.

I’ve been lucky to work product end to end. That means weaving comfortably between product discovery, product design, brand design, and design systems.

When off duty, I’m building internal tools and micro apps for fun.

If you’re looking to geek out about AI and design, I’d love to chat. Reach out and we can swap .md skills.