Making property data approachable at Archipelago Improving access to social services at Healthify
Personal projects
Archipelago
Revamping the product UI Design systems, process improvement
The challenge: Archipelago’s product did not keep up with the brand. The actual app and how it was presented on the marketing site looked like they’re from two different companies! Plus, we had a limited timeline with a full product roadmap.
The solution: We needed an efficient plan to refresh the UI without disrupting other product deadlines.
My role: The head of design and I led the overhaul. We handled planning and getting alignment among several teams together. I did the UI design, wrote user stories, and did QA on my own.
Impact: We rolled out our beautiful new UI over a period of 2 months! The entire product got a fresh look, and we caught up on 2 yers of tech debt. All without affecting product deadlines.
Before and after
We were using Elastic and Highcharts defaults. We also had some old custom UI that we never got around to fixing.
We put our brand into our product and replaced older UI with reusable components.
This isn’t what I signed up for.
What the real product looked like was not how it was presented on the marketing site. We didn’t have the green color scheme, the Matter typeface set, or the full logo. In fact, we were using a third party UI framework, on a version that was several releases behind.
We got buy-in from believers and skeptics.
The most challenging part was getting buy-in from product, design, and engineering teams. Previous attempts, such as a 40+ page engineering audit, failed because of a perceived high level of effort.
Instead, the design team did a scoping exercise to figure out the low effort, high impact changes we could do. Global UI updates (logo, color system, typography, etc) were grouped into themed 2-week sprints. Everything else went into the backlog.
Sorting our grievances.
Annotated mockups for designers and engineers.
Grouped grid view.
Map view. Next, the head of design and I pitched the plan to our lead front engineer to make sure changes were low effort. Then, we pitched to product and engineering leadership. Here, we highlighted that the scope would not affect other committed deadlines.
Updates came in small batches.
Our plan would take 4 two-week sprints. First, we needed a full sprint to upgrade our UI framework to the latest version. Then we updated the UI, starting with branding changes (logo, colors, fonts).
We allowed users to see incremental changes, instead of releasing one big rebrand, to cut down technical complexity.
Our Figma libraries are now up-to-date.
I oversaw major updates to our design system files in Figma. During a two-week sprint, the design team updated our UI library, added new styles that met accessibility requirements, simplified typography rules, and deprecated old assets without breaking existing designs.
Switching to on-brand colors.
Switching our fonts and reducing the number of styles.
We kept our icons in our old library before creating a new icon file.
Internal impact
Not only did we deliver a complete rebrand that touched every part of the product, we caught up on 2 years of tech debt.
We also introduced a new practice of engineers asking designers to do small, frequent UI testing. Previously, designers would do QA near the end of a build and then prioritize changes with PMs. Now, we’d give feedback for specific pull requests and stories, so we didn’t have to wait for the feature to be finished.