THE PROBLEM:
Users of an asset management app had to navigate complex folder trees each time they needed to pull an asset leading to irritation.
THE SOLUTION:
Integrate a function allowing users to ‘favorite’ a folder to provide quick access to frequently visited folders.
MY ROLE: UX Designer, UI Designer
TOOLS: Keynote, Adobe Illustrator, Adobe Photoshop, InVision
BACKGROUND:
Runner is an asset management application used by various groups within Sony Pictures Entertainment. At the time I worked on the application, the product was still in it’s early development but was already in use by the studio. The long term goal of Runner was to provide a faster, more user-friendly asset management system to replace shipping physical hard drives or existing file share systems in place.
As Runner was still in its early stages, users would have to navigate the folder tree each time they wanted access files from a specific folder. Through client meetings, users expressed desire for the ability to ‘bookmark’ folders for quick access.
ICON DESIGN:
As the concept behind ‘favorite’-ing a folder was simple, my team interestingly found the iconography to be the most challenging part of the feature. Initially, I sampled three different drafts of potential icons to indicate a folder was favorited. Interestingly, the team and testers were split on which icon they preferred. While icon #1 was favored by my team as it was more consistent with the design of other icons on Runner; icon #2 and icon #3 were favored by testers.
In the end, I decided to use icon #2.
Figuring the size of the icon would be about 20 x 20 pixels in its practical context, the star in icon #2 would be most visible to users. The outline of stars in icon #1 and icon #3 would be harder to see at such a small size, making it less apparent to users that they had favorited the folder.
EXPERIENCE DESIGN:
Dashboard Widget:
Adding a widget to the landing page was the first step. This way, users could immediately navigate to their favorited folders from their dashboard upon login.
Favoriting a folder:
As folders in the display already had a dropdown menu for deletion, I added the option to ‘favorite’ within the menu and created a straight forward interaction. It also became apparent in testing to add a success notification, as the change in icons was not prevalent enough to note a successful transaction. After favoriting a folder, the folder would appear on the widget on their dashboard. Users could also ‘un-favorite’ a folder using the same dropdown menu on folders that had been favorited earlier.
HIGH-FIDELITY:
As Runner had an established style guide, applying UI elements to my wireframes was quite simple.
ITERATION (Un-favoriting a folder):
While users greatly appreciated the ‘favorite folder’ option. We soon found that un-favoriting a folder became a hassle as users would need to navigate the folder tree again and un-favorite via the dropdown menu.
The feedback from users prompted me to add an option to un-favorite a folder directly from the dashboard widget. To accomplish this, I simply added an ‘X’ to each line item within the widget. This way, users would not need to re-navigate the folder tree.
CONCLUSION:
While the desired feature and the flow were quite straight forward in concept, unexpected hurdles such as choosing between which icons taught me that no matter how simple a task may seem it is still easy to overlook aspects. This was especially apparent when we realized we needed to add a way to un-favorite from the dashboard. It seemed ironic we spent so much time preparing a way to eliminate complex folder tree navigation but inadvertently created another case in which users would need to navigate the structure.