The document outlines an Ocean Observations user experience session on designing for a startup weekend, including introductions of the presenters, an overview of Ocean Observations and its process for UX design. The session covers principles of user experience design like structure, simplicity and feedback and provides a graphic design crash course covering topics like wireframes, inspiration, iteration and delivering on time.

1. USER EXPERIENCE SESSION
Startup Weekend Tokyo #swtokyo
10 May 2012 @Pasona, Shin-marunouchi Building, Tokyo
Mayako Fagerfjäll
Managing Director
Per Nordqvist
Interaction Designer
Maximilian Larsson
Graphic Designer

2. WE ARE THE OCEAN
Ocean 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.

3. THAT’S US
IN JAPAN!

4. FEDEX DAY
OCEAN’S MINI-STARTUP WEEKEND

5. 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

6. PUT TOGETHER A DIVERSE
GROUP OF PEOPLE

7. IF IT WAS ABOUT
THE PROCESS
ANYONE COULD
BE APPLE

8. 1. RESEARCH & STRATEGY

9. 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

10. “IF I’D ASKED MY CUSTOMERS WHAT
THEY WANTED THEY WOULD HAVE
SAID A FASTER HORSE”
- Tom Ford

11. 2. INITIAL CONCEPT

12. 3. REFINED CONCEPT

13. CRITICISM
PRESENTS AN
OPPORTUNITY
TO GROW
“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
Image from LIFE

14. 4. DESIGN PRODUCTION

15. 5. IMPLEMENTATION SUPPORT

16. THE DESIGN PROCESS
!

17. THE DESIGN PROCESS
START-UP WEEKEND
!

18. THE DESIGN PROCESS
START-UP WEEKEND
!

19. THE DESIGN PROCESS
START-UP WEEKEND
!
FRIDAY

20. THE DESIGN PROCESS
START-UP WEEKEND
!
FRIDAY SATURDAY

21. THE DESIGN PROCESS
START-UP WEEKEND
!
FRIDAY SATURDAY SUNDAY

22. DESIGN PRINCIPLES FOR A
BETTER USER EXPERIENCE

23. YOU RIGHT NOW
!
FRIDAY SATURDAY SUNDAY

24. YOU RIGHT NOW 9 DESIGN PRINCIPLES
!
FRIDAY SATURDAY SUNDAY

25. YOU RIGHT NOW 9 DESIGN PRINCIPLES RESULT
!
FRIDAY SATURDAY SUNDAY

26. Represent the basic assumptions of the world.
Affect the arrangement of objects within a composition.
Checklist and guide for the design practice.
YOU RIGHT NOW 9 DESIGN PRINCIPLES RESULT
!
FRIDAY SATURDAY SUNDAY

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

28. STRUCTURE
Where am I? How did I get here? Where can I go?

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

30. Ticket vending machine for
Stockholm Public Transportation
SIMPLICITY
Focus on most common use cases and optimize the workflow for these.
Economize the information and exclude all that is irrelevant or excessive.

31. “A design isn’t finished when there is nothing more to
add, but when there is nothing left to take away.”
SIMPLICITY
Focus on most common use cases and optimize the workflow for these.
Economize the information and exclude all that is irrelevant or excessive.

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

33. FEEDBACK
Inform 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.

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

35. Visual confusion is design
clutter and scares your
users away!
Hyperdia iPhone app
VISUAL COMPLEXITY
Find the right balance of complexity. Give prominence only to important
elements and be unmerciful when weighting your information.

36. AFFORDANCE
Elements should intuitively imply their functionality by their visual characteristics.

37. Learn from the real world!
AFFORDANCE
Elements should intuitively imply their functionality by their visual characteristics.

38. Learn from the real world!
AFFORDANCE
Elements should intuitively imply their functionality by their visual characteristics.

39. DIRECT
MANIPULATION
Interact with objects directly. Click, drag, mark & type as opposed to
commands, menu selections and dialogue boxes.

40. DIRECT
MANIPULATION
Interact with objects directly. Click, drag, mark & type as opposed to
commands, menu selections and dialogue boxes.

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

42. TOLERANCE
Prevent 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.

43. STRUCTURE AFFORDANCE
SIMPLICITY DIRECT MANIPULATION
RELEVANCE CONSISTENCY
FEEDBACK TOLERANCE
VISUAL COMPLEXITY
!
FRIDAY SATURDAY SUNDAY

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

45. WHERE IS
THE BANANA
What is the purpose of this
specific page?

48. MORE
BANANAS
Not too many bananas.
One big banana and some very few small ones.
Use common sense and don't make your users
think.

49. GRAPHIC DESIGN

50. ?
How to

51. I WILL NOT
TALK ABOUT Fonts, Photoshop,
Color matching.
- This is a crash course in a graphic design process for startup weekend

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

53. WIREFRAMES AWESOME APP
- 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

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

55. 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

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

57. GOOD LUCK!

58. THANK YOU!
mayako@oceanobservations.com
per@oceanobservations.com
maximilian@oceanobservations.com
www.oceanobservations.com
oceantokyo.tumblr.com
ocean_sthlm@twitter