[file.site]

file.site is a website that allows quick transfers of files across devices using a unique code. The website was designed to be simple and easy to use, with a focus on the user experience. The website was designed in Figma and developed using React and Typescript.

VIEW THE PROJECT




MY ROLE

Research, Analysis, Product Design, Interaction Design, Design Systems, Full-Stack Development

TIMELINE

November 2023; 2 weeks


TOOLS

Figma, Photoshop, Illustrator, Typescript, ReactJS, ExpressJS,
Google Cloud




OVERVIEW

Problem


File transferring can be annoying. Most websites require you to create an account, have a limit on file size, or a limit on how many files you can send. Once you reach these limits they might even require you to pay to continue using their service.

Goal


Create a web application that allows users to easily transfer files to others or to different devices. Make the app require no account creation, have no file size limit, and no limit to the amount of files that can be sent. Make the app very simple and easy to use, and have a unique and memorable design that reflects that.



RESEARCH

Personas


Altough this app was something that I was in need of, I wanted to make sure that it was something that others would also find useful. I interviewed three people, and asked them their experience with current file transferring and what they would want in a file transferring app.



LUCY G.
20

Lucy G is an artist who is constantly working alongside clients or classmates. She often has to send multiple files to multiple people. She currently uses both email and text in order to share files but is tired of the file size limit or the time it takes to send files.
BRANDON W.
23

Brandon W is a software engineer who is constantly working on multiple projects at once. He often has to transfer files from his desktop to his laptop or to his phone. He currently uses Dropbox in order to do so but is tired of having to pay for his account.
DIEGO R.
20

Diego R is a graphic designer who is constantly sending files from his university's computer to his personal laptop. He currently uses Google Drive to transfer files, but does not like having to constantly log into Google and he often finds himself having to mass delete files in order to have enough storage.


After talking with these three people. I was able to get a good idea of what features should be included in the app. The app should be able to transfer files from one device to another, have no file size or amount limit, and not require an account.




DESIGN

Prototype





DEVELOPMENT

Frontend


The frontend of the app was developed using React and Typescript. The simplicity of the app, and the fact that it only has one page, allowed me to focus on the user experience and the design of the app. Designing the buttons and modals first in Figma allowed me to easily develop them in React and implement them into the site.





Backend


Although backend is not what I typically focus on, I wanted to test myself and see if I could create a fully functional full-stack web application. The backend was developed using ExpressJS and the files are stored in a Google Cloud Storage bucket. The backend is able to create a unique code for each file transfer, and then store the files in a bucket. The backend is also able to instantly delete files or expire after a certain amount of time.


NICOLAS PROTHERO 2024