Designing a File Browser Service: Case Study
A brief story of how I designed Storj drive, a conceptual file browser service (online storage) app.
Conceptual project | Role: UI/UX Designer
The Company
Storj is an awesome company focused on decentralized cloud storage services. You can get more info via storj.io
The Challenge
We would like for you to design a “file browser” service. The service should allow any user to upload and download files, view files in a list, and share a link to a specific file.
Too long, didn’t read?
Check out my final presentation
My Design Process
- Competitive analysis to understand the product’s landscape.
- User Surveys to understand the habits of people regarding their online storage.
- Sketching, wireframing, design, and prototyping.
- Usability testing of the prototype.
- Iterate on design based on testing feedback.
1. Competitive Analysis
First, I decided to have a peek at what the competitors were up to, to understand what they were doing well, where they were lacking and what potential gaps I could fill with my design approach.
Key takeaways from the analysis that could make Storj drive offer better service
- Adding security measures to file sharing e.g password-protected links, and set links to expire.
- Offering more storage and file upload for less price.
- Separating file types clearly to allow for easy access.
- A smart sync feature that allows users to use their large files on their local hard drive without having to download the files. A desktop app can be of use in this case.
- Having a version history feature and increase the limit to a large number of days, above 180 days if possible.
- Making available customer support channels like email, phone, and live chat.
2. User Surveys
Next, I created a quick survey using Google forms to understand the habits of people concerning their online storage. Cause of the time limit, I worked with the responses I got from the 5 persons that had filled the form. View the full survey here
The survey should that all 5 (100%) persons suggested Google drive as their ideal and preferred online storage app. Some reasons they gave include:
- Synced with my email
- It’s easy to access
- Convenient
- Familiarity
- Good user experience, ease of access, and synchronization
When asked about the most frustrating thing about their solution, 2 persons mentioned Insufficient space as a concern, 1 person made mention the need to pause and resume downloads, while the other 2 had no issues with Google drive.
Insights from the User survey
- Ease of access is highly valued. Google Drive is integrated into Gmail and other Google services like forms, docs, spreadsheets, etc. Making it easy for users to see all their files in one place without much effort from them.
- Because Google has such a strong brand and most persons are familiar with it, it’s no surprise its services are preferred above others.
3. Wireframing and Designing Prototype
As this challenge was time-boxed, it was necessary to keep the research as lean as possible. Hence, I quickly proceeded to create sketches, wireframing, designing and animation assets, and the design of the mid-fidelity prototype.
Animated Assets I Created (made with Figmotion)
Design and Prototyping
To create an immersive experience for users, I decided to take an onboarding approach to the design. To guide them on how to carry out specific actions with Storj Drive. I felt this was better than just creating a static design.
4. Usability testing of the prototype
To further validate my design I conducted a short usability test on the prototype. Thankfully I got largely positive feedback, but they also stated some concerns. Below is a breakdown of feedback from the test.
Another user (not mentioned above) stated that some of the animated illustrations used in the tips sections (e.g search tip) didn’t exactly suit the tip context properly. I also carried out a heuristic evaluation on the prototype and saw small areas of improvement.
5. Iterate on design based on testing feedback.
From all the feedback gathered, I improved on the prototype design. I replaced some of the animated illustrations in the tips sections with better illustrations that suited the tips context and replaced the icons in the toast notifications with animated icons. I also made the download icon more visible and changed some of the text in other parts of the design to suit their use context better.
Styles and Visuals
I was given the style guide with typography, color palette, and some components to use as I saw fit.
Limitations and Future Work
One major limitation I faced was time, because of this limitation I couldn’t explore as many aspects of the app design as I would want to. In terms of future work, I would spend time prototyping how the interactions for other parts of the app would work. Create a landing page, features, and help page amongst other pages.
What I learned
The assessment was definitely a fun one for me. Designing something in such a short amount of time was an interesting experience. I learned not to overthink and to just focus on getting the job done.
Conclusion
All aspects of the Storj drive design definitely need further testing and deeper research in other for it to provide the best value to users. For this assessment, I assumed everything would work properly, but ideally, there would be a need for me to talk with the tech team of Storj to understand possible constraints.
I totally enjoyed my time working on this assessment and I would like to thank the team at Storj for giving me this opportunity. Don’t forget to check them out at storj.io.
Thanks for reading, let me know what you think in the comments.