24 Hour Design Challenge

Redesigning the Dropbox dashboard to improve file type visibility
Redesigned Dropbox dashboard


Redesign the Dropbox dashboard to increase the visibility of different file types


Users can’t easily identify the types of files that they have saved


Clarify redundancies from the current dashboard design and give users a clear view of all available file types


Understand  ➡️  Define  ➡️  Ideate  ➡️  Test  ➡️  Prototype

Understanding how Dropbox and their competitors identify different file types

Current Dropbox dashboard design (Dec. 2019)
Observations about the current design

•Desktop dashboard displays both ‘Suggested for you’ and ‘Recent’ files which feels redundant

•File type of ‘Recent’ files is identified by the extension and a small icon

•There’s no way to organize or view by file type

Analysis of the major competitors

To kick off, I conducted a brief competitive analysis to learn about what the dashboards of other file hosting services look like. I chose to analyze Google Drive, Box, and iCloud Drive, and focused on researching how they identify different file types.

Google Drive dashboard (Dec. 2019)

All three file management products display file types on the user dashboard in a similar way. They rely on the file extension of individual documents as well as small icons to identify file types. None offer users the ability to view or organize files by file type on the dashboard. Dropbox could differentiate their dashboard design from the competitors by offering users a view of their files organized by type.

Defining a hypothetical user and exploring their goals and frustrations to prioritize potential tasks

The time constraints of this challenge prevented me from doing extensive user research. To make sure I wasn’t flying blind and operating on assumptions, I conducted a brief interview with a current Dropbox user to learn about their experience with the product. Based on the information I learned, I created a simple persona to define who the user might be and to provide a reference point for later design decisions.

Priority tasks the user will need to accomplish

•As a new or returning user, I want to view the types of files that I have saved

•As a new or returning user, I want to quickly find all of my files of a certain type

Generating layout ideas that highlight file type visibilty to hone in on a design solution

Quick sketches to generate layout ideas for the dashboard

I sketched four variations of a redesigned Dropbox dashboard. With each iteration, my goal was to remove redundancies from the current dashboard design and give users a clear view of all available file types. The ‘Suggested for you’ section or the ‘Recent’ section on each was replaced with a section called ‘All Files.’ The files are then either displayed in folders grouped by file type or they are able to be filtered by selecting a file type from the list next to the ‘All Files’ title.

Redesigned dashboard wireframe V1
Redesigned dashboard wireframe V2

Next I turned to Figma to create digital wireframes. I created two wireframes of the dashboard - one with the ‘All Files’ section replacing ‘Recent’ on the bottom third of the screen, the other with ‘All Files’ being displayed prominently as the first section on the top of the screen. All other elements of the current dashboard including the main navigation menu and CTAs remained unchanged.

Testing with potential users to gather feedback and creating a hi-fi mockup of the redesign

I created and distributed a preference test of the two wireframes. Time constraints limited the responses I was able to collect, but 3 out of 4 participants preferred version 2. Taking the users’ preferences into account, I created a high-fidelity mockup of the dashboard.

Final mockup of the Dropbox dashboard redesigned to increase file type visibility
Post-challenge reflections

At the start of this challenge, I wasn’t sure how much I would be able to accomplish and I was worried about running out of time. In the end, I was surprised that I was able to get so much done in just one day. This challenge helped me see the importance of breaking a larger problem down into smaller steps. By being methodical but flexible with the design process, a lot can be accomplished in a short amount of time.

View More Of My Work
Mail icon
LinkedIn IconInstagram IconBehance Icon