Mobile File Manager
Designed for teams struggling with file organization
Treevah App
A file management App that archive desktop productivity on your iphone.
My Role: UX/UI Designer
Prototyping (User flows, Hi-fi prototypes, Interactive prototypes)
Design System
Usability Testing
Duration
12 weeks starting from Jul 2024
Tools
Figma, Bubble, Adobe Illustrator, Adobe Photoshop
Team
Mentored by Bryan Mulcrone and Rafael ; Design Team
Overview
This project is initiated based on the Treevah’s business strategy. Treevah launched their desktop product and was going to develop the mobile App platform, expanding the scope for more users.
With this business goal, I introduced an innovative end-to-end approach to designing a faster and more effective file management App.
Solutions
What if we could make mobile file management an active, intuitive experience that empowers users to find and access what they need instantly?
I reimagined mobile file management by introducing advanced filtering, intuitive navigation, and streamlined file access features. My design focused on addressing the challenges of small screens while providing users with tools to quickly locate and manage files.
I introduced advanced filtering options and a clear file structure overview to simplify navigation, along with side-by-side folder comparisons for better organization. The design also optimized key interactions like file movement and quick actions, transforming the mobile app into a distinct experience optimized for mobile-specific use cases but not only replicate the essential functionalities of the desktop product.
Project Goal
Building the mobile file management app within 3 months.
Our goal for the project was to redefine the mobile file management experience by designing and developing a mobile app that matches the efficiency and power of desktop tools, while embracing the unique needs of mobile users and a rapidly evolving business.
Our high-level goals were to:
Make file organization and access on mobile fast, simple, and intuitive.
Provide users with advanced filtering and navigation tools on smaller screens.
Create a mobile file management experience that complements Treevah’s desktop product while delivering mobile-specific value.
Pain Points
Difficult File Access on Mobile
Users often need to find files quickly during meetings, classes, or while on the go, but existing mobile file managers lack efficient filtering and search capabilities.
Limited Mobile-Specific Functionality
Most mobile file management apps simply replicate desktop features without optimizing for smaller screens, making navigation and organization cumbersome.
Inconsistent Cross-Platform Experience
Users expect a seamless transition between desktop and mobile, but inconsistencies in folder structures, file syncing, and usability create friction in their workflow.
Meet Users
Lee
Project Manager
"I need quick and reliable access to my files during meetings or when I’m traveling."
Bio
Lee works for a consulting firm and spends much of his time in client meetings and traveling. He often has to reference documents, presentations, and reports on his phone but finds existing mobile file management apps slow and inefficient.
Frustrations
Lee feels difficulty managing a large numbers of file and sharing them on the go, slow search and filtering options delay his work.
Needs
Lee needs efficient file organization tools to handle large numbers of files, and simple file-sharing to collaborate on the go.
Linda
College Student
"I want to keep my notes and assignments organized without wasting time looking for them."
Bio
Linda is a computer science student who manages a lot of digital coursework, research files, and project documents. She primarily organizes files on her laptop but often needs quick access on his phone during classes or group meetings.
Frustrations
Linda must locate files instantly during group discussions or lectures but struggles with current apps that are slow or poorly organized.
Needs
She wants a search feature to instantly locate files by keywords or tags, and clear folder structures for coursework and project files.
What is the Initial Problem?
User Problem: Users primarily use mobile file management tools for viewing rather than organizing on the small screen, so they often need features tailored for quick file filtering and access on smaller screens.
Business Problem: Treevah aims to expand its user base by complementing its successful desktop product with a mobile app, aligning with evolving user expectations for seamless cross-platform experiences while adding mobile-specific value.
Treevah’s desktop product: focusing on the way of folders and files navigation
User Flow & Wireframs
As I got to understand the user needs and had a clear mission for the project goal, I unpacked the concept design for the mobile file navigation way.
I partnered with my mentor Rafael and used the existing user flow from Treevah’s desktop produc tas a foundation. I refined this flow and developed a mobile-specific value hierarchy for navigating folders, filtering content from folders to subfolders, and ultimately accessing files.
Login page
Folder view - The central hub where users can view their all top-level folders.
Folder selection view - Users can see subfolders users the top-level folders.
Subfolder view - Displays the content of a selected subfolders, and the lower level folders.
File view - A column view that includes the files from folders under subfolders, allowing users to swipe left and right.
Popup subfolder - Navigate users to go back the higher hierarchy by simple swipe up interaction.
Design System
I collaborated with other designers to continuously develop Treevah’s design system. Since Treevah already had an existing design system, I carefully reviewed it before creating prototypes to ensure my designs aligned with the company’s guidelines and branding. Throughout the design process, whenever I needed to add new icons, components, or adjust existing ones, I worked closely with Rafael, who was responsible for maintaining the design system. After receiving his feedback and approval, I updated my designs within the system, allowing synchronization with the prototypes. This collaboration enabled us to iterate quickly and efficiently. Below are the color codes and components I specifically created for the mobile app.
Colors
Primary
For success or confirmation messages and actions.
C8FFEA
2A4A49
1E3333
031718
Secondary
To draw users attention for system messages and status with an informative intention.
CDF0EF
8FF1CB
1D5755
2A4A49
Neutral
Normally used for backgrounds, borders, texts and tertiary buttons and actions.
FFFFFF
FFFFF7
BCBCBC
AFAFAF
Components
Header
Search
12:15
Folders
Search
12:15
Files
Search
12:15
Subfolders
Folder
SubFolder
SubFolder
SubFolder Parent
SubFolder Parent
File
Files
Files
Button
Folders
Subfolders
Files
Navigation Bar
My Tree
Favorites
Shared
Recent
Trash
My Tree
Favorites
Shared
Recent
Trash
My Tree
Favorites
Shared
Recent
Trash
My Tree
Favorites
Shared
Recent
Trash
My Tree
Favorites
Shared
Recent
Trash
Final Design
The final prototype UI was primarily designed by me, with collaboration from Rafael, who was responsible for building the design system. Beyond simple navigation between folders, subfolders, and files, as shown in the wireframes, I selected and integrated features from the desktop product into the mobile app. These enhancements were implemented through the bottom navigation bar, optimizing the mobile experience for greater functionality.
I am going to use Lee’s story to demonstrate the efficient way of Treevah’s mobile app. This story highlights how the app streamlines file management, making it easier to navigate, compare, and access documents on the go. The following pages showcase how Treevah enhances productivity by reducing friction in mobile file management and enabling users to stay organized anytime, anywhere.
It's Monday morning, and Lee, a project manager, is preparing for a client meeting while commuting on the subway. He opens the Treevah app and quickly logs in, seamlessly accessing his workspace without any distractions.
Landing page
Folder Navigation
After logging in, Lee lands on the Folders Page, where all his project files are neatly organized. He needs to find a career service document for his upcoming meeting. Without wasting time, he taps on “My Tree”, which contains all his essential work documents.
Subfolder Navigation
As Lee browses through his folders, he drills down into the "Career Services" subfolder. The structured layout, with document counts displayed next to each folder, reassures him that all necessary files are in place for his meeting. Lee quickly selected “Opportunities“, “Jobs”, “Internships” for next view.
File View
Lee needs to compare multiple documents for different clients. He switches to the Files Page, where documents are categorized for easy access. Using the side-by-side folder comparison feature, he quickly reviews documents under each folder, ensuring he properly selects the file that each client needs.
Bottom Navigation
Just before the meeting starts, Lee realizes he needs to reference another document from a different project folder. Instead of repeatedly tapping the back button, he uses the bottom navigation bar to quickly return to the previous folder level and select the required file.
With everything in place, Lee confidently shares the necessary documents with his clients before meeting starts, knowing that Treevah has made mobile file management efficient.
The Impact
The design of Treevah’s mobile app has a positive imapct on mobile file management, improving accessibility, navigation, and efficiency for users. At the time of one month post-launch, daily active users has grown from 0 to 500 steadily. As more users integrate the app into their workflow, continued optimization will further enhance usability and efficiency.
DAILY ACTIVE USERS GREW FROM 0 TO 500 IN THE FIRST MONTH
USER SATISFACTION INCREASED AFTER REDESIGNING NAVIGATION FLOWS AND FOLDER INTERACTIONS
USABILITY TESTING WITH 10+ TARGET USERS LED TO IMPROVED SEARCH AND FILTER FUNCTIONALITY
40+ REUSABLE UI COMPONENTS ENSURED DESIGN CONSISTENCY ACROSS MOBILE AND WEB