⁕ Moving files and resolving conflicts
Empowering users in a cloud file storage web app, by giving the ability to resolve file conflicts, while also designing for missing cases when moving files.
Duration
2 weeks
Tools
Figma, Figjam
Year
2024
I was the main designer that led Sync’s new responsive web UI designs, contracted from an external design agency. My role consisted of making design improvements, designing missing flows/cases and creating design specs for developer hand-off.
This case study is one of the many parts of the new UI designs from the agency that I evaluated and improved.
This case study is one of the many parts of the new UI designs from the agency that I evaluated and improved.
About the company
Sync.com is a Canadian-based cloud file storage company with over 2 million users. Serving both B2B and B2C needs, it focuses on providing a secure, encrypted service for storing, sharing, and collaborating on files.
Problem and context
As part of a heuristic evaluation of the current web UI, I uncovered a usability issue in how file conflicts were handled.
✢ When a naming conflict occurred, the web app did not notify users that moving a file would overwrite an existing one, leaving them unaware that a replacement had taken place. In the case of folders, the contents were merged into one folder.✢
This behaviour takes away control from the user and creates the risk of accidental data loss. This is also a risk to the company itself, because users could think that the company lost their files, which was a common complaint.
How a conflict occurs for files
How a conflict occurs for folders
The constraints
When working on the new web UI as a whole, what I always had to be mindful of for every epic was time and effort. That meant being mindful of pushing for back-end changes (which usually took a lot of effort due to Sync's legacy code) and refraining from re-designing everything that the agency gave. The top priority was to release the new UI by the launch date, so I had to balance my time and effort wisely.
Other usability issues and opportunities
I evaluated the existing UI from a heuristic standpoint to find opportunities for UX improvements for the new UI. I used Nielson Norman's usability heuristics as a guide when making my analysis. I took notes of usability issues and how the back-end worked for my own technical knowledge to use.
Evaluating the current move experience
Documented flow of the current move experience with notes
Exploring existing solutions
I then researched how other competitors handled conflicts for files and folders. This led me to believe that empowering the user by giving them actions to decide how they would like to resolve the issue was the best solution.
Some notes to compare competitors for inspiration
Proposed solutions for conflict files
After researching how competitors handle file conflicts, I proposed flow options to the Product team as well as highlighting my recommendation. Option 1 required back-end changes and Option 2 did not and was the less helpful (but still more useful than what was already happening).
In the end, we decided to go with my recommendation. The team felt it was worth the development effort for the improved usability and time constraint available.
In the end, we decided to go with my recommendation. The team felt it was worth the development effort for the improved usability and time constraint available.
❊ Option 1 (my recommendation)
When there is a conflict, users are informed and are given the choice to either replace, keep both or not move the files.
✷ Option 2
Users are still informed that there is a conflict, but are only given the choice to merge and replace (which is what was already happening, users are just now made aware).
The outcome
✦ Improved usability by empowering the user to control what happens to their files and understand why they are not able to move items into certain folders.
✽ Designed missing flows, states and breakpoints for moving files and folders with design specs, ready to be handed off to developers.
✸ The new updates ✸
Users can now decide how to resolve conflicts
Users are not only notified that there is an issue, but can now control what exactly happens to their files or folders when there is a conflict.
Users have the option to Replace, Keep both or Don't move the conflict file/folder
Users are informed about which folders they can't move their items into
Users are now informed about restricted folders
Users will now have an explanation as to why items can’t be moved to a folder, allowing them to make informed decisions on how to fix it. Previously, folders were simply hidden, which can cause confusion to the user and leave them wondering, "why"?
Flexible navigation through folder pathways
Users can now navigate to previous folder levels using a breadcrumb and a dropdown menu, rather than relying solely on a back button.
Users can navigate through folders with a breadcrumb or a context menu to go to higher level folders
Multiple items can be dragged and dropped into other folders
Drag and drop for quick and easy moves
This is a new feature for Sync users, allowing them to easily drag and drop files and folders into other folders.
A new folder can be created in the moment
Users can create new folders directly within their current location for a more seamless and efficient folder organization.
Users can now create new folders, providing flexible folder organization capabilities
✧ Thank you for reading ✧
Interested in seeing more? Try these:
