The document outlines a design methodology for Google Drive, emphasizing a structured approach to problem-solving and user interface design. It details steps such as analyzing user needs, generating wireframes, and defining design goals focused on collaboration and usability. Additionally, it discusses the creation of a collaborative platform, incorporating user interface design characteristics and interactive features.

1. Design Thinking
Google Drive

2. © 2016. L. Vieira Dos Santos | MDI | School of design, Laval U. | 2
Lydie VIEIRA DOS SANTOS Methodology to design for Google Drive

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

4. © 2016. L. Vieira Dos Santos | MDI | School of design, Laval U. | 4
FIRST STEP
Analysis
Problems & Lacks

5. © 2016. L. Vieira Dos Santos | MDI | School of design, Laval U. | 5
| Decomposition of Google Drive
Function
FunctionFunctionFunction
Function
Function
Function
Function
Function
Function
FunctionFunction
FunctionFunctionFunction
Function
Function
Function
Function
FunctionFunction
Function
Function
Function
Function
Function
Function
Function
Function Function
Function
Function
Function
Function
Function
Function
Function
Function
Drive navigation
Heart of Drive
Historical
Options managing
User account
and services

6. © 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 Drop
files/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

7. © 2016. L. Vieira Dos Santos | MDI | School of design, Laval U. | 7
| Tree view My Drive collaborative
Create a
folder group
Create a folder Edit a file
Edit a
Google 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

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

9. © 2016. L. Vieira Dos Santos | MDI | School of design, Laval U. | 9
SECOND STEP
Problems solving
Problems & Lacks
Analysis

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

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

12. © 2016. L. Vieira Dos Santos | MDI | School of design, Laval U. | 12
THIRD STEP
Problems solvingProblems & Lacks

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

14. © 2016. L. Vieira Dos Santos | MDI | School of design, Laval U. | 14
| Scenarios of wireframes solution (Example)

15. © 2016. L. Vieira Dos Santos | MDI | School of design, Laval U. | 15
TEAM PROJECT
Camille BAILLOT
Thorgal CREUZE
Joannie PAQUET
Lydie VIEIRA DOS SANTOS

16. © 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)

17. © 2016. L. Vieira Dos Santos | MDI | School of design, Laval U. | 17
FIRST STEP
Ideation
Design goals

18. © 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?

19. © 2016. L. Vieira Dos Santos | MDI | School of design, Laval U. | 19
| Design goals
IMMEDIACY
COLLABORATION
TALENT
DEVOTION
SKILLS
CREATIVITY
REACTIVITY
PARTICIPATION
WORK TIME
FEEDBACK
AFFINITY
INSTINCTIVE
PRODUCTIVITY
TEAM WORK
MORE
CREATIVITY
MORE
PROMOTION
MORE
OPTIMIZATION
MORE
NETWORKING
SKETCHING

20. © 2016. L. Vieira Dos Santos | MDI | School of design, Laval U. | 20
SECOND STEP
Ideation
Design goals Conception

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

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

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

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

25. © 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 professionals
in 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 concepts
Branding concepts
Storyboard concepts
Pattern concepts
etc.
Mobile design sketching for:
Ideation frameworks
Wireframe versions
...
Wireframe checks (in a private context: p. 24)
...

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

27. © 2016. L. Vieira Dos Santos | MDI | School of design, Laval U. | 27
| Types and characteristics of user interfaces (Examples)
Start a new
collaborative sketch
Title
Description
Goals
Tags
Status
Deadline
...
UI
1
Creative
collaborative platform
Title
Description
Goals
Collaborators
Tools
Timeline
...
UI
3
User profile
Avatar
Name
Evaluations
Nb of collaborative sketchs
Nb view
Sorting options
...
UI
2

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

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

30. © 2016. L. Vieira Dos Santos | MDI | School of design, Laval U. | 30
Icons by
Alfredo Hernandez
Anbileru Adaleru
Andrea Mazzini
Arthur Shlain
Dungeon Hero X
Elirion
Pablo Bravo
Richard Schumann
Role Play
Sasha Mescheryakov
Yaroslav Samoilov
Yu Luck
www.thenounproject.com

31. © 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 Santos
UX/UI designer
lydie.vieira.dossantos@gmail.com