sketch for google drive

Design ThinkingGoogle Drive

© 2016. L. Vieira Dos Santos | MDI | School of design, Laval U. | 2

Lydie VIEIRA DOS SANTOS Methodology to design for Google Drive


| Design approach (1st step)

Problems solving

Wireframes

Problems & Lacks

Examples

Analysis

Interface decomposition & Tree views


FIRST STEP

Analysis

Problems & Lacks


| Decomposition of Google Drive

Function

FunctionFunctionFunctionFunction

FunctionFunction

Function

Function

Function

FunctionFunction

FunctionFunctionFunction

Function

Function

Function

Function

FunctionFunction

Function

Function

Function

Function

Function

Function

Function

Function Function

FunctionFunction

FunctionFunction

Function

Function

Function

Function

Drive navigation

Heart of Drive

Historical

Options managing

User accountand services


| Tree view of My Drive

Generation of others formats

Upload or Drag and Dropfiles/folders

Edit files :

- Google Docs

- Google Sheets

- Google Slides...

ORGANIZATION

ROOT

CONTAIN

My Drive

Export

Export

Activity

Activity

Activity

Toolbar

Toolbar

Toolbar

Create a folder

Create a folder

Create a folder

Create a folder


| Tree view My Drive collaborative

Create afolder group

Create a folder Edit a file

Edit aGoogle Doc

Modification rights

SHARING ACCESS RIGHT

ACTIONS OF EACH WORKER IN A FOLDER GROUP

Recent

Oldest

Send an invitation to a user gmail account




Create a folder group

Edit a Google Doc

Modify a Google Doc

Add new files

Modify a Google Doc

Modify a Google Doc

Move a folder

Edit a Google Sheets

Day 1, hh:mm

Day 2, hh:mm

Day 1, hh:mm

Day 2, hh:mm

Day 2, hh:mm

Day 2, hh:mm

Day 2, hh:mm

Day 3, hh:mm

ROOT

My Drive


| Tree view Google Drive cloud

SYNCHRONIZATIONSAVE

STORAGE (15 GB) or UPGRADE

New data generated with tablets and smartphones

> > > > > > >


SECOND STEP

Problems solving

Problems & LacksAnalysis


| Problems (Example)

User goal : Drag and drop a file into the bin.

When the user wants to drag and drop the file into the bin, the tree view of his Drive expands. Therefore, he loses sight of its initial goal.


| Lacks (Example)

User need : Simultaneously , see notes on his edited file and browse his reference document.


THIRD STEP

Problems solvingProblems & Lacks


| Wireframes


| Scenarios of wireframes solution (Example)


TEAM PROJECT

Camille BAILLOTThorgal CREUZEJoannie PAQUETLydie VIEIRA DOS SANTOS


Design goals

Previous Work

Ideation

Framework

Design

Design graphic

Conception

Wireframes

| Design approach (2nd step)


FIRST STEP

Ideation

Design goals


| Problems

How to work around the lack of experience?

How to stand out?

How to reduce customers feedback?


| Design goals

IMMEDIACY

COLLABORATIONTALENT

DEVOTION

SKILLS

CREATIVITY

REACTIVITY

PARTICIPATION

WORK TIME

FEEDBACK

AFFINITY

INSTINCTIVE

PRODUCTIVITY

TEAM WORK

MORE

CREATIVITY

MORE

PROMOTION

MORE

OPTIMIZATION

MORE

NETWORKINGSKETCHING


SECOND STEP

Ideation

Design goals Conception


| Creative colaborative platform


| UX Tools


| Timeline

J1 J2 J3

Alexia

11:37

Feedback Evaluation of participation

37% 42% 21%

J1 J2 J3

Alexia

08:03

LouisAlexia Sonia

Example 1

Example 1


| Different status of collaborative sketches

OPEN PARTICIPATION

Live view permitted by all members of the platform

PARTICIPATION RESERVED

Live view permitted by all members of the platform

PRIVATE PARTICIPATION

Live view permitted only by selected participants

Example: To manage a project internally

Example: To create creative affinities and social links

Example: Identify the best creative candidates

> > >


| Types of user

Who can start a collaborative sketch ?Condition: Have a Google account

New professionalsin Art fields* specifically

NEEDS/GOALS

USER ROUTE USER ROUTE USER ROUTE

>

>

Organizations

NEEDS/GOALS

>

>

Businesses

NEEDS/GOALS

>

>

*EXAMPLES OF COLLABORATIVE SKETCHES IN ART FIELD:

Graphic design sketching for:Communication conceptsBranding conceptsStoryboard conceptsPattern conceptsetc.

Mobile design sketching for:Ideation frameworksWireframe versions...

Wireframe checks (in a private context: p. 24)

...


THIRD STEP

Conception

DesignIdeation


| Types and characteristics of user interfaces (Examples)

Start a newcollaborative sketch

TitleDescriptionGoalsTagsStatus Deadline...

UI

1

Creative collaborative platform

TitleDescriptionGoalsCollaboratorsToolsTimeline...

UI

3

User profile

AvatarName EvaluationsNb of collaborative sketchsNb viewSorting options...

UI

2


FOURTH STEP

Design

Conception


| Storyboard of the creative collaborative platform (Interfaces)

I1 I2 I3 I4

I9 I10 I11 I12

I5 I6 I7 I8


Icons by

Alfredo HernandezAnbileru AdaleruAndrea MazziniArthur ShlainDungeon Hero XElirionPablo BravoRichard SchumannRole PlaySasha MescheryakovYaroslav SamoilovYu Luck

www.thenounproject.com

© 2016. L. Vieira Dos Santos | MDI | School of design, Laval U. | 31© 2016. L. Vieira Dos Santos | 31

Contact me...Me contacter...

Entre em contato comigo...

Lydie Vieira Dos SantosUX/UI designer

[email protected]