cover.png

the backstory

UX design | Design research | 3 months

In a previous project, EdgeRover Desktop, I described the problem that users who owned 3+ storage devices had: duplicates! If you're interested in a deeper analysis of the user research around EdgeRover Desktop, the first few sections of that project discuss the findings. 

research

EdgeRover Desktop attempted to address the problem of users wanting to perform a deep clean of their storage devices. But after a few interviews, it was revealed that there was a separate, adjacent problem of users being unable to prevent the devices from becoming so hectic in the first place. This was particularly important for our users who own 3+ storage devices and lead to cyclical, stressful file purging.

I proposed to the team that problem should not be handled by the full desktop software that would likely only be accessed when the user was fed up with their disorganization. Instead, to address the problem of prevention, we need a more persistent, proactive medium the user would frequently see in passing - in the form of widgets on a mobile home screen.

EdgeRover widget tells me about a few duplicates I could clean to save some space
When I have a moment, I check out what the cleanup suggestions are more closely.
Since it seems like it'll take just a few minutes, I tidy up a bit.
I go about my day soon after, feeling a bit of tidying satisfaction.

While we intend to develop desktop widgets AND mobile widgets, due to the project schedule and desktop dev team workload, I focused first on mobile widgets. In addition, the widgets extended beyond just "duplicates" removal - from previous interviews with our users, I had found additional use cases that could benefit from this persistent platform.


"I don't know what files I even have now, because of all the clutter. I'm pretty sure some files are of forms I filled out years ago."

"You know you take photos of friends or, like, parties that you want to remember, and then forget about them. What was the point of taking the photo in the first place?"

"Well, I usually pull up files from the cloud on my phone to help talk about a story with a friend and show him a picture of it."

Slide 16_9 - 34.png

How might we form helpful organizational habits so that users don't accumulate stress and get better usage out of their content?

competitive analysis and medium research

If you're an expert on widgets already, you're probably familiar with what I'm about to share - but this platform was new to me so I spent a bit of time reading up on the technical and design limitations of widgets, and general good UX practices for mobile widgets. The learnings I presented to the team is the following:

Widgets are quick access points into a full product, are typically located on the home screen of a device.

 

They are related to the absolute main use cases that users might want to do or know most often from the product, and pretty hyper-specific to these use cases.

From the product side, they can offer a persistent presence in the user's daily life if they are appropriately addressing a need - driving activity towards the full product.

Slide.png

Good widgets are personal, contextual, and informative.

 

Some diagrammatic mockups I did to convey these qualities.

Personal

sample.png

Contextual

sample3.png
sample2.png

Informative

Interaction design is limited generally to two types: vertical scroll and tap.

interactions.png

Competitive analysis: categories of widgets.

 

Generally speaking, widgets tended to fall into one of three-four categories. I found a bunch of great examples, but here are some representative ones.

Information

image 62.png
image 68.png
image 66.png
image 67.png

Collection

drive.png
collection.png
dropbox.png

Control

control1.png
image 21.png
image 9.png

Design goals:

  1. Encourage proactive cleaning

  2. Encourage product engagement

Main use cases found:

  1. User needs to tidy files here and there when they have time

  2. User wants to make sure index is up-to-date

  3. User wants to revisit old files they forgot about

  4. User wants to know about their storage consumption

early wireframes

Here's a snippet of some of the many rounds of low fidelity wireframes. At this point, I'm thinking about the use cases and applying them to iterative ideation.

Clean helpers

Frame 181.png

Syncing

Frame 182.png

Storage info

Frame 183.png

The biggest struggle I had here was the mini-information architecture of each widget - what concepts belonged together, and what didn't? It probably doesn't make sense to have a photo lumped in with storage capacity of the device, for example.

Frame 185.png
Frame 164.png

After doing some quick testing with various non-designers in the office and critique from other designers, I began to solidify proper IA.

the next hurdle: adaptive states

Frame 186.png

State 1

Frame 187.png

State 2

State 1

Frame 140.png

State 2

Frame 142.png

State 3

Frame 141.png
Frame 136.png
Frame 135.png
Frame 137.png

visual tests and animation

ezgif.com-gif-maker (3).gif
ezgif.com-gif-maker (2).gif

final proposal

Frame 138.png
Frame 139.png
Frame 153.png
Frame 161.png
Frame 160.png
Frame 157.png
Frame 130.png
Frame 150.png
Frame 155.png
Frame 131.png