top of page

user experience designer

Matt Vollet

TOP
icons8-back-52_edited.png
AdobeStock_93555606_edited.jpg
Myio's deduplication interface allows for easy identification of duplicate photos and videos.

case study - 2020

Mylio: helping people identify and remove duplicate photos and videos.

10,000 feet

I was the lead and solo UX designer (partnered with a visual designer and engineer) in charge of designing and specifying a feature to help people manage their duplicate photos and videos across iOS, Android, Mac, and Windows devices.

Mylio is a great application to help bring photos and videos together from all your devices: phones, old laptops, and even that dusty external hard drive in the basement. As it turns out, this often results in people bringing in the same copy of a photo or video many times without knowing. 

 

For many years we kicked around the idea of implementing a deduplication feature directly into Mylio, and once the request picked up steam on our community forum and in support tickets, it became time to get serious and help people get control of their memories.

 

Photo and video deduplication was no small task, but one of the most important aspects was ensuring that it was approachable and easy to use. Because the end goal is deleting people’s actual photos, any roadblocks would scare people away and any confusion could cause people to lose their precious memories. 

My Design Process

Designing a photo deduplication tool needed to be rooted in best practices and practical implementation. Because the project was so big, working in an agile environment with Nielson Norman Group’s (NNg) Designing Thinking Infrastructure gave me a solid foundation to quickly define the problem, ideate concepts, iterate from feedback, and work directly with engineering to get things done. 

Design Pocess

Personas

If we’re being honest, who couldn’t benefit from double-checking that they don’t have duplicate photos or videos? I consider myself to be very organized with my family’s photos but still it would just be nice to make sure.

 

With that in mind, I believe that most every Mylio user will dabble with the deduplication tool that we create. And since Mylio is used by people ranging from professional photographers to lifestyle influencers, it was important that we acutely define who exactly we think would benefit the most from a file deduplication tool.

 

In speaking with users on the community forums, emailing a handful of users directly who had requested the feature from support, and 5 years of Mylio support experience under my belt, I pulled out the consistent themes and found two sets of people who would likely not only use deduplication, but would likely return to the feature over and over again.

Jenny Lampton Persona
Margaret Nelson Persona for Mylio
Personas

User Stories

With our target users defined it was time to build user stories to make a foundation of what a good deduplication tool should accomplish.

Jenny User Story for Dedupe
Margaret User Story for Dedupe
User Stories

Storyboards

Storyboarding was important with the deduplication feature to truly get into the mindset of the user and how (and when) the feature would be utilized. There were some obvious scenarios that were easy to understand, like sitting in front of a computer working on photos. But what about the people who wanted to use deduplication on the go? It was critical that the feature worked on all of our platforms, which means a mobile flow and usage had to be considered.

Big Picture Dedupe Storyboard
Big Picture Dedupe Storyboard
Stryboards

Journey Map

Much like storyboards, a journey map helped me understand the things that people were feeling and thinking while going through the deduplication process. I strived to keep the process straight forward but knew that deleting photos was a high-stress operation with huge payoff for the user if I got it right. 


The journey map helped me know when to use microcopy for encouragement, or when to slow down the user to reiterate a concept.  

Mylio's Dedupe Journey Map
Journey Map

User Flow

The last step before diving into design was the map the flow through the deduplication process. This helped me understand the foundation of what a user would be doing and what actions they could take from each section of deduplication. 

Mylio Dedupe user flow
User Flow

High Fidelity Prototypes

It was important that the model for deduplication didn’t stray too far from the norm. If anyone had experience with other deduplication software, one of the worst things that we could offer was a completely unique experience. So, when it became time to prototype, I looked closely at the competition and did a few basic wireframes. 

 

It wasn’t long before these wireframes were taken into Figma and turned into something more substantial. Working with our visual designer, we took the wireframes and turned them into high-fidelity prototypes that would be passed off to the engineer for development. 

Mylio Dedupe Main UI

The basic dedupe interface. A single call-to-actions helps people focus on using the auto-select tool since manually selecting duplicates is tiresome. 

Mylio Dedupe Main UI with selections

It was important to communicate the ramifications of using the dedupe tool, so we opted for red check boxes and a red "REMOVE SELECTED" button to drive home that the files were being removed from Mylio. The next step after selecting "Remove Selected" allows the files to either be deleted or moved to a different folder outside of Mylio.

Dedupe UI with Info Panel open

In some cases, a basic metadata recap wasn't enough for people to make a decision about which copy of a duplicate to delete. We allowed for the row to be selected, which opens Mylio's standard right panel to display all of the metadata related to the selected imaged.

Comparing images in Mylio's gallery view

Metadata may not always be enough to decide which image to select. This is especially true with edits. We made it easy to select the image in the left column to be taken to a gallery view where you can closely exam all of the images in that duplicate set and mark them for deletion here. This is extremely helpful when choosing the least-blurry shot out of a few burst photos.

Customizing dedupe's auto-select behavior.

We worked hard to make an intelligent default set for auto-select since it is pretty scary for people to rely on an application to choose which images to delete forever. This feature needed to be both powerful and incredibly user friendly so we used big icons, obvious grabbers, and little clutter.

Celebrating the victory of an organized library with the user

Once you were in the process of deduplicating your files, we wanted to help you celebrate and feel good about your decisions. We used a fun bouncing animation here and added some variable, cheeky text to try to help the user enjoy their accomplishment.

Prototypes

Takeaways

When working with a power house feature like file deduplicating, it was incredibly important to strike a balance between powerful and approachable. If the feature became too complicated or tried to do too much, the lack of trust from the user would make them not want to use it at all. However, if the feature didn't include the fundamentals that our competition standardized as "good dedupe", it would also fall flat.

This was a test in truly understanding our users, documenting their use cases, and working with them to ensure that the visual language and written language we used spoke to them in a trustworthy way. 

In the end the feature was well received and helped Mylio gain new users with large, unorganized libraries (the perfect fit for us). We grew trust by listening to users and building what they were asking for while helping expand the product's footprint into new territory and expanding who we can call a competitor. 

Takeaway
bottom of page