## Stats
- Stage: Seed
- Size: 23 total, 9 engineers
- Location: Williamsburg, NY & Remote
- Profitable & Funded!

<Figure caption=' Whop team picture' >
<Image
  src='https://us-east-1-shared-usea1-02.graphassets.com/AGa9dLftvRaiWblNZuxI6z/2tpoybwnRAybJaEgT5H0'
  alt='Whop team picture'
  fill
  aspectRatio="853/365"
placeholder="blur"
blurDataURL="data:image/webp;base64,UklGRm4CAABXRUJQVlA4WAoAAAAgAAAATAAAIAAASUNDUMgBAAAAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADZWUDgggAAAABAGAJ0BKk0AIQA+2VylTbClv6I1XMsz8BsJaQAAYwXButI8qEQNBKwHr7VYmmwMLDMGQMLLJyH1IAD+5ynL7DfGBIfU376VEaqOpbPJrqZeBvhwXSHyGpbIQOu3wWjylRmYLRcVzxk8A9ir6P24v/9w1H4IWxxsMlsjgciQgAAA"
/>
</Figure>

## Introduction (situation)
When I decided to work with Whop in early 2022, the company was growing rapidly but lacking efficiency and consistency across their three web apps. Not only that, but the team had big plans to expand their maintained apps significantly to meet a wide variety of customer needs.

Tim Gutieras, the Founding Product Designer at Whop - Hey [ ]  [Tim](https://www.timguiteras.com/) 👋 - was one of the first people I met when Whop approached me about their Design Engineer Role. Immediately we started discussing a design system for Whop to cover the different app surface areas, as well as the shortcomings of the current component library. In my first day of assessing the current state by talking to Frontend devs and Tim, I had come up with the scope of what I needed to address ASAP.

1. Whop had recently matured up market to customers running upper 6 figure businesses past impromptu entrepreneurs. The new designs passed to the dev team represented this shift in design.
2. Components had many instances. Actual components that existed in the codebase included `ButtonWithLink` alongside `Button` and `ButtonNew`. There were also some components like `Tabs` that were built as a component in some places, and in others, completely customizable implementations that were not re-useable attempting to closer match the production implementation needed.
3. Developers were very unclear on which components were available, or how to use them. Many components were default exported, didn't have exported types, didn't have clear overlaps between the Figma components, and were undocumented in general.
4. Figma and Code were confusing to translate between. Components in Figma had starkly different namings for properties than in code. For example Figma would have a `type` and `color` where as code would compound those things into `variant="primary-ghost"`. 

## Taking stock of what was needed

After assessing the shortcomings of the current system, I created a project in Linear to accurately break down the solution and scope. Specifically I methodically went through the Design System Figma components, upcoming designs, and the existing products to find overlaps and missing components. This gave a quantitative view to the Design system components we needed as well as a qualitative view into which components needed prioritization. 

Having all of the components in Linear issues made it simple to communicate with the remote team on which components were needed for a feature to ship properly and simple enough to estimate the time investment needed before starting.

> Fun tidbit - the name `frosted-ui` comes from the company's initial name, Frosted Inc.

Components are the star of the show here, but a few more things needed to be completed in this project to succeed. 
- Developers actually using the components (visibility)
- Documentation to understand where to turn to for implementation
- Principles to create a streamlined set of expectations needed to be defined

## A component library becomes a bonafide Design System

I created a slack channel dedicated to announcing design system changes, requesting components/features and general feedback.

Things I did to make sure usage took hold:
- Any time UI was touched, I made sure to do a PR review
- Weekly frosted-ui open hours, dedicated to feedback and digging into frustrating / missing bits of frosted.
- Prefixing every component in Figma that had a Frosted sibling with an 🧊 emoji. This made it really easy for developers inspecting a Figma handoff file to know when to reach for a frosted imported component.
- Documentation using Storybook.js and later integrating component documentation into the Figma Dev Mode side panel. 

## Frosted-ui's impact on Whop

With 3 months of intensive component work, and 5 of maintenance and composition work invested, here are the stats, stacked up:
- Overwhelmingly positive feedback from developers using frosted-ui. 

  <Figure                                                                                                                       
    caption=' A demo of the Rich Text Editor that I built for Whop using
            TipTap and frosted-ui components.'                                                                                  
  >                                                                                                                             
    <div className='relative h-0 mt-4' style={{ paddingBottom: '63.08%' }}>                                                     
      <iframe                                                                                                                   
        title='A demo of the Rich Text Editor that I built for Whop using TipTap and Frosted-UI components.'                    
        src='https://www.loom.com/embed/8f8771c9948949babbc1dfce0ce50101?sid=1ca499a6-5fbd-4048-9577-ce1516f18675'              
        allowFullScreen                                                                                                         
        className='absolute top-0 left-0 w-full h-full rounded-lg'
      />                                                                                                                        
    </div>                                                     
  </Figure>

A bespoke, open source Tailwind Design System

Design/Product Engineer

Frosted-ui Design System

<Figure caption=' Complex table filters I built for Heron'>
  <video
    muted
    autoPlay
    loop
    className='w-full h-auto aspect-[320/107] border border-sage-3 rounded-lg bg-white'
  >
    <source src='/heron-filters.mp4' type='video/mp4' />
    Your browser does not support the video tag.
  </video>
</Figure>

Heron was a project where I got to sweat the design details and had the time to do so. This was a data-heavy application so I spent much of my focus regarding the UI/UX on interactive charts and tables.

Above, you're looking at one of the ways that I dug into displaying complex data in this case what could be hundreds of employees. This is built on-top of the filters API from `react-table`. Unseen from this video, I also built out customization for column visibility and the ability to save custom filter combinations as views.

<Figure caption='A screenshot of an interactive pie chart, built for Heron'>
  <Image
    src="https://us-east-1-shared-usea1-02.graphassets.com/AGa9dLftvRaiWblNZuxI6z/gGcS9j7QmmoFZlF5ZzIQ"
    alt='A screenshot of an interactive pie chart, built for Heron'
    fill
    aspectRatio="40/27"
    placeholder="blur"
    blurDataURL="data:image/webp;base64,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"
  />
</Figure>

Heron MVP

This project came about just as the OpenAI and Google Bard APIs were popularized. On a trip to London I made friends with the creator of ChartGPT who has a background in Backend and infrastructure, had seen some traction and wanted help with the UI and UX of the tool.

<Figure caption='ChartGPT promotional image'>
  <Image
    src="https://us-east-1-shared-usea1-02.graphassets.com/AGa9dLftvRaiWblNZuxI6z/QfmzDfaHRnWmdOTTdHUM"
    alt='ChartGPT promotional image'
    fill
    aspectRatio="40/21"
    placeholder="blur" blurDataURL="data:image/webp;base64,UklGRmoFAABXRUJQVlA4WAoAAAAgAAAAGgIAGgEASUNDUMgBAAAAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADZWUDggfAMAANA9AJ0BKhsCGwE+7XawU7ozryKj82s7QB2JaW7gC4geChSOVSXjj5dk8gEF4pJ1zIXUZtoUun1+u2YKMXbRmVJBO3IFg+Na6Us1actox4TRTDTULiLT2c2JOUOl3D0uiUHBsokzAWD5I5kwnErGaIug1m0kO0UzV0SgmsankpmrbA8QA1RMWfJ6QVY1N/BAPWAtMaIGsankpmhFoti1P2/EzKacgQNmflhDsSgmsank7WfzHBUkE/U0u91PyrxMwJl20vzHBUkFSQVJBUj5PDJFR1nmQ+z5JPyv65pMGkwaTBpMGkdUjRD1uf/9M7Ptmi5joXAmQp6oxbbWKlKOIiP+2+3I+O852wtoX1ZfVl9WX1ZUrJvEzALhEMA/P0UJ+YzgLJg0mDSTHWuiUE1jU7PCqLooNNh14RiP3RSTyzF/pQ4iBq6J5KZq6JQTRxcIvpzlegiQayBOkPjFtEoJrGpqqZq6JMWNTfuhGhckR5rRiBFF8gRqEhY6Ez9lMstEoHk9Iv3QoFwhv0Fi7n6uc5XmtFzyxg0JvIdRNQH1ScywzQHlDqQeqHjNo5JtlekX5+6X7mMswaDokvRkh6c8oXCG/YbTTwT86vf+6X7mNVZ15xdL9zGqs69G3S/jKMH+6X7mNVZ15xdL9zGqs689Zul+5jVWdeaAAP7tAt6WtTO47cPsNR7cjHt6urhW06W0DG+WHT3Ch+OBe1xauzaSRFQGS9DqzewFCFNq4Jt8VNXsDlHREMVBLSFWC3y+3U+OdmVBpiGe3tHfGY2wzyL/HKIDoKTnFR7aXgqkPEQm769bSowju1YUbTZ7njNxDZ+KG2ujbLdC5XowV7SMai76xCW2USGOMyoeYV/XfXI2AK422BCvLLIRfKOjs/3q8KIuNdQ6M4zv0bhd/mGLZxwijr8k+IomsVUNRPYAiY+/MmAGVz8JqF1vKDoRkRH1ZFgrmJGX+plwz/7xEnJG6y11zCu2SkqzVAsNVK+k64o5RUl8dZqKY8S+K717bDUKfWGBcikSXhZ43yH1CQNAD9j5s91FTseQVxpyXzuITil1gPQHYTZj2szZqsxfEmAMEM6lGPK0xSRaFXVTTVwTrbOLTB8oogNpVkiND8XxytXn36WuEuHVib5KBdOK5s4kuA85rT0M+TblV1L/TL4LieeDci3KAAAAAAAAAAAAAAA="
  />
</Figure>

The biggest thing I wanted to tackle was the tool feeling like a workspace rather than a chatbot. Below you can see the before and after of the redesign that was shipped.

Relevant links:
- The [live tool](https://chartgpt.dev/) is still possible to use
- The [GitHub repo](https://github.com/whoiskatrin/chartgpt), while no longer maintained is still public

<Figure caption='ChartGPT before redesign'>
  <Image
    src="https://us-east-1-shared-usea1-02.graphassets.com/AGa9dLftvRaiWblNZuxI6z/nSiMp46QOKTKxAOD1wUg"
    alt='ChartGPT before redesign'
    fill
    aspectRatio="701/746"
    placeholder="blur"
    blurDataURL="data:image/webp;base64,UklGRkYCAABXRUJQVlA4WAoAAAAgAAAATAAAUQAASUNDUMgBAAAAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADZWUDggWAAAAPAEAJ0BKk0AUgA+7Xa2VamnJKMhKAEwHYlpANW4A2IrWD7XAXrXm6AzPvla3J6sAAD+76wwizcFpCY6OIlvJyUQAubze+n5hvl0UtKg1cOGskrINmQAAAA="
  />
</Figure>

<Figure caption='ChartGPT after redesign'>
  <Image
    src="https://us-east-1-shared-usea1-02.graphassets.com/AGa9dLftvRaiWblNZuxI6z/7GlSKLBxSAO6ra05Gax4"
    alt='ChartGPT after redesign'
    fill
    aspectRatio="64/41"
    placeholder="blur"
    blurDataURL="data:image/jpeg;base64,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data:image/webp;base64,UklGRkAFAABXRUJQVlA4WAoAAAAgAAAAGgIAWQEASUNDUMgBAAAAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADZWUDggUgMAANA1AJ0BKhsCWgE+7Xa3VqmnJSOgCAEwHYlpbt+yMxSX6hRdFO4x6ABPYB77ZOQ99snIe+2TkPfbLOyjYG+3KQQnfe4mlQLJdsFLHhfI+zpWLXzY8bXnqKn7z4nkV4eu+eosTNbXQYK5JsR1eA0RDGSobvPk86Nk8BoCQumAI6ybbAUw8Ayw/RHWTbYCxEInZho3H97R9197SAMsP0R1k39HqgVJn+Ffyw/28UvEOss541E6tscPG3JmQT5eCIqZslRaP0R7A3qfvBNcp+89P+i5dACF+iMwJTRbNpMRfb1FT956insjcho/SUc9Rf6rJd5LM2u0zvneealYCrJtsCB7ttWuQ+Mk/+XZQLUrAVZNsuuq7dN4uToyXq3e6zzGOeLcqFr2r6HCC7Ti3pUos7od1oifoI+Cb7ZOQ991zjJCxJwhF5E8zMKYA99snIe/F9WRdGP93IdrUogWS7Xi5ORBTqxjw7zhutJg2jc2vFych78WH06tbKGTyxXcwWZ5OQ99snLoHbofGPYUadFLIe+2TkPf3jIY0po3FHlFfsiLk5D32yjSISMdWEcLxlurIl9LteLkxAAA/uvfdSX6beMPjrVsHWI3714nhGo8cc7wmHK9X0MEwf6miItUp1iXiceEuhzUgt2iUag0z5zHRKN6rM//4mSUvkeLqOB5uZr1DhWJJbgRwgGDLK+NXnKro6l1clwTCOymT2QP15xOxVygxEKqt5ezBf3s+pYLNJfZTrRlSAF3utv0U99XNhaunWBGmS0QIiXTjucNhtH5XIFacYNUdT6HddyM/PvdVYgaXbdV/An8LCt3abZ9sNzgVQQ19lt/EUcVSkWOPXczSaUbMIxAol3QXTA/OWOW4BmKh/TMp/oW15xDcoHsBaQhUy7H4VkHhwAIxO3AKzn2cByxj61fzFFOOXIywEL5BLO+aTWyvv2xtshfaSVgeRL2wAEtkP5tAvrIIdTrbLYD1ir5IABNuUFsbReFdO9FuHn0WYP5MCKIWXWw8AAJXyj1mjcPeaw1J3xPyXqQAEQs7Dfm8bHS2sNqwfAgAFZRfEkEBYhqVDlClJwALJws5k3nIM6iHHneEETbgAAz9DnE3guTgAAAUsVAxG/cs5IAAAAAAAA="
  />
</Figure>

Open source query for data visualization 

Projects

Frosted-ui Design System

Whop

Heron MVP

Heron

ChartGPT redesign

ChartGPT