Token system
Prototyping
Accessibility
Achieving 72% faster searches with an efficient file management design
Timeline
12 weeks (Jun 2024 - Aug 2024)
Team
2 UX Designers, Product Manager, Developers
My role
UX Designer
Tools
Figma, Slack
In a nutshell
Before
After
Impact
20 → 4
Number of clicks per action
↓72%
Search time
x4
Efficiency
Project overview
Redesigned the file management system to improve navigation and user experience.
Treevah is a file management platform designed to make file organization easy and efficient. I focused on revamping the desktop UI for Treevah’s file management system, aiming to enhance navigation efficiency, address edge cases, and improve consistency across the interface. The project also involved updating the design system to align with evolving features and maintain accessibility compliance.
Visual design
Simplified the UI for clearer visual hierarchy and elegance.
I redesigned the visual elements to make the UI more understandable and aesthetically pleasing. By removing background gradients and reducing the color palette, I aimed to create a cleaner, more minimalistic look that made the interface feel elegant and easier to navigate.
Research & edge cases
Addressed diverse user scenarios through research and testing.
In collaboration with researchers, I documented over 20 edge cases in user interactions to identify areas needing specific design solutions.
Key features
Designed core file management interactions to meet user needs.
Three main features guided our design updates, focused on enhancing the usability of Treevah’s file management system for improved efficiency.
Folder hierarchy
I explored multiple hierarchy options including alphabetical, level-based, tree view hierarchies along with some hover interactions that could help users understand the folder locations.
Data manipulation
To handle the edge cases and successfully test them in the prototype, my team used Google Sheets along with the components of the design system to populate the data from an external source to simulate a real-world scenario of edge cases.
*Image blurred for NDA purposes
File action buttons
I simplified the file toolbar to include only the most essential actions, also removing the text associated with each icon, creating a consistent and minimal layout for streamlined file management.
Updating the design system
Aligned the design system with new features and user needs
As new features and UI elements emerged, I incorporated them into the design system. I defined and refined color, typography, and spacing tokens, ensuring these components maintained consistency.
Collaborating with researchers and developers
Worked closely with cross-functional teams to refine and perfect the design.
Collaboration was key to this project’s success.
Researchers
Provided user insights and A/B testing feedback, which guided data-driven design iterations to align closely with user needs.
Designers
Collaborated on building a cohesive design system with reusable components, ensuring visual consistency across Treevah’s platforms.
Product manager
Helped prioritize features and align design goals with Treevah’s overall product strategy, keeping the project focused on key user and business objectives.
Developers
Worked on implementing the design tokens, UI components, and accessibility standards, ensuring that designs translated accurately into the final product.
Final deliverable
Delivered a polished desktop UI with faster navigation and file retrieval.
The redesigned desktop UI improved navigation and reduced search time by 72%, with a more organized layout and intuitive interactions.
Impact
Through the redesign of the desktop UI and the introduction of advanced filtering options, I helped reduce search time by 36%, making it easier for users to find files quickly and efficiently.
A/B testing of design iterations showed a 20% increase in user satisfaction, demonstrating the value of data-driven design decisions and user-centered improvements.
I contributed to building a UI library in Figma with over 15 reusable components, ensuring consistency across Treevah’s platforms and enabling faster, more efficient development.
By adhering to WCAG 2.2 guidelines, I ensured that the redesigned interface was accessible to a wider audience, meeting accessibility standards across all platforms.
Learnings and outcomes
Adaptive Design Systems
Refined skills in creating flexible design systems capable of accommodating new features and edge cases without compromising consistency.Edge Case Handling
Gained experience in addressing diverse user scenarios, ensuring a robust user experience that adapts to different contexts and needs.Designing for all
Enhanced understanding of designing accessible interfaces by implementing WCAG guidelines, ensuring the UI was inclusive for all users.
To summarize
Achieved a 72% reduction in search time and enhanced usability with an updated UI and design system.
The redesign streamlined the user experience, resulting in faster file retrieval, improved organization, and a more accessible interface. By refining the design system and addressing key edge cases, the project delivered measurable improvements in user satisfaction and efficiency.
