Mayako FagerfjällManaging Director

Per NordqvistInteraction Designer

Maximilian LarssonGraphic Designer

USER EXPERIENCE SESSIONStartup Weekend Tokyo #swtokyo10 May 2012 @Pasona, Shin-marunouchi Building, Tokyo

WE ARE THE OCEANOcean Observations is a Swedish award-winning design agency focused on designing usable, useful and beautiful mobile services and products. We are located in Stockholm and Tokyo, and work with clients all over the world. Some of them are among the most influential companies in the industry, such as Nokia, Vodafone, KDDI, Skype, Ericsson, O2, Samsung and Huawei.

Our team is a sweet blend of interaction designers, graphic designers, industrial designers, design strategists, programmers and business developers.

THAT’S US IN JAPAN!

FEDEX DAYOCEAN’S MINI-STARTUP WEEKEND

GOOD PEOPLE MATTERS MORE THAN GOOD IDEAS“If you give a good idea to a mediocre team, they will screw it up, if you give a mediocre idea to a great team, they will either fix it or throw it away and start with something new.”

Ed Catmull, co-founder Pixar

PUT TOGETHER A DIVERSE GROUP OF PEOPLE

IF IT WAS ABOUT THE PROCESS

ANYONE COULD BE APPLE

1. RESEARCH & STRATEGY

WHAT’S THE PROBLEM?“If I had one hour to save the world I would spend fifty-five minutes defining the problem and only five minutes finding the solution.”

Albert Einstein

“IF I’D ASKED MY CUSTOMERS WHAT THEY WANTED THEY WOULD HAVE SAID A FASTER HORSE”

- Tom Ford

!

2. INITIAL CONCEPT

3. REFINED CONCEPT

“Criticism may not be agreeable, but it is necessary. It fulfills the same function as pain in the human body. It calls attention to an unhealthy state of things.” Winston Churchill

CRITICISM PRESENTS AN OPPORTUNITY TO GROW

Image from LIFE

4. DESIGN PRODUCTION

5. IMPLEMENTATION SUPPORT

THE DESIGN PROCESS

!

THE DESIGN PROCESS

!

START-UP WEEKEND

THE DESIGN PROCESS

!

START-UP WEEKEND

THE DESIGN PROCESS

!

FRIDAY

START-UP WEEKEND

THE DESIGN PROCESS

!

SATURDAYFRIDAY

START-UP WEEKEND

THE DESIGN PROCESS

!

SATURDAY SUNDAYFRIDAY

START-UP WEEKEND

DESIGN PRINCIPLES FOR ABETTER USER EXPERIENCE

!

SATURDAY SUNDAYFRIDAY

YOU RIGHT NOW

!

SATURDAY SUNDAYFRIDAY

YOU RIGHT NOW 9 DESIGN PRINCIPLES

!

SATURDAY SUNDAYFRIDAY

YOU RIGHT NOW 9 DESIGN PRINCIPLES RESULT

!

SATURDAY SUNDAYFRIDAY

YOU RIGHT NOW 9 DESIGN PRINCIPLES RESULT

Represent the basic assumptions of the world.Affect the arrangement of objects within a composition.

Checklist and guide for the design practice.

STRUCTUREOrganize information purposefully in a meaningful and useful way, and keep the same conventions throughout the whole interface.

STRUCTURE

Where am I? How did I get here? Where can I go?

SIMPLICITYFocus on most common use cases and optimize the workflow for these. Economize the information and exclude all that is irrelevant or excessive.

SIMPLICITYFocus on most common use cases and optimize the workflow for these. Economize the information and exclude all that is irrelevant or excessive.

Ticket vending machine for Stockholm Public Transportation

SIMPLICITYFocus on most common use cases and optimize the workflow for these. Economize the information and exclude all that is irrelevant or excessive.

“A design isn’t finished when there is nothing more to add, but when there is nothing left to take away.”

RELEVANCEKeep information that is relevant to the user’s current situation visible. Hide or remove the rest. Show information when needed.

FEEDBACKInform the user of what’s going on in the system and if something unexpected is about to happen. Prevent errors, but if they occur, assist the user to recover from them.

VISUAL COMPLEXITYFind the right balance of complexity. Give prominence only to important elements and be unmerciful when weighting your information.

VISUAL COMPLEXITYFind the right balance of complexity. Give prominence only to important elements and be unmerciful when weighting your information.

Visual confusion is design clutter and scares your users away!

Hyperdia iPhone app

AFFORDANCEElements should intuitively imply their functionality by their visual characteristics.

AFFORDANCEElements should intuitively imply their functionality by their visual characteristics.

Learn from the real world!

AFFORDANCEElements should intuitively imply their functionality by their visual characteristics.

Learn from the real world!

MANIPULATIONInteract with objects directly. Click, drag, mark & type as opposed to commands, menu selections and dialogue boxes.

DIRECT

MANIPULATIONInteract with objects directly. Click, drag, mark & type as opposed to commands, menu selections and dialogue boxes.

DIRECT

CONSISTENCYSame conventions for ALL elements. Make unique or unrelated objects stand out. Consistency within UI but also with platform conventions.

TOLERANCEPrevent errors and help the to recover from errors. Expect and forgive user mistakes. The interface is there for the user, not the other way around.

STRUCTURESIMPLICITYRELEVANCEFEEDBACKVISUAL COMPLEXITY

!

SATURDAY SUNDAYFRIDAY

AFFORDANCEDIRECT MANIPULATIONCONSISTENCYTOLERANCE

It's the one thing you want your users to reach for.

THE BANANA

What is the purpose of this specific page?

WHERE IS THE BANANA

MORE BANANASNot too many bananas. One big banana and some very few small ones.

Use common sense and don't make your users think.

GRAPHIC DESIGN

How to?

- This is a crash course in a graphic design process for startup weekend

Fonts, Photoshop,Color matching.

I WILL NOT TALK ABOUT

CONSTRAINTS- Device- Code- Time- Target user- Resolution- Performance

WIREFRAMES- Work closely with the team- Make sure you have the user in mind- Pen and paper is your friend here

- Wireframes is the guideline for the team

AWESOME APP

INSPIRATION- Competitors- Get inspired by other designers or apps- Current favorite site for inspiration - Dribbble.com

ITERATE DESIGN- Weapon of choice- Feedback with team- Don’t just add design, also remove graphical obstacles.

PSD PSD PSD PSD PSD

PSD PSD PSD PSD PSD

DEADLINE- Your design is done when the deadline hits- Don’t get stuck on small things- Deliverables: App, Pressentation

GOOD LUCK!

THANK YOU!mayako@oceanobservations.comper@oceanobservations.commaximilian@oceanobservations.com

www.oceanobservations.comoceantokyo.tumblr.comocean_sthlm@twitter