Page 1

UC FILESPACE PROCESS EMILY FINLEY | INTERACTION DESIGN | 2017


OBJECTIVE

- redesign UCFileSpace web interface - conduct user testing - create task flows outlining the user’s experience - create iterations of wireframes for new layout - create prototype in InVision

EMILY FINLEY | INTERACTION DESIGN | 2017

2


Task Flows INITIAL

EMILY FINLEY | INTERACTION DESIGN | 2017

3


User Test 1 SHELBY

COMMENTS - over simplified - did not explain all steps - aesthetically pleasing - needs more detail - needs more personalization

EMILY FINLEY | INTERACTION DESIGN | 2017

4


User Test 2 LIZZIE

EMILY FINLEY | INTERACTION DESIGN | 2017

5


Ideal Flow PERSONAL

COMMENTS - main action verbs do not explain exact motions user needs to go through to improve user experience

EMILY FINLEY | INTERACTION DESIGN | 2017

6


REVISED

EMILY FINLEY | INTERACTION DESIGN | 2017

7


User Test 1 SHELBY

COMMENTS - shows every step - personalized to Shelby and her user experience with UCFileSpace

EMILY FINLEY | INTERACTION DESIGN | 2017

8


User Test 2 LIZZIE

EMILY FINLEY | INTERACTION DESIGN | 2017

9


Ideal Flow PERSONAL

COMMENTS - still could be more detailed - can completely re-design layout, and is not portrayed in sketches

EMILY FINLEY | INTERACTION DESIGN | 2017

10


Wireframes INITIAL

EMILY FINLEY | INTERACTION DESIGN | 2017

11


Version 1

ENLARGED SAMPLE

EMILY FINLEY | INTERACTION DESIGN | 2017

12


SAMPLE OF FLOW

EMILY FINLEY | INTERACTION DESIGN | 2017

13


Version 2

ENLARGED SAMPLE

COMMENTS - filler text - dots take up a large amount of space - several distracting elements

EMILY FINLEY | INTERACTION DESIGN | 2017

14


SAMPLE OF FLOW

EMILY FINLEY | INTERACTION DESIGN | 2017

15


REVISED

EMILY FINLEY | INTERACTION DESIGN | 2017

16


VERSION 3

EMILY FINLEY | INTERACTION DESIGN | 2017

17


Version 3

SAMPLES OF FLOW (LOGIN)

EMILY FINLEY | INTERACTION DESIGN | 2017

18


Version 3

SAMPLES OF FLOW (LOGIN)

COMMENTS - Helvetica typeface - simple and elegant

EMILY FINLEY | INTERACTION DESIGN | 2017

19


Version 3

SAMPLES OF FLOW (LOGIN)

COMMENTS - UC red accent color when clicked

EMILY FINLEY | INTERACTION DESIGN | 2017

20


Version 3

SAMPLES OF FLOW (LOGIN)

EMILY FINLEY | INTERACTION DESIGN | 2017

21


Version 3

SAMPLES OF FLOW (HOME)

EMILY FINLEY | INTERACTION DESIGN | 2017

22


Version 3

SAMPLES OF FLOW (MY FILES)

EMILY FINLEY | INTERACTION DESIGN | 2017

23


Version 3

SAMPLES OF FLOW (MY FILES SELECTION)

EMILY FINLEY | INTERACTION DESIGN | 2017

24


Version 3

SAMPLES OF FLOW (SITES)

EMILY FINLEY | INTERACTION DESIGN | 2017

25


Version 3

SAMPLES OF FLOW (MENU)

EMILY FINLEY | INTERACTION DESIGN | 2017

26


Version 3

SAMPLES OF FLOW (MENU SELECTION)

EMILY FINLEY | INTERACTION DESIGN | 2017

27


Version 3

SAMPLES OF FLOW (MENU LOADING)

EMILY FINLEY | INTERACTION DESIGN | 2017

28


Version 3

SAMPLES OF FLOW (MENU FILES NAVIGATION)

COMMENTS - eventually got rid of line b/c distracting (so instead of click to bold, then line for selection, eventually, design goes straight towards regular Helvetica with the UC red)

EMILY FINLEY | INTERACTION DESIGN | 2017

29


Version 3

SAMPLES OF FLOW (MENU FILES NAVIGATION)

EMILY FINLEY | INTERACTION DESIGN | 2017

30


Version 3

SAMPLES OF FLOW (MENU FEEDBACK)

COMMENTS - green color showing verification

EMILY FINLEY | INTERACTION DESIGN | 2017

31


Version 3

SAMPLES OF FLOW (FINLEYEJ NAVIGATION)

EMILY FINLEY | INTERACTION DESIGN | 2017

32


Version 3

SAMPLES OF FLOW (RENAME)

EMILY FINLEY | INTERACTION DESIGN | 2017

33


Version 3

SAMPLES OF FLOW (RENAME)

EMILY FINLEY | INTERACTION DESIGN | 2017

34


Version 3

SAMPLES OF FLOW (RENAME)

EMILY FINLEY | INTERACTION DESIGN | 2017

35


Version 3

SAMPLES OF FLOW (DELETE)

EMILY FINLEY | INTERACTION DESIGN | 2017

36


Version 3

SAMPLES OF FLOW (DELETE)

COMMENTS - confirmation

EMILY FINLEY | INTERACTION DESIGN | 2017

37


Version 3

SAMPLES OF FLOW (DELETE)

EMILY FINLEY | INTERACTION DESIGN | 2017

38


VERSION 4

EMILY FINLEY | INTERACTION DESIGN | 2017

39


Version 4

SAMPLES OF FLOW (LOGIN)

COMMENTS - pushed typographic hierarchy and variety in Version 4

EMILY FINLEY | INTERACTION DESIGN | 2017

40


Version 4

SAMPLES OF FLOW (HOMEPAGE)

EMILY FINLEY | INTERACTION DESIGN | 2017

41


Version 4

SAMPLES OF FLOW (MY FILES AND SELECTION)

EMILY FINLEY | INTERACTION DESIGN | 2017

42


Version 4

SAMPLES OF FLOW (MENU AND SELECTION)

COMMENTS - still using line as selection, will be simplified later

EMILY FINLEY | INTERACTION DESIGN | 2017

43


Version 4

SAMPLES OF FLOW (LOADING)

EMILY FINLEY | INTERACTION DESIGN | 2017

44


Version 4

SAMPLES OF FLOW (MENU FEEDBACK)

EMILY FINLEY | INTERACTION DESIGN | 2017

45


Version 4

SAMPLES OF FLOW (RENAME)

EMILY FINLEY | INTERACTION DESIGN | 2017

46


Version 4

SAMPLES OF FLOW (RENAME)

EMILY FINLEY | INTERACTION DESIGN | 2017

47


Version 4

SAMPLES OF FLOW (MENU NAVIGATION)

COMMENTS - use + to signal more folders and or documents under main categories - using lines in between Modify, Size, Type which are eventually determined to be too distracting - addition of labels (ie. Path, Name, Modify Date, Size ...)

EMILY FINLEY | INTERACTION DESIGN | 2017

48


Version 4

SAMPLES OF FLOW (FINLEYEJ NAVIGATION)

EMILY FINLEY | INTERACTION DESIGN | 2017

49


Invision Link

HTTPS://INVIS.IO/4RAA5BYPH

EMILY FINLEY | INTERACTION DESIGN | 2017

51


THANK YOU

EMILY FINLEY | INTERACTION DESIGN | 2017

UCFileSpace Process  
UCFileSpace Process  
Advertisement