UX STRATEGY

DROPBOX WEB TEMPLATES

A strategy to identify when, where and how Dropbox display new products.

In 2022, Dropbox expanded its product line through acquisitions, introducing several innovative new offerings. The primary objective was to effectively inform and engage users about these new additions on Dropbox.com.

ROLE

Product Designer

EMPLOYER

Dropbox

PLATFORM

Desktop

AREAS

UX Strategy

The messy start

Understanding the landscape

First we did sitewide audits of Dropbox.com, Hellosign.com and Docsend.com to identify the golden paths to conversion and learn about the users. We also uncovered inconsistencies in the paths amongst the sites. Lastly we synthesized a list of key learnings, hypotheses, and experiment ideas.

Compiling the insights

During the audit, we uncovered numerous opportunities. It was a significant task to prioritize over 50 insights and to distill them into a format that stakeholders could easily grasp. I took the initiative to condense the insights into six actionable items. Additionally, I spearheaded the team effort to craft an executive summary that was widely shared with stakeholders.

Consolidated key findings

There’s a lack of distinction between products, features and plans pages visually and structurally

Insight 1

Core-focused microsites don’t support a multi-product narrative

Insight 2

Insight 3

Customers need more product education to understand what HelloSign and DocSend do

Insight 4

HelloSign and DocSend have specific target audiences

New products are not yet shown on top converting pages (eg.
/plans, /official-sites, /space-upgrade

Insight 5

Insight 6

SKU (plans) pages need to be better defined

Bringing clarity to next steps

We need to determine our next big priority. I've created a user journey framework to identify which insights to address first.

Prioritizing Insight 1

There’s a lack of distinction between products, features and plans pages visually and structurally

Reason 1

Dropbox's web experience is highly fragmented, often causing users to feel lost while navigating the site.

Reason 2

As Dropbox moves away from cloud storage, it has become increasingly important to clearly distinguish between its products, features, and plans.

Reason 3

Strong support for enhancing design quality with more resources, dedicated teams, and innovative practices.

Reason 4

Internal users are seeking faster and more efficient ways to create and publish marketing pages.

Hypothesis

Creating page templates with clearer intent can establish quality standards for our internal customers involved in website creation. These templates will enhance customer orientation and boost the success rate of launching new products.

Providing next steps

I began with a plan of action: outlining goals, outcomes, drivers, outputs of each step, the intent behind each step, and how teams will collaborate.

Design principles

Then I created design principles regarding this workstream. I love using analogy to help stakeholders and teams understand the principles behind the designs.

Users come from anywhere from SEM, SEO to Email campaign. We are not looking for direct flow, which makes the pages distinction ever more crucial.

Subway analogy

Central station

Where users gain awareness and discover new products

The main station are the high traffic pages. They are larger, has a lot of high level info, and direct users to different branches.

The Satellite stations will take users to the regional spots. They are more focused and focuses on showcasing the importance of the specific products.

Where users get educated for new products

Satellite station

Exits

Where users evaluate and purchase the right plan

Taking the users to where they need to go. It should be simple and concise so users don’t get lost.

Solution Phase

To ensure everyone is aligned, I led a large-scale design sprint to synchronize the teams, boost awareness, and ignite excitement for this initiative. The design sprint also created the best way to collaborate and ideate ideas as a team

Design Sprint

Defining page goals

I began by identifying the potential page templates and defining each page’s goals before diving into designs. Rather than creating just one solution, I started with How Might We's (HMWs) so that the team can explore a broad range of solutions.

Visual Design

Although the visual design was overseen by the brand team, I closely collaborated with them to brainstorm and develop these concepts.

Measuring success

Homepage Animation experiment

The page template initiative has supplied comprehensive guidelines. Despite the company's shifting priorities, numerous concepts have been employed in experiments over the next few quarters.

  • 5.71% in GNARR, as well as a 2.37% lift in LTVs.

  • Increased Trial start across all product SKUs and higher TPCR for team SKUs.

  • Annualized lift of approximately $2.57 million in GNARR, with a projected lift of $1.6 million

Homepage multiproduct experiment

  • Resulted in an annualized lift of $1.8 million GNARR

Next
Next

Dropbox Design Systems