Moz 2.0 — Darianflix

1

Project Moz 2.0

0:56

Rebuilding everything for a consistent, modern style.

2

One good screen kicked off a product-wide redesign

Intro

How a weekend redesign helped me get company-wide commitment to rebuild Moz Pro's UI/UX, how I supported my team throughout it, and what happened when it became too slow.

3

How it all started

Context

Moz Pro’s declining engagement turns a long-running “silver bullet” question into a product experience problem.

4

Domain Overview surfaced a big problem

more context

Domain Overview succeeds, then makes the rest of Moz Pro look even more dated by comparison.

5

Strategy

The business case becomes a company-level UX overhaul with clear goals, constraints, and success signals.

6

Synthesized every source of feedback we had

Step 01

Five feedback systems reveal that nearly a quarter of customer feedback points to UX and guidance.

7

Prioritized the findings with every department

Step 02

Product, Dev, CS, Account Management, Sales, and Marketing align on the highest-value UX work.

8

Pitched the plan and got buy-in

Step 03

A formal leadership pitch turns “better UX” into Moz 2.0, a top-level company initiative.

9

STAT’s redesign was also approved!

Curveball!

STAT’s redesign is approved at the same time, forcing a sharp split between leadership and IC work.

10

Solidified the plan for Phase 1

Step 04

Phase 1 becomes a section-by-section plan for shipping visible value sooner.

11

Built the foundation of the pattern library

Step 05

The team gets a cleaner Material UI-based pattern library foundation to build from.

12

Set up tracking tools for benchmarking

Step 06

Pendo and Microsoft Clarity create the behavioral baseline for every redesigned section.

13

Restructured the team

Step 07

A restructured team gives Moz Pro the design throughput the overhaul needs.

14

Set a tailored strategy for each section

Step 08

Each product section gets its own right-sized strategy instead of a one-size-fits-all process.

15

Reviewed, mentored, and unblocked

Step 09

Design reviews, mentoring, research support, and unblock sessions keep the work moving.

16

Kept the pattern library honest

Step 10

Bi-weekly library reviews keep new components coherent and documented.

17

Set up tracking on each new design

Step 11

Each rebuilt section ships with tracking in place from day one.

18

Helped plan the betas and iterate

Step 12

Beta planning and iteration reveal users want denser data and fewer awkward in-between states.

19

Released, monitored, and went again

Step 13

The team ships, monitors feedback, and rolls learning into the next section.

20

We were still too slow

Curveball!

Backend blockers and expanding scope prove the overhaul still is not moving fast enough.

21

So I pitched a faster approach

Step 14

A faster parallel approach starts clearing UI debt while the main overhaul continues.

22

Project 1: Convert the remaining legacy pages

Step 15

A contractor converts lower-priority legacy pages under tight scope constraints.

23

Project 2: Reduce whitespace and increase density

Step 16

Whitespace and component density become their own focused product improvement.

24

Project 3: Explore tying the website and app together

Step 17

Website and app concepts explore a more connected front-door-to-product experience.

25

Et voila!

Old and redesigned Moz Pro screens scroll together to show the shape of the overhaul.

26

It’s been going well so far!

The Outcome

After key sections ship, paid-user growth finally starts outpacing cancellations.