watercolor.png

EdgeRover

Helping users organize content across storage devices

coverstraight.png

ROLE

RESPONSIBILITIES

TEAM

DURATION

Interaction Designer

UX Design
Foundational Research
Wireframing + Prototyping
Usability Testing

3 designers
2 SWE
1 PM

3 months

CHAPTER 1

Background

The product

My role

Western Digital is a company that sells multiple data storage solutions. They began building EdgeRover, a product that indexes and searches across multiple storage sources such as hard drives, cloud, flash drives, etc.

As an interaction designer, I was asked to research pain-points and opportunities in this problem space and design a shippable solution after rigorous wireframing, testing, etc.

"Find and solve product opportunities problems our users have when managing files across multiple devices."

Design process overview

designpath.png

CHAPTER 2

Defining the problem

Qualitative research

I conducted 4 semi-structured interviews with owners of multiple storage products - here are the abbreviated findings.

1

Users feel paralyzed by the number of
"junk" files that they've
accumulated.

2

Users are wary of auto-cleaning software, and want to review each file deletion

3

Users want to view the file's context (in the folder) prior to deciding to delete it

Narrowing "junk files" scope with stakeholders

narrow.png

Decision: focus on just duplicate files
 

The two other designers would take on the search/browse functionality of EdgeRover. I was the main designer of the duplicates cleaner, with help and review from other designers, PM, etc.

Complexity of problem

At this point, I wasn’t quite sure how to resolve the tension between: 

  1. Users wanting to review all cleaning suggestions

  2. Users wanting this to not feel like an overwhelming chore

How might we support users in accurately cleaning duplicates in a manner that is not daunting and paralyzing?

Design principles:
Approachable, Trustworthy, Satisfying

CHAPTER 3

Competitive analysis

logos_edited.png

Many of the competitors tend to be utilitarian and overwhelmingly complex - not exactly making the task feel any less daunting!

Things they did well

image 51.png

Side-by-side image comparison for easy verification of duplicates

image 53.png

2 column layout provides both a micro/macro overview of duplicates, which grounds the user in where they are in the overall process

image 55.png

Representing a set of duplicates as a single group helps reduce visual/cognitive load

CHAPTER 4

Early designs

Initial concept design

After reviewing some possible directions during design crit with the other designers, I decided to push forward with a cleaning 'widget' that would reside at the top of the home page and offer suggestions periodically.

Goal: make cleaning feel bite-sized, instead of like a monumental chore

widgetdiagram.png

Dynamic, periodic cleaning widget
 

Since EdgeRover is a tool used to search across multiple data sources, I assumed users would most likely open the tool when needing to find a file. Rather than asking users to clean up all of their duplicates at once, I tried piggyback-ing on this primary use case to surface small steps over time.

flow1.png

While still at the low fidelity stage, there were several considerations and questions I explored through conceptual wireframes:

metadata.png

How should duplicates be portrayed - grouped together, or listed separately? How many is too many?

engagingduplicates.png

Does it feel more approachable if we treat duplicates as "tiles" to be cleared?

verification.png

Are there ways to improve suggestion accuracy?

Frame 116539.png

How can we celebrate wins?

ezgif.com-gif-maker (8).gif

Can animations help make cleaning feel more satisfying?

Creating two prototypes A and B

I moved onto two prototypes to test some assumptions related to the questions above. I decided on using individuals "cards" to display a single set of duplicates.

The biggest difference in the two prototypes lay in the card format themselves, such as amount of meta data, how you dismiss a card, the terms "manage" a file versus "delete" a file,  etc.

Both versions included a way to open the source folder, because of the earlier finding that indicated users understand a file by its context

fixedupes.png

Version A (in video)

Version B

Usability testing findings

fixedupes.png

"Does X mean delete or dismiss?"
Users were very hesitant around language or iconography that was too ambiguous.

"This is good, I want to verify the modified date for both files."
A limited amount of meta data is best to build a sense of trust

"I'm not going to press delete - that worries me a bit. How will I know it was actually deleted?"
Users still trusted deleting their files through their their native file explorer rather than through EdgeRover. Therefore, version A was preferred.

I conducted 10 unmoderated sessions through Usertesting.com. Below are some of the common findings.

unnamed.png

Cleaning felt satisfying!
Seeing each file disappear off of their screen along with how much space was saved gave users a high sense of satisfaction.

Okay, so initially the concept seemed to be resonating overall - however, listening to the users made me realize that the original, assumed user flow was flawed.

A fundamentally flawed assumption in the user flow was revealed by testing

Users described their current cleaning habits as cyclical, where they would put off cleaning until they hit a stress trigger caused something like not being able to find a file in their clutter.

This "stress trigger" is when they would most likely use Edgerover to locate the file. Thus, they would already be at a point where their device organization had become chaotic, so a mini-cleanup widget would feel insufficient. 

WORLDWIDE

Slide 16_9 - 34.png

Moment most likely to use EdgeRover

The realization

Rather than making the task feel bite-sized, we should focus on a deep cleaning process that feels supportive at the moment they are most likely to use EdgeRover.

REFRAME PROBLEM

How might we decrease effort and anxiety around cleaning duplicates when users engage in a deep clean?

CHAPTER 5

Revised design

Revisiting the user flow

This time, let's revise the user flow to start with the trigger for the deep clean.

flow2.png

Revised goal: Make deep cleaning approachable

High-level design decision

Utilize a two column approach found in the competitive analysis. I chose this layout because I wanted to provide the user with an overview of all of their duplicates on one side with an adjacent preview on the other, thus creating an easy visual relationship and doesn't open a separate window which might increase cognitive load.

Recents - Discover.png

Version 1

For testing purposes, I created two variations. Version 1 visualized the groups of duplicate files as clustered tiles that give the user a quick understanding of which sets were most problematically duplicated. When a line item is selected, the right column displays multiple previews.

845.png

Version 2

Version 2 visualized the duplicate files on individual lines, but stacked into sections in the left column. When a line item was selected, it showed more meta data in the preview panel on the right than in Version 1. 

840.png

Testing results - Version 1 wins!

Users slightly preferred version 1 in terms of approachability, and greatly preferred it in terms of satisfaction/fun, which were both design principles set forth in the beginning.

845.png

I also tested the FTUE for figuring out what folders we needed to look in for duplicates.

911.png

I was happy because during testing, users (unprompted) would ask questions like "When is this coming out?" or "I needed this like starting 4 years ago." I felt really pleased that we had accurately identified a user need and was on the right path to solving it.

CHAPTER 6

Ready to ship

Applying the design system & creating specs

There was a developed design system in place by other designers, so I applied the same treatments to my design. I spec'd out the behavior of the components for the developers.

Frame 2597.png
Frame 2596.png
specs.png

"Final" designs!

The product entered open beta in the winter of 2020, and is currently available for download online.

ftue.png
edgecase2.png
mainapp.png
empty state.png