I collaborated with a team of two other UX designers over a five-week period to conduct UX research, design, and user testing for FileFillet, a Mac extension designed to simplify file transfers and organization on external USB storage devices. Our efforts aimed to improve the user experience and functionality of the extension, ensuring that Mac users had a seamless and efficient means of managing their files.
Transferring large numbers of files to USB devices can be a tedious and error-prone process, often requiring users to juggle multiple Finder windows simultaneously. This outdated method is inefficient and increases the risk of misplacing or losing important files during the transfer process.
FileFillet streamlines bulk file transfers to USB devices by introducing a convenient sidebar tab that provides easy access to files without cluttering your screen with multiple windows. With FileFillet, users can efficiently view, manage, and transfer files to their desired locations, saving time and reducing the risk of errors.
Our competitive analysis included popular file management solutions, and by examining their features, we identified key areas for FileFillet's consideration, such as:
This analysis provided valuable insights for FileFillet's development, helping to identify opportunities to enhance its features and better meet user needs.
Applying the 10 Nielsen Norman heuristics to FileFillet revealed several opportunities to enhance visual differentiation and improve consistency in design. Key takeaways include the need for:
Clear visual distinction between the "No Storage" and "Loaded" port container states.
Distinct visual cues for Port/Path container types, enabling users to quickly identify their drop targets.
Differentiation of multiple flash drives connected to the same port for better organization.
Consideration of real-world scenarios, such as additional devices (e.g., Mac Studio) and multi-monitor setups.
Consistency in design across devices, ensuring a seamless user experience.
Emphasis on recognition over recall in the design, making the interface more intuitive.
Outlined the ideal user journey across 4 stages, designed to simplify the transfer process and provide a smooth, intuitive experience:
Freelance photographers, among other professions, heavily rely on physical data transfers to carry out their daily tasks. Understanding the varied use cases and requirements of such individuals is crucial in designing an effective file management solution that caters to their needs and ensures a seamless experience.
We meticulously mapped each step of our MVPs, encompassing transfer, move/remove files, view drive contents/info, and format drive. This comprehensive approach not only addressed stakeholder concerns of incorporating animation sequences but also provided opportunities for future integrations. Our goal was to create a solid foundation for future growth and functionality, ensuring an unparalleled user experience.
In my sketches, I dove deep into the connection between user actions and animations, exploring how these could work together to make a rewarding transfer experience. With careful consideration of each interaction, I sought to craft a design that not only functioned but also captivated users with its fluidity and attention to detail.
Ramy, another designer on the team, focused on capturing the overall process flow, creating sketches that outlined multiple operation sequences and the core functionality of the platform.
Kate, our third designer, introduced a novel concept in her sketches by proposing a home page that streamlines navigation and improves the overall usability of the app for users interacting with their devices.
As my fellow designers concentrated on the visual design and aesthetics of individual components, my main responsibility was to construct the prototype and ensure its seamless functionality. Throughout this process, I had the opportunity to experiment with an array of animations, timings, and sequences to determine the most suitable combination for our platform.
Colors: We selected a green/turquoise color for the sidebar tab, as it stood out prominently against the default MacOS desktop wallpapers. This choice aimed to ensure that users could quickly locate and identify the tab for efficient navigation.
Font: Consistency with iOS standards was important, but legibility and clear differentiation between numbers and letters took precedence. Our chosen font fulfilled these criteria, providing a user-friendly experience.
UI Elements: To visually distinguish between USB devices, local drives, and folder levels, we employed a standard green gradient for devices and drives. Each subsequent folder level featured a darker gradient, offering users a visual cue to easily gauge their navigation depth within the folder hierarchy.
After carefully designing this high-fidelity prototype for user testing, we thoroughly tested its functionality to ensure a smooth user experience. With confidence in our work, we prepared for user testing, looking forward to gaining insights that would help us identify the strengths and weaknesses of our designs.
We conducted usability tests with a total of 5 participants, with me leading 2 of the tests. Our participants included Andrew, a principal product designer, and Christian, a director of product design at a start-up.
Below are the top 3 usability issues we identified during testing, along with our proposed solutions:
Issue 1: The FileFillet tab was too small and initially unnoticed by users.
Solution: Increase the size of the interactive tab by a few pixels.
Issue 2: Folder levels only expanded when users hovered over the arrow.
Solution: Enable responsiveness when hovering over the entire component.
Issue 3: Long folder titles needed to be adequately accommodated.
Solution: Allocate more space and adjust the font size.
After conducting user testing, we gained valuable insights into the strengths and weaknesses of our designs. We incorporated these findings into our iterative design process, refining the prototype further. A video example showcasing the final high-fidelity prototype can be seen below.
Copyright © 2024 Brendan Boe. All rights reserved.
Reproduction of any content on this website without express permission is prohibited.
