drive design challenge

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.

Mandatory elements:

  • ►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

Technologies: Photoshop

Type of work: Challenge


Design Thinking:
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.

 

Overview
Drive-overview

 

Details

  1. Reference to the company. 
  2. Folder structure in the left sidebar.
  3. Search option (and advance search option using the “...” in the search bar).
  4. Visible user with an avatar in the upper right corner and active company name in the breadcrump navigation. 
  5. 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.
 

drive challenge 2

 

Case study 2: User wants to create a folder.

User clicks on button “New”, next to the search bar and selects “New Folder”.

 

create-open folder -drive

 

User fills the details.

user fills the etails

 

In this example, the user selects a pre-existing tag (‘typography’) and sets folder’s access to everyone.
fill details

 

 

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.

 

search drive