SlideShare ist ein Scribd-Unternehmen logo
1 von 58
Downloaden Sie, um offline zu lesen
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
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.
THAT’S US
 IN JAPAN!
FEDEX DAY
OCEAN’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
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
4. DESIGN PRODUCTION
5. IMPLEMENTATION SUPPORT
THE DESIGN PROCESS




            !
THE DESIGN PROCESS

START-UP WEEKEND




                   !
THE DESIGN PROCESS

START-UP WEEKEND




            !
THE DESIGN PROCESS

START-UP WEEKEND




            !




FRIDAY
THE DESIGN PROCESS

START-UP WEEKEND




                    !




FRIDAY   SATURDAY
THE DESIGN PROCESS

START-UP WEEKEND




                    !




FRIDAY   SATURDAY       SUNDAY
DESIGN PRINCIPLES FOR A
BETTER USER EXPERIENCE
YOU RIGHT NOW




                     !




 FRIDAY   SATURDAY       SUNDAY
YOU RIGHT NOW 9 DESIGN PRINCIPLES




                     !




 FRIDAY   SATURDAY            SUNDAY
YOU RIGHT NOW 9 DESIGN PRINCIPLES      RESULT




                     !




 FRIDAY   SATURDAY            SUNDAY
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
STRUCTURE
Organize 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?
SIMPLICITY
Focus 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




SIMPLICITY
Focus 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.”




SIMPLICITY
Focus on most common use cases and optimize the workflow for these.
Economize the information and exclude all that is irrelevant or excessive.
RELEVANCE
Keep information that is relevant to the user’s current situation visible.
Hide or remove the rest. Show information when needed.
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.
VISUAL COMPLEXITY
Find 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




VISUAL COMPLEXITY
Find the right balance of complexity. Give prominence only to important
elements and be unmerciful when weighting your information.
AFFORDANCE
Elements should intuitively imply their functionality by their visual characteristics.
Learn from the real world!




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




AFFORDANCE
Elements should intuitively imply their functionality by their visual characteristics.
DIRECT
MANIPULATION
Interact with objects directly. Click, drag, mark & type as opposed to
commands, menu selections and dialogue boxes.
DIRECT
MANIPULATION
Interact with objects directly. Click, drag, mark & type as opposed to
commands, menu selections and dialogue boxes.
CONSISTENCY
Same conventions for ALL elements. Make unique or unrelated objects stand
out. Consistency within UI but also with platform conventions.
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.
STRUCTURE           AFFORDANCE
    SIMPLICITY          DIRECT MANIPULATION
    RELEVANCE           CONSISTENCY
    FEEDBACK            TOLERANCE
    VISUAL COMPLEXITY




                    !




FRIDAY   SATURDAY           SUNDAY
THE
BANANA
     It's the one thing you want your
     users to reach for.
WHERE IS
THE BANANA
         What is the purpose of this
         specific page?
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.
GRAPHIC DESIGN
?
How to
I WILL NOT
TALK ABOUT                                     Fonts, Photoshop,
                                               Color matching.




- This is a crash course in a graphic design process for startup weekend
CONSTRAINTS
- Device
- Code
- Time
- Target user
- Resolution
- Performance
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
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.com
per@oceanobservations.com
maximilian@oceanobservations.com

www.oceanobservations.com
oceantokyo.tumblr.com
ocean_sthlm@twitter

Weitere ähnliche Inhalte

Was ist angesagt?

How User Experience Addresses Unconscious Bias
How User Experience Addresses Unconscious BiasHow User Experience Addresses Unconscious Bias
How User Experience Addresses Unconscious Bias
Marcus Finley
 

Was ist angesagt? (20)

Code with Empathy: UX for Engineers and UX Developers
Code with Empathy: UX for Engineers and UX DevelopersCode with Empathy: UX for Engineers and UX Developers
Code with Empathy: UX for Engineers and UX Developers
 
Designing for physical versus digital products
Designing for physical versus digital productsDesigning for physical versus digital products
Designing for physical versus digital products
 
The 6 Immutable Principles of UX
The 6 Immutable Principles of UXThe 6 Immutable Principles of UX
The 6 Immutable Principles of UX
 
Best Practices in Remote Design
Best Practices in Remote DesignBest Practices in Remote Design
Best Practices in Remote Design
 
NoVA UX Responsive Design
NoVA UX Responsive DesignNoVA UX Responsive Design
NoVA UX Responsive Design
 
Designing interactive Experience
Designing interactive ExperienceDesigning interactive Experience
Designing interactive Experience
 
UCD from across the pond - A case study in remote UX
UCD from across the pond - A case study in remote UXUCD from across the pond - A case study in remote UX
UCD from across the pond - A case study in remote UX
 
What the UX? – Confessions of a Designer
What the UX? – Confessions of a DesignerWhat the UX? – Confessions of a Designer
What the UX? – Confessions of a Designer
 
Evolving an in-house design practice
Evolving an in-house design practiceEvolving an in-house design practice
Evolving an in-house design practice
 
Best Practices with MURAL
Best Practices with MURALBest Practices with MURAL
Best Practices with MURAL
 
Mastering UX Design: Learning the basics for future success
Mastering UX Design:  Learning the basics for future successMastering UX Design:  Learning the basics for future success
Mastering UX Design: Learning the basics for future success
 
Enterprise Usability: The Olive Garden Principle
Enterprise Usability: The Olive Garden PrincipleEnterprise Usability: The Olive Garden Principle
Enterprise Usability: The Olive Garden Principle
 
UX Portfolio Workshop for exploreUX
UX Portfolio Workshop for exploreUXUX Portfolio Workshop for exploreUX
UX Portfolio Workshop for exploreUX
 
Collaborating in MURAL
Collaborating in MURALCollaborating in MURAL
Collaborating in MURAL
 
How User Experience Addresses Unconscious Bias
How User Experience Addresses Unconscious BiasHow User Experience Addresses Unconscious Bias
How User Experience Addresses Unconscious Bias
 
Beyond usability
Beyond usabilityBeyond usability
Beyond usability
 
Prophets trends in Interactive Design 2012
Prophets trends in Interactive Design 2012Prophets trends in Interactive Design 2012
Prophets trends in Interactive Design 2012
 
Great UX Portfolios
Great UX PortfoliosGreat UX Portfolios
Great UX Portfolios
 
Designing for mobile. A UX perspective for developers
Designing for mobile. A UX perspective for developersDesigning for mobile. A UX perspective for developers
Designing for mobile. A UX perspective for developers
 
WORKSHOP: Making the World Easier with Interaction Design
WORKSHOP: Making the World Easier with Interaction DesignWORKSHOP: Making the World Easier with Interaction Design
WORKSHOP: Making the World Easier with Interaction Design
 

Andere mochten auch

Lec2 MECH ENG STRucture
Lec2    MECH ENG  STRuctureLec2    MECH ENG  STRucture
Lec2 MECH ENG STRucture
Mohamed Yaser
 
Be a fruit champion!!!
Be a fruit champion!!!Be a fruit champion!!!
Be a fruit champion!!!
clarodgers
 
อนุทินครั้งที่5
อนุทินครั้งที่5อนุทินครั้งที่5
อนุทินครั้งที่5
Iam Boice
 
Summary for the first evaluation
Summary for the first evaluationSummary for the first evaluation
Summary for the first evaluation
martamiren
 
Organizational change power point i
Organizational change  power point iOrganizational change  power point i
Organizational change power point i
Clemson University
 
Short-a Words
Short-a WordsShort-a Words
Short-a Words
Claire B
 
Lec10 MECH ENG STRucture
Lec10   MECH ENG  STRuctureLec10   MECH ENG  STRucture
Lec10 MECH ENG STRucture
Mohamed Yaser
 
Itecn453 it infrastructure
Itecn453 it infrastructureItecn453 it infrastructure
Itecn453 it infrastructure
Ahmad Ammari
 

Andere mochten auch (20)

Lec2 MECH ENG STRucture
Lec2    MECH ENG  STRuctureLec2    MECH ENG  STRucture
Lec2 MECH ENG STRucture
 
Be a fruit champion!!!
Be a fruit champion!!!Be a fruit champion!!!
Be a fruit champion!!!
 
อนุทินครั้งที่5
อนุทินครั้งที่5อนุทินครั้งที่5
อนุทินครั้งที่5
 
My EduWorld
My EduWorld My EduWorld
My EduWorld
 
Calendario 2012 Land of Immortals
Calendario 2012 Land of ImmortalsCalendario 2012 Land of Immortals
Calendario 2012 Land of Immortals
 
A comparison of historical vs current instructional design
A comparison of historical vs current instructional designA comparison of historical vs current instructional design
A comparison of historical vs current instructional design
 
Harbor UCLA Neuro-Radiology Case 8
Harbor UCLA Neuro-Radiology Case 8Harbor UCLA Neuro-Radiology Case 8
Harbor UCLA Neuro-Radiology Case 8
 
Brain tumor, post rhabdoid meningioma surgery
Brain tumor, post rhabdoid meningioma surgeryBrain tumor, post rhabdoid meningioma surgery
Brain tumor, post rhabdoid meningioma surgery
 
Regiswordpress
RegiswordpressRegiswordpress
Regiswordpress
 
Partesdemicuerpo2
Partesdemicuerpo2Partesdemicuerpo2
Partesdemicuerpo2
 
Summary for the first evaluation
Summary for the first evaluationSummary for the first evaluation
Summary for the first evaluation
 
Jelly berry
Jelly berryJelly berry
Jelly berry
 
Explorative services and UIs – MEX, London 2013
Explorative services and UIs – MEX, London 2013Explorative services and UIs – MEX, London 2013
Explorative services and UIs – MEX, London 2013
 
Organizational change power point i
Organizational change  power point iOrganizational change  power point i
Organizational change power point i
 
Russian Neurosurgical Journal; Vol 3, No 3
Russian Neurosurgical Journal; Vol 3, No 3Russian Neurosurgical Journal; Vol 3, No 3
Russian Neurosurgical Journal; Vol 3, No 3
 
Short-a Words
Short-a WordsShort-a Words
Short-a Words
 
Lec10 MECH ENG STRucture
Lec10   MECH ENG  STRuctureLec10   MECH ENG  STRucture
Lec10 MECH ENG STRucture
 
F 20
F 20F 20
F 20
 
Itecn453 it infrastructure
Itecn453 it infrastructureItecn453 it infrastructure
Itecn453 it infrastructure
 
DotNET framework
DotNET frameworkDotNET framework
DotNET framework
 

Ähnlich wie Ocean user experience-swtokyo

UX Design for Mobile Apps
UX Design for Mobile AppsUX Design for Mobile Apps
UX Design for Mobile Apps
Kamil Zieba
 
2013-02-05 UX design for mobile apps
2013-02-05 UX design for mobile apps2013-02-05 UX design for mobile apps
2013-02-05 UX design for mobile apps
CocoaHeads Tricity
 
Best Practices for a Great User Experience
Best Practices for a Great User ExperienceBest Practices for a Great User Experience
Best Practices for a Great User Experience
User Experience Labs
 
NYU Web Intensive - Week 3 Class 2
NYU Web Intensive - Week 3 Class 2NYU Web Intensive - Week 3 Class 2
NYU Web Intensive - Week 3 Class 2
studiokandm
 
Website Usability | Day 3
Website Usability | Day 3Website Usability | Day 3
Website Usability | Day 3
studiokandm
 

Ähnlich wie Ocean user experience-swtokyo (20)

UX Design for Mobile Apps
UX Design for Mobile AppsUX Design for Mobile Apps
UX Design for Mobile Apps
 
Pulling Rabbits Out of Your Ass - UX Design Fundamentals
Pulling Rabbits Out of Your Ass - UX Design FundamentalsPulling Rabbits Out of Your Ass - UX Design Fundamentals
Pulling Rabbits Out of Your Ass - UX Design Fundamentals
 
Design Matters
Design MattersDesign Matters
Design Matters
 
Designing for Wearables
Designing for WearablesDesigning for Wearables
Designing for Wearables
 
Dev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trendsDev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trends
 
09-UX.pdf
09-UX.pdf09-UX.pdf
09-UX.pdf
 
Ux
Ux Ux
Ux
 
Pixel Envy
Pixel EnvyPixel Envy
Pixel Envy
 
072012 tc day03
072012 tc day03072012 tc day03
072012 tc day03
 
App Design – Size Makes a difference
App Design – Size Makes a difference App Design – Size Makes a difference
App Design – Size Makes a difference
 
2013-02-05 UX design for mobile apps
2013-02-05 UX design for mobile apps2013-02-05 UX design for mobile apps
2013-02-05 UX design for mobile apps
 
Incorporating UX into Your Projects
Incorporating UX into Your ProjectsIncorporating UX into Your Projects
Incorporating UX into Your Projects
 
UIDB - Day 1
UIDB -  Day 1UIDB -  Day 1
UIDB - Day 1
 
Evolving the Creative Process
Evolving the Creative ProcessEvolving the Creative Process
Evolving the Creative Process
 
Agile UX
Agile UXAgile UX
Agile UX
 
IXDA_2009
IXDA_2009IXDA_2009
IXDA_2009
 
Best Practices for a Great User Experience
Best Practices for a Great User ExperienceBest Practices for a Great User Experience
Best Practices for a Great User Experience
 
Collaborating with UX
Collaborating with UXCollaborating with UX
Collaborating with UX
 
NYU Web Intensive - Week 3 Class 2
NYU Web Intensive - Week 3 Class 2NYU Web Intensive - Week 3 Class 2
NYU Web Intensive - Week 3 Class 2
 
Website Usability | Day 3
Website Usability | Day 3Website Usability | Day 3
Website Usability | Day 3
 

Kürzlich hochgeladen

Call Girls Electronic City Just Call 👗 7737669865 👗 Top Class Call Girl Servi...
Call Girls Electronic City Just Call 👗 7737669865 👗 Top Class Call Girl Servi...Call Girls Electronic City Just Call 👗 7737669865 👗 Top Class Call Girl Servi...
Call Girls Electronic City Just Call 👗 7737669865 👗 Top Class Call Girl Servi...
amitlee9823
 
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
dollysharma2066
 
FULL ENJOY Call Girls In Majnu Ka Tilla, Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Majnu Ka Tilla, Delhi Contact Us 8377877756FULL ENJOY Call Girls In Majnu Ka Tilla, Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Majnu Ka Tilla, Delhi Contact Us 8377877756
dollysharma2066
 

Kürzlich hochgeladen (20)

MONA 98765-12871 CALL GIRLS IN LUDHIANA LUDHIANA CALL GIRL
MONA 98765-12871 CALL GIRLS IN LUDHIANA LUDHIANA CALL GIRLMONA 98765-12871 CALL GIRLS IN LUDHIANA LUDHIANA CALL GIRL
MONA 98765-12871 CALL GIRLS IN LUDHIANA LUDHIANA CALL GIRL
 
Regression analysis: Simple Linear Regression Multiple Linear Regression
Regression analysis:  Simple Linear Regression Multiple Linear RegressionRegression analysis:  Simple Linear Regression Multiple Linear Regression
Regression analysis: Simple Linear Regression Multiple Linear Regression
 
7.pdf This presentation captures many uses and the significance of the number...
7.pdf This presentation captures many uses and the significance of the number...7.pdf This presentation captures many uses and the significance of the number...
7.pdf This presentation captures many uses and the significance of the number...
 
The Path to Product Excellence: Avoiding Common Pitfalls and Enhancing Commun...
The Path to Product Excellence: Avoiding Common Pitfalls and Enhancing Commun...The Path to Product Excellence: Avoiding Common Pitfalls and Enhancing Commun...
The Path to Product Excellence: Avoiding Common Pitfalls and Enhancing Commun...
 
Dr. Admir Softic_ presentation_Green Club_ENG.pdf
Dr. Admir Softic_ presentation_Green Club_ENG.pdfDr. Admir Softic_ presentation_Green Club_ENG.pdf
Dr. Admir Softic_ presentation_Green Club_ENG.pdf
 
Ensure the security of your HCL environment by applying the Zero Trust princi...
Ensure the security of your HCL environment by applying the Zero Trust princi...Ensure the security of your HCL environment by applying the Zero Trust princi...
Ensure the security of your HCL environment by applying the Zero Trust princi...
 
Call Girls Pune Just Call 9907093804 Top Class Call Girl Service Available
Call Girls Pune Just Call 9907093804 Top Class Call Girl Service AvailableCall Girls Pune Just Call 9907093804 Top Class Call Girl Service Available
Call Girls Pune Just Call 9907093804 Top Class Call Girl Service Available
 
It will be International Nurses' Day on 12 May
It will be International Nurses' Day on 12 MayIt will be International Nurses' Day on 12 May
It will be International Nurses' Day on 12 May
 
VVVIP Call Girls In Greater Kailash ➡️ Delhi ➡️ 9999965857 🚀 No Advance 24HRS...
VVVIP Call Girls In Greater Kailash ➡️ Delhi ➡️ 9999965857 🚀 No Advance 24HRS...VVVIP Call Girls In Greater Kailash ➡️ Delhi ➡️ 9999965857 🚀 No Advance 24HRS...
VVVIP Call Girls In Greater Kailash ➡️ Delhi ➡️ 9999965857 🚀 No Advance 24HRS...
 
HONOR Veterans Event Keynote by Michael Hawkins
HONOR Veterans Event Keynote by Michael HawkinsHONOR Veterans Event Keynote by Michael Hawkins
HONOR Veterans Event Keynote by Michael Hawkins
 
Cracking the Cultural Competence Code.pptx
Cracking the Cultural Competence Code.pptxCracking the Cultural Competence Code.pptx
Cracking the Cultural Competence Code.pptx
 
A DAY IN THE LIFE OF A SALESMAN / WOMAN
A DAY IN THE LIFE OF A  SALESMAN / WOMANA DAY IN THE LIFE OF A  SALESMAN / WOMAN
A DAY IN THE LIFE OF A SALESMAN / WOMAN
 
Call Girls Electronic City Just Call 👗 7737669865 👗 Top Class Call Girl Servi...
Call Girls Electronic City Just Call 👗 7737669865 👗 Top Class Call Girl Servi...Call Girls Electronic City Just Call 👗 7737669865 👗 Top Class Call Girl Servi...
Call Girls Electronic City Just Call 👗 7737669865 👗 Top Class Call Girl Servi...
 
Boost the utilization of your HCL environment by reevaluating use cases and f...
Boost the utilization of your HCL environment by reevaluating use cases and f...Boost the utilization of your HCL environment by reevaluating use cases and f...
Boost the utilization of your HCL environment by reevaluating use cases and f...
 
Monthly Social Media Update April 2024 pptx.pptx
Monthly Social Media Update April 2024 pptx.pptxMonthly Social Media Update April 2024 pptx.pptx
Monthly Social Media Update April 2024 pptx.pptx
 
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
 
FULL ENJOY Call Girls In Majnu Ka Tilla, Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Majnu Ka Tilla, Delhi Contact Us 8377877756FULL ENJOY Call Girls In Majnu Ka Tilla, Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Majnu Ka Tilla, Delhi Contact Us 8377877756
 
John Halpern sued for sexual assault.pdf
John Halpern sued for sexual assault.pdfJohn Halpern sued for sexual assault.pdf
John Halpern sued for sexual assault.pdf
 
Forklift Operations: Safety through Cartoons
Forklift Operations: Safety through CartoonsForklift Operations: Safety through Cartoons
Forklift Operations: Safety through Cartoons
 
RSA Conference Exhibitor List 2024 - Exhibitors Data
RSA Conference Exhibitor List 2024 - Exhibitors DataRSA Conference Exhibitor List 2024 - Exhibitors Data
RSA Conference Exhibitor List 2024 - Exhibitors Data
 

Ocean user experience-swtokyo