Making A Coffee Table

UI Design Workshop @ Fasilkom UI — Nov 19, 2016

Making a Coffee Table?

Yehezkiel Gulo / @yhzkiel

This slide has been modified to suit general reading.

I hope you find this slide useful to you :)

Last modified: 9th Jan 2017

https://upload.wikimedia.org/wikipedia/commons/f/ff/Noguchi_Table.png

Why do the designer make this?

What is it for?

Why does it look like that?

Who is it for?

Is it good?

How to make one?

How does

a Furniture Designer/Maker

make a… furniture ?

Video: “Day in The Life: Furniture Designer/Maker”

http://connectedstudios.org/url-zvhshrn9KkwgSynhiuxJHLDtWFcMwpeCD-sBfE4I>

What does a furniture designer do?> "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 ..."

How about designing

a (digital) user interface?

What would you do?

User Interface Design

(UI Design) is a form of a solution (Analogous to a coffee table that fulfills a need)

That’s why the big picture is essential.

Let’s (re-)revisit again about

Design Process.

It’s a double diamond model by Peter Merholz.

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

So, where does UI Design lie

in that diagram?

Yeah you right, on the second diamond!

> Understanding of contexts

> Solution crafting

> Solution validation

> Iterating the solution

What does UI Design need?

Let’s see how does UI Design take part

in a product development.

“Working with UI Designers”

Designing an interface needs:

1. Understanding of contexts

Don’t be oblivious of the situations and conditions.

THe redesign of

Uber mobile app

What do you think?

https://newsroom.uber.com/newriderapp/

We need to understand at least 3

considerations to build a digital

interface: business, users, and technology

A design that fulfills the business goal and the needs of users, while ensure it is

still implementable.

Activity

Define and prioritize key tasks from the

goal of your product.

Just choose maximum 2 tasks, no need to build an exhaustive flow.

Designing an interface needs:

2. Solution Crafting

Where usability practices, cognitive science, etc. come to play

I’d love to call this:

Prototyping (the solution).

Have you ever heard terms such as “wireframes” or “mockups”?

Prototyping results: various levels

(fidelity) of prototypes. typical types: lo-fi, med-fi, hi-fi...

What makes them different is the number of changes allowed/possible.

One way to start this phase is to

brainstorm how the screen would look like

or how the flow would be.

One way to brainstorm: each team member sketch by themselves the screens or

flows as many as possible and then compare (+ discuss) them.

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.

Activity

Let’s try sketching.

Use pen and papers to draw flows, screens, etc.

Decide and build the “finalized” interface

using the ideas from what have been

brainstormed.

Discuss how the user interface would be, how the task flow would be, what

elements are needed in the screen, etc.

Activity

Build the user interface!

Paper and pencil/marker are still your tools here :p

Designing an interface needs:

3. Validated solution

At least 3 contexts: business, user, and technology

Testing solutions benefits the users

greatly (Rubin & Chisnell, 2008), also helps the team to

detect early issues of the design.

Like product concept, you need to make sure the intention can be understood

well by the user.

What to test?

Who will be the participant?

How many participant?

How to do it?

Testing a design

Video: “Usability Testing of Fruit”

https://www.youtube.com/watch?v=3Qg80qTfzgU>

Activity

Prepare the prototype.

Good luck!

“Just do anything you need to do the task. Don’t

worry to make mistake. there’s no right or

wrong, because we’re testing the design,not you”

Like a “mantra” to help them to be calm throughout the session.

Activity

Test your design.

Good luck!

Designing an interface needs:

4. Iterating the solution

Refining solution based on data from validation

After capturing the problems with the

prototype, decide which one we’re

going to tackle.

That’s why you need to prioritize them.

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

Refine the design to solve the

top-priority issues.

It’s up to you whether to redo the brainstorm session, or just use your

experience and past learning to solve them.

Activity

Discuss, decide and refine your design

And get prepared for the final presentation.

Show your coffee table

interface design!

Brief of project, tasks, what to improve

Now you know how to build a great

coffee table

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.

Thank you!

Yehezkiel Gulo / @yhzkiel