This is the modified version of my presentation for UI Design Workshop held by SIG Ristek Fasilkom UI on 19th November 2016.

1. UI Design Workshop @ Fasilkom UI — Nov 19, 2016
MakingaCoffeeTable?
Yehezkiel Gulo / @yhzkiel

2. Thisslidehasbeenmodified tosuitgeneralreading.
Ihopeyoufindthisslideusefultoyou:)
Lastmodified:9thJan2017

3. https://upload.wikimedia.org/wikipedia/commons/f/ff/Noguchi_Table.png
Whydothedesignermakethis?
Whatisitfor?
Whydoesitlooklikethat?
Whoisitfor?
Isitgood?
Howtomakeone?

4. Howdoes
aFurnitureDesigner/Maker
makea…furniture?
Video: “Day in The Life: Furniture Designer/Maker”
http://connectedstudios.org/url-zvhshrn9KkwgSynhiuxJHLDtWFcMwpeCD-sBfE4I>

5. Whatdoesafurnituredesignerdo?
> "I'm recognizing a need or client comes to me..."
> "... I'll go to get a sketchbook, sketching really conceptual forms ..."
> "... I'll get a big piece of tag board and I'll actually draw the chair to
scale..."
> "... make sure that I've got all the measurements and dimensions
dialled in that’s actually going to work before I start building the final
product ..."

6. Howaboutdesigning
a(digital)userinterface?
What would you do?

7. UserInterfaceDesign
(UIDesign)is aformofasolution
(Analogoustoacoffeetablethatfulfillsaneed)
That’s why the big picture is essential.

8. Let’s(re-)revisitagainabout
DesignProcess.
It’s a double diamond model by Peter Merholz.

9. http://www.rachelreynard.com/design-process/

10. So,wheredoesUIDesignlie
inthatdiagram?
Yeah you right, on the second diamond!

11. > Understanding of contexts
> Solution crafting
> Solution validation
> Iterating the solution
WhatdoesUIDesignneed?

12. Let’sseehowdoesUIDesigntakepart
inaproductdevelopment.
“Working with UI Designers”

13. Designinganinterfaceneeds:
1.Understandingofcontexts
Don’t be oblivious of the situations and conditions.

14. THeredesignof
Ubermobileapp
What do you think?
https://newsroom.uber.com/newriderapp/

15. Weneedtounderstandatleast3
considerationstobuildadigital
interface:business,users,andtechnology
A design that fulfills the business goal and the needs of users, while ensure it is
still implementable.

16. Activity
Defineandprioritizekeytasks fromthe
goalofyourproduct.
Just choose maximum 2 tasks, no need to build an exhaustive flow.

17. Designinganinterfaceneeds:
2.SolutionCrafting
Where usability practices, cognitive science, etc. come to play

18. I’dlovetocallthis:
Prototyping(thesolution).
Have you ever heard terms such as “wireframes” or “mockups”?

19. Prototypingresults: variouslevels
(fidelity)ofprototypes.
typicaltypes:lo-fi,med-fi,hi-fi...
What makes them different is the number of changes allowed/possible.

20. Onewaytostartthisphaseisto
brainstormhowthescreenwouldlooklike
orhowtheflowwouldbe.
One way to brainstorm: each team member sketch by themselves the screens or
flows as many as possible and then compare (+ discuss) them.

21. Prototype,talk,prototype,talk,prototype,
talk,prototype,talk...
To start, just dump your idea to a paper, and progess to higher fidelity
once you are confident.

22. Activity
Let’strysketching.
Use pen and papers to draw flows, screens, etc.

23. Decideandbuildthe“finalized”interface
usingtheideasfromwhathavebeen
brainstormed.
Discuss how the user interface would be, how the task flow would be, what
elements are needed in the screen, etc.

24. Activity
Buildtheuserinterface!
Paper and pencil/marker are still your tools here :p

25. Designinganinterfaceneeds:
3.Validatedsolution
At least 3 contexts: business, user, and technology

26. Testingsolutions benefitstheusers
greatly(Rubin&Chisnell,2008),alsohelpstheteamto
detectearlyissuesofthedesign.
Like product concept, you need to make sure the intention can be understood
well by the user.

27. Whattotest?
Whowillbetheparticipant?
Howmanyparticipant?
Howtodoit?

28. Testingadesign
Video: “Usability Testing of Fruit”
https://www.youtube.com/watch?v=3Qg80qTfzgU>

29. Activity
Preparetheprototype.
Good luck!

30. “Justdoanythingyouneedtodothetask.Don’t
worrytomakemistake.there’snorightor
wrong,becausewe’retestingthedesign,notyou”
Like a “mantra” to help them to be calm throughout the session.

31. Activity
Testyourdesign.
Good luck!

32. Designinganinterfaceneeds:
4.Iteratingthesolution
Refining solution based on data from validation

33. Aftercapturingtheproblemswiththe
prototype,decidewhichonewe’re
goingtotackle.
That’s why you need to prioritize them.

34. http://www.userfocus.co.uk/pdf/decision-tree.pdf

35. Refinethedesigntosolvethe
top-priorityissues.
It’s up to you whether to redo the brainstorm session, or just use your
experience and past learning to solve them.

36. Activity
Discuss,decideandrefineyourdesign
And get prepared for the final presentation.

37. Showyourcoffeetable
interfacedesign!
Brief of project, tasks, what to improve

38. Nowyouknowhowtobuildagreat
coffeetable
In real projects, design process may not have to follow any strict rule. It’s
up to the team to decide how they would approach the process.

39. Thankyou!
Yehezkiel Gulo / @yhzkiel