File sharing feature – Hey Doc!

The requirements of this project were to design a clear and effective user flow, including a drag-and-drop file uploader, for a (fictitious) Learning Platform. This feature has been requested by the school to allow teachers to share files with their students in an easy and efficient way. Specific requirements: - Allow multiple file uploads - Upload on drop - Show preview of files - Edit file name - Crop images to a fixed ratio - Must handle multiple file types - Share files with individual users or groups

Appearance & Style Decisions

The Logo

I wanted to transmit the concept of “files” and “documents” at first glance. Also I wanted to add a deeper meaning through the 3D effect. Depending on how you look at it one piece looks “inside” or “outside”, which I think it relates with the idea of “duplicity” the tool creates through sharing.

The Colour Palette

I decided to pick a green palette to transmit the concept of “eco-friendly”. The main value of the tool lies on the ability of sharing big quantity of documents through a paperless app. So a green colour scheme is a perfect way of alluding to that idea.

The font

Easy and clear font, with different levels of thickness. It is already a very popular font so its implementation should not be a problem.

Dashboard

Our user in this case, is a History teacher, who is currently in charge of different grades. To quickly differentiate each of the grades, he will have the option of adding “colour tags” to the libraries and documents. It will also be important to recognise what the extensions of the files, so I added a simple icon for each of them, the icon shows the type of file by colour and name.

Upload documents

When uploading documents he will be able to see the progress. Lucky him, Internet connection is really fast so the this process won’t take long.

Edit your Document

Sometimes less is more, our user does not want to expend long time editing his document, that’s why a reduced tool bar and a clear and organise workspace will speed up the process.

Sharing Time

When sharing it is possible to share it with a group of students or with a specific person.


The teacher can also double check the list and remove someone if necessary.

Edit Images

Not every document is the same, but it is important to keep some constants so nobody gets lost.


When editing images the workspace will remain the same, some extras will appear depends on the tool we are using.
Tags BrandingDesign processDesign researchDesign thinkingleadershipProduct designUX/UIuxleadVisual DesignWeb design

You Might Also Like:

Design Systems
Web design
Design systems – Royal London
Design SystemsWeb design
UX/UI Design – TrustFlight
Design SystemsProduct designWeb design