Purpose/Objective: Drive is created to be the central hub where all documents of different applications are saved. At the same time, it serves as a solution to exchange documents in a secure environment with clients. Within Drive it is possible to easily create new folders, set access rights and startup workflows.
Goal: The goal is to create a design for the drive application. The application can be designed without any restrictions as long it has a professional design.
- ►There needs to be a reference to the administration office (Deloitte in this case) and ctrl
- ►Drive should support a folder structure
- ►A search option should be available
- ►The name of both the user and active company need to be visible
- ►It should be possible to switch to another company
- ►New documents can be uploaded and folders created
Deliverables: Photoshop files
Duration: 1 Week
My role: UI designer
Type of work: Challenge
My design is based on the mandatory elements. I didn’t design many other actions as I believe every element should rise from a need which comes from a UX research or a customer request. The drive design is simple yet functional and user-friendly. I used a light grey-blue color palette for the main layout. A green color for the buttons, and a dark blue-black color for the contrasting elements, like text and icons. The typeface is based on the Roboto font family.
- Reference to the company.
- Folder structure in the left sidebar.
- Search option (and advance search option using the “...” in the search bar).
- Visible user with an avatar in the upper right corner and active company name in the breadcrump navigation.
- Button to create or upload documents and folders.
Case study 1: User clicks on a document in the main area
The document line gets a light-blue color and an information icon appears next to the breadcrumb navigation bar. The icon has stored information about the creator, access rights (which is also visible with the open/close lock next to the date), workflows and more.
Case study 2: User wants to create a folder.
User clicks on button “New”, next to the search bar and selects “New Folder”.
User fills the details.
In this example, the user selects a pre-existing tag (‘typography’) and sets folder’s access to everyone.
User Case 3: User wants to make an advanced search
User clicks on “...” in the search bar to access the advanced options. He/She can search by type (pdf, ppt, doc, etc), by typing or selecting a tag, by financial year or access rights.