Redesigning E-commerce experience

Redesigning E-commerce experience

Redesigning E-commerce experience

Task-Focused Account, Orders & Subscription Management System

Task-Focused Account, Orders & Subscription Management System

Task-Focused Account, Orders & Subscription Management System

TL;DR

Problem

The in-app Shop was a WebView of the website — untailored content and web account flows fragmented the app and capped subscription growth.

The in-app Shop was a WebView of the website — untailored content and web account flows fragmented the app and capped subscription growth.

The in-app Shop was a WebView of the website — untailored content and web account flows fragmented the app and capped subscription growth.

Solution

A Native Shell + Web Core MVP — native order, subscription, and account modules shipped fast, without a full rebuild.

A Native Shell + Web Core MVP — native order, subscription, and account modules shipped fast, without a full rebuild.

A Native Shell + Web Core MVP — native order, subscription, and account modules shipped fast, without a full rebuild.

Impact

800+ subscriptions in two months · 87% task success in testing · order, subscription & account flows moved WebView → native.

800+ subscriptions in two months · 87% task success in testing · order, subscription & account flows moved WebView → native.

800+ subscriptions in two months · 87% task success in testing · order, subscription & account flows moved WebView → native.

Team

Design Lead · with PM, UX Writer, Data Analyst, Researcher, FE & BE, and XFN teams.

Design: Minnie Tang (Lead & Researcher)
PM: Shannon C
Engineering: Justin G; Jashwath N
CX: Rachel P; Kristine G

Design Lead · with PM, UX Writer, Data Analyst, Researcher, FE & BE, and XFN teams.

At a Glance

At a Glance

View App

View App

Address& Payment

Order

Subscription

Onboarding

Return

Following the release rollout, the website experience was updated to adopt the design as well.

Following the release rollout, the website experience was updated to adopt the design as well.

The Problem

The Problem

Every tab in the app felt like Whisker's — except the one that made money.

The Shop tab and the website served different business goals, yet the in-app Shop reused a WebView of the website. Untailored content and web-based account flows fragmented the app — limiting engagement and subscription growth. Three patterns did the real damage:

The Shop tab and the website served different business goals, yet the in-app Shop reused a WebView of the website. Untailored content and web-based account flows fragmented the app — limiting engagement and subscription growth. Three patterns did the real damage:

One-size-fits-all set up
One-size-fits-all set up

01

Fragmented experience

Web Drives Sales, App Builds Growth

Disconnected

Low Efficiency

02

Web View chaos

Disconnected UI, broken trust, and missed conversions

WebView-Bound

Inconsistent

03

High CX touchpoints

Mismatch account management Messy Data Pipeline

Mismatch account management Messy Data Pipeline

High Support

Low Insight

The Shop wasn't underperforming because it looked different. It was underperforming because it wasn't really part of the app.

The Shop wasn't underperforming because it looked different. It was underperforming because it wasn't really part of the app.

How might we improve the in-app Shop to support faster decisions and simpler order management — without a full rebuild or added engineering cost?

Research

Research

UX Strategy

Product Thinking

0 - 1

I pressure-tested the WebView before replacing it.

I pressure-tested the WebView before replacing it.

To make sure I was solving the right problem, I ran research to pressure-test the WebView approach, and benchmarked how native and hybrid e-commerce apps handled shopping — across both fully native and hybrid models.

To make sure I was solving the right problem, I ran research to pressure-test the WebView approach, and benchmarked how native and hybrid e-commerce apps handled shopping — across both fully native and hybrid models.

To make sure I was solving the right problem, I ran research to pressure-test the WebView approach, and benchmarked how native and hybrid e-commerce apps handled shopping — across both fully native and hybrid models.

12s

12s

+0%

+0%

average time on screen — people hunted for account & subscription flows

0%

0%

+0%

+0%

misclick rate in the WebView flows

[ research artifact: moderated test + survey + benchmark board ]

People couldn't find subscriptions or manage orders in the WebView — they wanted the speed and clarity of a native app.

People couldn't find subscriptions or manage orders in the WebView — they wanted the speed and clarity of a native app.

To make sure we were solving the right problem, we ran research to pressure-test the WebView approach. In parallel, I explored how similar e-commerce apps in the market approached shopping experiences, looking across both fully native and hybrid models.

FramerIt Website
FramerIt Website

The Call I Made

I didn't rebuild the shop. I shipped the half that mattered, native.

The north star was a fully native shop — but the timeframe was short. Working with the app-team PM, I defined an MVP t

The north star was a fully native shop — but the timeframe was short. Working with the app-team PM, I defined an MVP t

Native Shell + Web Core — native order, subscription, and account modules over a web core, phased by value.

Instead of

A full native rebuild (the north star) — the right long-term answer, but a long timeline and heavy engineering cost.

What it cost

Some surfaces stayed web for the MVP. I sequenced the highest-value flows native first — account, orders, subscriptions.

Who I brought

The app-team PM and engineering — aligned on a phased MVP so we could launch in months, not quarters.

Solution

Solution

Native. Delightful. Harmonized.

01 · Make it native

01 · Make it native

01 · Make it native

Streamlined account management — one account, four new modules (profile, orders, subscriptions, payment) rebuilt native.

Streamlined account management — one account, four new modules (profile, orders, subscriptions, payment) rebuilt native.

Before · WebView account

Before · WebView account

After · native modules

After · native modules

02 · Make it delightful

02 · Make it delightful

02 · Make it delightful

Unified the WebView and mobile with native interactions — swipe actions, photo upload, and a clear order/invoice view that helps people make decisions.

Unified the WebView and mobile with native interactions — swipe actions, photo upload, and a clear order/invoice view that helps people make decisions.

03 · Make it harmonized

03 · Make it harmonized

03 · Make it harmonized

Unified the WebView and mobile UI so the whole Shop felt like one product — consistent components, type, and layout.

Unified the WebView and mobile UI so the whole Shop felt like one product — consistent components, type, and layout.

Testing

Testing

Moderated usability testing on the prototype (n = 30) — traditional WebView vs. the native flow, task-based.

Moderated usability testing on the prototype (n = 30) — traditional WebView vs. the native flow, task-based.

87%

task success rate on the native flow

task success rate on the native flow

8s → 3s

average time on screen

average time on screen

24 → 100

usability score (misclicks fell to near-zero in test)

usability score (misclicks fell to near-zero in test)

Testing Prototype

Testing Prototype

“Cleaner, smoother, more trustworthy.” — participant, usability testing

What outlasted the project

The work didn't stop at the app.

The redesign produced a system, not just screens — and it reached past the surface I was asked to fix.

One account model

Four fragmented account surfaces became one coherent native account — reused across orders, subscriptions, and payment.

Four fragmented account surfaces became one coherent native account — reused across orders, subscriptions, and payment.

A shared mental model

Marketing-led web and user-centric app aligned on one shop system and one set of components.

Marketing-led web and user-centric app aligned on one shop system and one set of components.

A shipping pattern

Native Shell + Web Core

became a repeatable way to ship native value fast without a full rebuild.

became a repeatable way to ship native value fast without a full rebuild.

A reusable component library

I built a mobile shop component library that the website later adopted — the app's work ended up improving the web.

I built a mobile shop component library that the website later adopted — the app's work ended up improving the web.

The app stopped borrowing the website — and the website started borrowing the app.

Takeaway

Takeaway

Two things I'd change.

  • Anticipate dependency changes earlier. The website is marketing-led and the app is user-centric; I'd map those dependencies up front and adapt plans proactively as requirements evolved.

  • Lock the metrics before launch. I'd define the revenue and purchase baselines pre-launch so the impact is measured, not estimated.

  • Anticipate dependency changes earlier. The website is marketing-led and the app is user-centric; I'd map those dependencies up front and adapt plans proactively as requirements evolved.

  • Lock the metrics before launch. I'd define the revenue and purchase baselines pre-launch so the impact is measured, not estimated.

Frequent collaboration between the two teams was what made the alignment possible — that's what let a phased MVP ship without fragmenting the experience further.

Frequent collaboration between the two teams was what made the alignment possible — that's what let a phased MVP ship without fragmenting the experience further.

Next projects.

Next projects.

High-Stakes Onboarding & Error-Recovery

Onboarding/Activation

Hybrid AI-assisted onboarding with guided troubleshooting and seamless error recovery across app and hardware.

High-Stakes Onboarding & Error-Recovery

Onboarding/Activation

Hybrid AI-assisted onboarding with guided troubleshooting and seamless error recovery across app and hardware.

EST. 2025

2:06:12 UTC