CloudBestie is a secure file storage website that allows users to upload files with a time-lock feature, ensuring files are only accessible after a specified unlock date. As a beginner UI/UX designer and developer, I took on the challenge of both designing and building this website to address the need for secure, time-sensitive file storage. I designed an intuitive and visually appealing user interface, created a seamless user experience, and developed the website . The website integrates Google Sign-In for user authentication, Firebase Storage for file uploads, and Firestore for managing file metadata, providing a secure and user-friendly experience in the browser.
Problem Statement
Users often need to store sensitive files securely and control when they can be accessed. However, existing cloud storage solutions lack a time-lock feature and often have complex or cluttered interfaces that frustrate users. As a UI/UX designer, I aimed to create a simple, trustworthy, and intuitive design that prioritizes usability. As a developer, I needed to build a functional website that securely handles file uploads, stores metadata, and enforces the time-lock feature. CloudBestie addresses these needs by offering a user-friendly website with a modern design and robust backend functionality.
Objectives
Design a clean, intuitive, and responsive UI/UX for the CloudBestie website.
Develop a functional website with Google Sign-In, file uploads, and time-locked file access.
Ensure the design reflects security and timesensitivity through visual elements.
Integrate Firebase for authentication, data storage, file uploads, and hosting.
Deploy the website on Firebase Hosting for reliable accessibility.
Approach
I took a dual approach, first focusing on UI/UX design to create a user-centered experience, then developing the website to bring my designs to life. I used Figma for design and prototyping, and Visual Studio Code for development, leveraging Firebase for backend services
Challenges and Solutions
Challenge : Designing a sign-in modal that felt seamless and non-intrusive while ensuring accessibility.
Solution: I centered the modal with a dark overlay, added a close button, and used a familiar Google Sign-In button with high contrast for accessibility.Challenge : Displaying time-locked files in a way that was clear and uncluttered.
Solution: I designed a card-based layout for the file list, with each card showing the file name in a larger font and the unlock date in a smaller font, ensuring clarity without overwhelming the user.Challenge : Ensuring the time-lock feature worked consistently across time zones.
Solution: I used Firebase’s server timestamp for storing unlock dates and compared them with the client’s local time, adjusting for time zone differences.
Result
Designed and developed a visually appealing and functional website for CloudBestie .Created a seamless user experience with an intuitive design, guiding users from sign-in to file management with clarity and confidence.Built a secure file storage solution with a unique time-lock feature, addressing a gap in the market.Ensured the website is responsive and accessible, enhancing usability across devices.Gained hands-on experience in UI/UX design and web development .Received positive feedback from users for the website’s modern design, ease of use, and innovative time-lock feature.
Conclusion
CloudBestie was a rewarding project that allowed me to showcase my skills as both a UI/UX designer and a developer. I designed an intuitive and visually appealing interface that prioritizes user needs, and I developed a functional website that delivers on its promise of secure, time-locked file storage. This project taught me the importance of balancing design and development, collaborating across roles, and focusing on user-centered solutions. As a beginner, I’m proud to have created a website that is both aesthetically pleasing and technically sound, preparing me for future challenges in UI/UX design and web development.
