🌸 Jenny Ho 🎨 Design work 👩🏻‍💻 More about me 🌞 Resume 🌊 Say hi 🌸 Jenny Ho 🎨 Design work 👩🏻‍💻 More about me 🌞 Resume 🌊 Say hi 🌸 Jenny Ho 🎨 Design work 👩🏻‍💻 More about me 🌞 Resume 🌊 Say hi 

Design system & UI makeover

Design system, process improvement

Archipelago gives commercial real estate insurance companies a place to clean up and enhance their property data. Owners and brokers can present insurers trustworthy information for better quotes.

I led a refresh of our design system and product UI.


The challenge

We use Elastic UI (EUI) as the basis for our design system. However, we haven't kept up with EUI upgrades and Archipelago rebrands since 2021.

In early 2023, new frontend engineers joined Archipelago, giving us the opportunity to effect change.

What I did

I was the lead designer and PM — I coordinated with designers, product managers, and engineers throughout the project.

Impact

We cleared ~1.5 years’ worth of tech debt. Our design system’s up to date in production and in Figma. Plus, we shipped a series of UI improvements, including bug fixes and legacy feature updates.


Before...


We were using Elastic and Highcharts defaults. We also had some old custom UI that we never got around to fixing.

... and after.


We put more of our brand into our product and replaced older UI with reusable components.


Prioritizing low-effort, high-impact changes

The design team started with a brainstorm session where we prioritized what we wanted to fix. Then the head of design, lead frontend engineer, and I agreed on a plan:
  • The scope was visual or text changes only. Anything more complex was scrapped.
  • We’ll roll out improvements in multiple 2-week sprints alongside ongoing engineering work.
  • We’ll start with the design system, then move onto the product.
Sorting our grievances.


Design catch-up

Engineers and I worked in parallel — while they upgraded the version of EUI we’re on, I made changes as painless as possible for the design team. I oversaw:
  • Adding Archipelago-branded colors that meet accessibility requirements.
  • Simplifying typography guidelines.
  • Keeping the old version of EUI, but unpublished, to prevent older files breaking.

I also redesigned a few key screens based on our prioritization exercise, our new design system, and brand guidelines.
We kept our icons in our unpublished old library at first to cut scope. Switching to our fonts. Switching to our colors. Annotated mockups for designers and engineers.


Small batch implementation

Next, I got buy-in from product managers and engineering managers to roll out the redesign alongside current features. It was an acceptable risk for users to see incremental changes (instead of one rebrand release) to cut down complexity.

Finally, I wrote tickets for engineers to pick up if there’s extra time in sprints and helped QA.  
Small changes add up.

🗂 All projects