MOBILE WEB
Dropbox File Previews

Project overview

Project type: Update Mobile Web Experience to more mobile and user friendly
Role: UX Lead
Timeline: 1 Quarters
Partners: UX Research, Product Management, Data Science, QA, Engineering
Outcome: Updated Mobile Web experience that is user friendly and mobile friendly


Background

Old Mobile Web approach
For years Dropbox’s Mobile strategy was focused on the app. Therefore there was little to no investment in the Mobile Web experience.

Insights for new approach

An experiment proved that removing mobile web would make customers frustrated and decrease Customer Satisfaction scores. It gave us the the data we needed to highlight the importance of Mobile web to our customers.


User Data

Data Science Collaboration
We worled with Data Science to learn more on the current users of mobile web.

Monthly Active Users

Mweb is basic: 85% of logged in users are Basic users (skew younger people with lower income
Mweb is International: ~2/3 of mobile web users are outside the US
Mweb is Essential: In a survey, 70% of participants said they are unable to install the app due to device limitations.


Personas

Basic user
Needs: Quickly access files on the go, has uninstalled app to save space.
Non-user sharing recipient

Needs: Quickly access files on the go, has uninstalled app to save space.

Pro user sharing sender

Needs: Quickly access files on the go, has uninstalled app to save space


Goals

  • Better support user needs: Based on persona and user researchImprove business outcomes
  • Improve business outcomes: Improve user engagement, sharing and signups
  • Validating designs: Run an experiment on two different designs


Design Principles

1. Focus on Jobs to be done

Show users value; make it dead simple to take key actions

2. Minimize surprises

Align actions with mobile app while keeping a similar momentum with desktop; utilize content design to explain any unexpected or extra steps

3. Scale easily

Create one simple solution that can be applied to different devices, browsers, scenarios


Considerations

Design is not responsive but adaptive:

Engineering and time constraints could not allow for a fully responsive solution

Consistency:

Align actions with mobile app while keeping a similar momentum with desktop; utilize content design to explain any unexpected or extra steps

Landing screen was out of scope:

Cannot change designs or text for landing screen. It is was responsible for 11% sign up for the app, needed to do further investigation



User interviews and customer feedback

We conducted a small user study to get customers feedback on some of their main issues with the current experience. And the top two insights we gathered were:
Key actions hard to accesses and find
be able to surface key actions user can take on file like downloading, sharing, copying a link e.t.c

Small file view
files should fill up most of screen


Frame Explorations

Spent time exploring different layouts based on business goals and customer needs.



Final layout - logged out users

We wanted to see what users responded to the most. We knew that downloading and saving were key actions for users. But we also wanted to make it easy for users to log in if they were logged so that they could get more capabilities. So we tested having users sign up, or having users copy the link to share as one of the main CTAs.



Final menu layout

The original menu was not mobile friendly or tap friendly. The new design was modeled after the current app menu design.This added consistency with existing design patterns also, solving the tap friendly issues.



Final layout - logged in users

The layout for logged in users was the same as logged out, but the CTAs are different. According to data team,  Sharing and Copying links are the top two CTAs. We wanted to find out which CTA was most important to our users.



Winning variants and outcomes

Experiment

We ran a 3 weeks test on Mobile Web users. We wanted to see which CTAs would produce the hiighest rates of sharing, downloads and sign ups.

  • Signups through the sign up action increased 11%
  • Sharing and Copying of links increased by 25%
  • Saving to Dropbox increased by 30%