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

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

| Design approach (1st step)

Problems solving

Wireframes

Problems & Lacks

Examples

Analysis

Interface decomposition & Tree views

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

FIRST STEP

Analysis

Problems & Lacks

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

| 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

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

| 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

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

| 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

Send an invitation to a user gmail account

Send an invitation to a user gmail account

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

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

| Tree view Google Drive cloud

SYNCHRONIZATIONSAVE

STORAGE (15 GB) or UPGRADE

New data generated with tablets and smartphones

> > > > > > >

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

SECOND STEP

Problems solving

Problems & LacksAnalysis

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

| 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.

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

| Lacks (Example)

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

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

THIRD STEP

Problems solvingProblems & Lacks

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

| Wireframes

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

| Scenarios of wireframes solution (Example)

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

TEAM PROJECT

Camille BAILLOTThorgal CREUZEJoannie PAQUETLydie VIEIRA DOS SANTOS

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

Design goals

Previous Work

Ideation

Framework

Design

Design graphic

Conception

Wireframes

| Design approach (2nd step)

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

FIRST STEP

Ideation

Design goals

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

| Problems

How to work around the lack of experience?

How to stand out?

How to reduce customers feedback?

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

| 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

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

SECOND STEP

Ideation

Design goals Conception

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

| Creative colaborative platform

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

| UX Tools

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

| 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

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

| 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

> > >

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

| 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)

...

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

THIRD STEP

Conception

DesignIdeation

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

| 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

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

FOURTH STEP

Design

Conception

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

| Storyboard of the creative collaborative platform (Interfaces)

I1 I2 I3 I4

I9 I10 I11 I12

I5 I6 I7 I8

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

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

lydie.vieira.dossantos@gmail.com