Designing for humans

HI! I’m Nele

Mobile interaction designer @ Mobi Lab Creative partner @ Nope Creative

nele.tullus@lab.mobi

HI! I’m Nele

UX design is the art and science of generating positive emotions through product interactions

- Tomer Sharon / Senior UX Researcher @ Google

“You can’t design an experience”

“You can’t design an experience”

What about Disneyland, or any kind of game

We’re all designing experiences

We’re all designing experiences

That christmas present you carefully picked?

Good design solves problems.

The elements of UxD

Strategy - users needs, business goals

Strategy - users needs, business goals

Scope - brief, requirements, specifications

Strategy - users needs, business goals

Scope - brief, requirements, specifications

Structure - info architecture, choreography

Strategy - users needs, business goals

Scope - brief, requirements, specifications

Structure - info architecture, choreography

Skeleton - flow, navigation, information design

Strategy - users needs, business goals

Scope - brief, requirements, specifications

Structure - info architecture, choreography

Skeleton - flow, navigation, information design

Surface - visual / sensory design

Strategy

What do the users want? What do the users need?

What kind of problem is this particular product solving?

What does it do for the people who use it?

How does this product help to grow the business?

UX Users needs

Business needs

Scope

Teacher Student Manager

Log in

Check my schedule

Check my schedule

Add /remove teachers

Add /remove students

Log in Log in

Give grades to students

See my grades

Add homework for students

Check out homework

MVP

Story mapping can help with

What to build first, MVP, version 2 etc

Encourage iterative development

Prioritising and grooming backlog

Visualise the project progress

Structure

How is everything organised?

yes

yes yes

no no

yes

Skeleton

How will it work?

WireframingWireframing is about rapid ideation. To do this right you need to explore

multiple directions and opportunities

Some old school rules:

Do not use colors

Do not use images 

 Use one font, for emphasis use weights

Use real content and data

Important actions should take as few steps as possible

Surface

How does it look like?

Consistency through the product

So, user experience is…

So, user experience is…A combined result of all our efforts and processes

Your product is like a book

Your product is like a bookThe hero must overcome challenges in order to

reach the tower and slay the evil dragon

Along the way the hero needs to gain the right knowledge and experience for the final showdown.

Define your hero’s story

Define your hero’s storyThis will frame your mind and help you to think

in small chapters like your users who are learning to use the product

Questions?Thoughts?

Good

Ideal design process

Ideal design process

User research

User stories, flows

Sketching, prototyping

Focus group testing

Design mockups

Ideal design process

User research

User stories, flows

Sketching, prototyping

Focus group testing

Design mockups

Ideal design process

User research

User stories, flows

Sketching, prototyping

Focus group testing

Design mockups

No budget

User research

User stories, flows

Sketching, prototyping

Focus group testing

Design mockups

So, what now?It’s not the end, really

Benchmark your competition

Benchmark your competition Analyse their products or services,

try to learn from their mistakes

Guerilla usability testing

Guerilla usability testingShow your sketches to your coworkers, friends or family

Use patterns

Use patternsUse patterns that already have proven to work

Don’t be afraid to ask others

Don’t be afraid to ask othersAny kind of feedback is extremely valuable

Questions?Thoughts?

Materials

Don't Make Me Think by Steve Krug

Designing the Obvious by Robert Hoekman, Jr.

Sketching User Experiences by Bill Buxton.

Beautiful Users - By Ellen Lupton

Nielsen Norman Group - www.nngroup.com/articles

Sketching User Experiences - www.designprinciplesftw.com

Sidebar - sidebar.io

PatternTap - zurb.com/patterntap

Good UI - www.goodui.org

Questions?Thoughts?