✢ Improving design library components
Making enhancements to design components for an overall better user experience for a cloud file storage app.
Duration
1 year
Year
2024-2025
Tools
Figma
As the main designer for Sync's new UI, I refined components from the design agency’s pattern library to enhance usability, incorporating feedback and aligning with product requirements.
These are some of my contributions.
These are some of my contributions.
Improving file and folder selection
Based on user feedback, improvements to the item selection interaction needed to be made. Users found the previous method unclear, struggled with multi-selecting items and could not use certain keyboard interactions that they were usually used to. Below is the design that the Design team compromised on.
Checkboxes to clearly indicate the option for multi-selection
Users were unsure how to multi-select items. By introducing checkboxes— a well-established UI element for multi-selection dating back to the early days of the internet— it is now clear that multi-selection is possible.
Checkbox for selecting all items was added
For users unfamiliar with using CTRL/CMD+A to select all, a “Select all”' checkbox was added for easier selection.
A different interaction more suited for touch screen device sizes
For touchscreen devices where a hover state isn't available, an alternative design was created. When a user taps on a row to select an item, the selected state will be shown with a checkbox, and a circular border will appear around the other item icons to indicate multi-selection.
Additional interactions to easily select multiple items
Enhanced interaction capabilities for selecting and deselecting items was defined and handed off. This is designed for users who prefer using both keyboard shortcuts and the mouse for efficiency.
Folder management actions while in the folder
I added the ability to indicate when a folder is shared and included folder management actions, allowing users to manage their folders without needing to navigate to the parent folder. This allows a seamless experience for folder management.
Before
After
Custom icons
When Google icons don’t quite fit our needs, I’ve customized them by editing the original icons to better suit our uses.
✧ Thank you for reading ✧
Interested in seeing more? Try these:
