React migration

Site-wide codebase migration, used as an opportunity to address a decade of design debt across the entire site, update to our latest patterns, and implement our shared design system on the live site.

Before

After

Different codebase depending on surface.

Pages lived inside different codebases, proving to be a roadblock for implementing the design system.

One codebase

Migrating to one codebase made changes easier to make, and allowed the design system to function as intended.

Outdated and inconsistent patterns

With no way to make global changes, patterns drifted as individual surfaces got updated.

Shared component library

Components were updated to their most recent pattern, all connected to a shared library for easy updates.

Slow performance, slow conversion

App was sluggish, actions were often delayed, and inconsistent patterns generated a lot of friction.

50% reduced time to checkout

Performance and pattern improvements contributed to a 50% reduced time to checkout.

Before

One codebase

Migrating to one codebase made changes easier to make, and allowed the design system to function as intended.

Shared component library

Components were updated to their most recent pattern, all connected to a shared library for easy updates.

50% reduced time to checkout

Performance and pattern improvements contributed to a 50% reduced time to checkout.

After

The process

Scope

This project entailed a site-wide update, where absolutely every surface of the mobile app needed to be migrated over. Working with multiple engineering teams, surfaces were addressed, reviewed, and shipped individually over 2 quarters. I served as the point person making sure each time had the right designs and understood the need to connect to the shared component library.

Homepage

Maps

Brands

Deals

Strains

Listings

Deliveries

Venues

Events

Products

Category page

Account

Profile

Auditing

Each page was audited in detail, every page, variation, or state needed to be documented and recreated.

Turns out, the app had a lot of surfaces that went unloved for a period of time for one reason or another. Since this project was touching everywhere, it was the perfect opportunity to address the design debt that had accumulated over a decade.

Our modal patterns were a good example of how far things had drifted. Whenever you saw a modal, it was always slightly different than the last one you saw. Not on my watch!

Auditing

Each page was audited in detail, every page, variation, or state needed to be documented and recreated.

Our modal patterns were a good example of how far things had drifted. Whenever you saw a modal, it was always slightly different than the last one you saw. Not on my watch!

Recreating surfaces

Working with screenshots gathered during the audit, each page was recreated in Figma, only this time using our most up to date patterns and components.

While pages did not change drastically, the app became more consistent with each surface shipped.
Sometimes standard functionality, such as our filter patterns, got an upgrade in the design system, and was implemented with this work.

As an extra benefit, this also provided the design team with responsive, auto-layout enabled, figma screens for the entire site, which had only been a dream until now.

Recreating surfaces

Working with screenshots gathered during the audit, each page was recreated in Figma, only this time using our most up to date patterns and components.

As an extra benefit, this also provided the design team with responsive, auto-layout enabled, figma screens for the entire site, which had only been a dream until now.

Before

After

Shared component library

We had the design system in Figma, we had the tokens and components built out in code, but we couldn't make use of it yet.

Since much of the app was made with one-off, unshared patterns, we needed to go in page-by-page to get everything using the shared library.

Luckily, this project was doing exactly that and was the perfect opportunity to finally get that work implemented.

Shared component library

We had the design system in Figma, we had the tokens and components built out in code, but we couldn't make use of it yet.

Since much of the app was made with one-off, unshared patterns, we needed to go in page-by-page to get everything using the shared library.

Luckily, this project was doing exactly that and was the perfect opportunity to finally get that work implemented.

JOINT DESIGN SYSTEM

Product cards

Listing cards

Deal cards

Strain cards

Buttons

Selection inputs

Modals

Carousels

Lists

Input fields

Review

Reviews were organized with product leaders, engineers, and myself as the design point of contact.

We would do a series of testing sessions for each page, going through the changes and calling out any discrepancies.

Review sessions had a regular cadence until all stakeholders were satisfied with the result. As far as the designs, this allowed for a level of polish previously unseen at WM.

Impact

Rollout happened gradually over 2 quarters, starting with more out of the way, less crucial, flows, and ending with the homepage.

Not long after the final page was updated, we reported a 50% reduction in time to checkout, attributed to our performance and component updates.

Future updates were easier to make, and developers could now make use of the design system.

Impact

Rollout happened gradually over 2 quarters, starting with more out of the way, less crucial, flows, and ending with the homepage.

Not long after the final page was updated, we reported a 50% reduction in time to checkout, attributed to our performance and component updates.

Future updates were easier to make, and developers could now make use of the design system.

Menu

React migration

Before

After

Before

After

The process

Scope

Auditing

Auditing

Recreating surfaces

Recreating surfaces

Shared component library

Shared component library

Review

Impact

Impact

Completely updated, modernized site.

Improved performance, more responsive feeling

50% reduced time to checkout

30% reduction in delivery time