SlideShare a Scribd company logo
1 of 132
Download to read offline
designing
    mobile
   experiences
            by Brian Fling




                             MADE WITH LOVE IN SEATTLE BY
what does it take to
create an amazing
mobile experience?

                MADE WITH LOVE IN SEATTLE BY
Designing mobile experiences
Designing mobile experiences
Designing mobile experiences
Designing mobile experiences
Designing mobile experiences
these experiences are
not made in Photoshop


                MADE WITH LOVE IN SEATTLE BY
1965
   MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
Designing mobile experiences
He never made any
money from it.

              MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
FAIL
   MADE WITH LOVE IN SEATTLE BY
why did
my father fail?

             MADE WITH LOVE IN SEATTLE BY
2000
   MADE WITH LOVE IN SEATTLE BY
3
DEF
      MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
2
Ways of
Making
Money in
Mobile
          MADE WITH LOVE IN SEATTLE BY
Ringtones.

        MADE WITH LOVE IN SEATTLE BY
Carrier
Logos.
          MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
Lost our
backing & failed.

             MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
Designing mobile experiences
why does innovative
technology fail, while
others succeed?

                  MADE WITH LOVE IN SEATTLE BY
a mobile design & development
firm located in Fremont




a few of our clients...
“We could build the best mobile app
  ever made, but if our customers don’t
  know why it’s good, then it could be
a mobile design & development
firm located in Fremont

  the worst app ever made.
                          —Scott Dierdorf
a few of our clients...          @sdierdorf
mobile is really
damn hard...
          ... it always has been


                       MADE WITH LOVE IN SEATTLE BY
the craft of just creating
great mobile design is
not enough

                    MADE WITH LOVE IN SEATTLE BY
Designing mobile experiences
ls




                       tec
      oa




                          hn
     sg




                          ica
 es




                             lg
               sweet
sin

                spot




                               oa
bu




                                ls
             user goals
increases                                          dispenses



                       ls




                                      tec
                     oa
productivity                                          soda




                                         hn
                 sg




                                         ica
                es




                                            lg
                              sweet
               sin

                               spot




                                              oa
           bu




                                               ls
                            user goals

                       as easy to use
mobile is really
damn hard.

                   MADE WITH LOVE IN SEATTLE BY
examples


           MADE WITH LOVE IN SEATTLE BY
Designing mobile experiences
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
Creating Amazing Experiences for all Mobile Devices




CLIENT
Automatic Data Processing
PROJECTS
ADP iPhone App, Mobile Web App, Content Proxy
SERVICES                                                                                                             Screenshot
Concept, Strategy, Design & Development
DESCRIPTION
                                                                                                                     Placeholder
We designed and developed an application for ADP customers to
complete common tasks related to HR, payroll, and benefits in a
mobile context.




               This document contains confidential information and is provided for private review only. Do not distribute without permission.
disrupt



                   ls




                                  tec
                 oa
business




                                     hn
                sg




                                     ica
            es




                                        lg
                          sweet
           sin

                           spot




                                          oa
           bu




                                           ls
                        user goals
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
example


          MADE WITH LOVE IN SEATTLE BY
Designing mobile experiences
MADE WITH LOVE IN SEATTLE BY
Designing mobile experiences
Designing mobile experiences
refresh product
 lines before they
   become tired.
happy with just 50%
a bold vision empowers
people to cross the
chasm together.

                MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
“As long as a function is confined to
a small area on a wafer, the amount
of capacitance which must be driven
is distinctly limited.”
                         —Gordon E. Moore
                                          April 19, 1965




                             MADE WITH LOVE IN SEATTLE BY
+ 9 years =




              MADE WITH LOVE IN SEATTLE BY
1970           1980   1990     2000          2010                    2020

computing          mainframe        pc’s          mobility                       ubiquity




network



internet



devices



web




                                                             MADE WITH LOVE IN SEATTLE BY
1970           1980     1990          2000             2010                         2020

computing          mainframe          pc’s                  mobility                            ubiquity




network                        1G            2G      2.5G              3G                              4G




internet



devices



web




                                                                            MADE WITH LOVE IN SEATTLE BY
1970           1980     1990            2000             2010                         2020

computing          mainframe            pc’s                  mobility                            ubiquity




network                        1G              2G      2.5G              3G                              4G




internet                             IPv4                                                               IPv6




devices



web




                                                                              MADE WITH LOVE IN SEATTLE BY
1970           1980        1990               2000                2010                      2020

computing          mainframe               pc’s                     mobility                            ubiquity




network                        1G                 2G         2.5G              3G                              4G




internet                                IPv4                                                                  IPv6




devices                        brick           candybar             feature                           touch




web




                                                                                    MADE WITH LOVE IN SEATTLE BY
1970           1980           1990               2000                2010                      2020

computing          mainframe                  pc’s                     mobility                            ubiquity




network                         1G                   2G         2.5G              3G                              4G




internet                                   IPv4                                                                  IPv6




devices                         brick             candybar             feature                           touch




web                            academia               dot-com           web 2.0                          HTML5




                                                                                       MADE WITH LOVE IN SEATTLE BY
1970           1980           1990               2000                2010                      2020

computing          mainframe                  pc’s                     mobility                            ubiquity




network                         1G                   2G         2.5G              3G                              4G




internet                                   IPv4                                                                  IPv6




devices                         brick             candybar             feature                           touch




web                            academia               dot-com           web 2.0                          HTML5




                                                                                       MADE WITH LOVE IN SEATTLE BY
1970           1980           1990               2000                2010                      2020

computing          mainframe                  pc’s                     mobility                            ubiquity




network                         1G                   2G         2.5G              3G                              4G




internet                                   IPv4                                                                  IPv6




devices                         brick             candybar             feature                           touch




web                            academia               dot-com           web 2.0                          HTML5




                                                                                       MADE WITH LOVE IN SEATTLE BY
MOBILE BOOTCAMP


            MADE WITH LOVE IN SEATTLE BY
‣ designed to get brands on the mobile path
  quickly
‣ it lasts from 1-5 days depending on the size
  and scope of the project
‣ we create a shared vision of how mobile is
  meant to improve your business
‣ we discover what you do well
‣ we uncover areas where you can improve
‣ we define what success will look like
‣ we define how mobile will improve your
  bottom line
‣ the result is a mobile strategy that you can
  start on today that will take you into
  tomorrow



                                                 MADE WITH LOVE IN SEATTLE BY
disrupt



                   ls




                                  tec
                 oa
business




                                     hn
                sg




                                     ica
            es




                                        lg
                          sweet
           sin

                           spot




                                          oa
           bu




                                           ls
                        user goals

                  empower users
mobile is an
entirely new breed.


               MADE WITH LOVE IN SEATTLE BY
‣ Platform Aesthetic   ‣ Interactions
‣ Many Resolutions     ‣ Motion

‣ Pixels per Inch      ‣ Transitions

‣ Orientation          ‣ Color
‣ Design Grids         ‣ Typography

‣ Perspective          ‣ Iconography

‣ Dimension
Designing mobile experiences
Designing mobile experiences
6x Navigation & Toolbars
3x Alerts & Modals
26x Types of Views
15x View Controls
13x Application Controls
9x Animations & Transitions
Designing mobile experiences
Phones are
about making
the most of
the moment,
simple tasks,
& context.
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
think of your app as a
     great book.
  with a great beginning, middle and end


                                  MADE WITH LOVE IN SEATTLE BY
Designing mobile experiences
Tablets are
about focus,
consumption,
simple tasks
& portability.
examples


           MADE WITH LOVE IN SEATTLE BY
JOINT VENTURE


           MADE WITH LOVE IN SEATTLE BY
us                 them
mobile experts        customer experts




             the product


                                     MADE WITH LOVE IN SEATTLE BY
Designing mobile experiences
Designing mobile experiences
Designing mobile experiences
Designing mobile experiences
‣ The BBC app was designed by pinch/zoom
‣ BBC hired pinch/zoom based on their deep knowledge and over a
  decade’s experience of creating mobile experiences
‣ pinch/zoom & BBC designed the iPad app as a new means
  to connect people to the wealth of BBC content
‣ We worked with BBC to define strategy, pricing, wording, content,
  design, interactions and more
‣ pinch/zoom created an interaction concept to test with 32
  users between Dec 2010 and Feb 2011 in New York
‣ New York-based usability firm, Creative Good facilitated the
  usability tests
‣ We did rapid design iteration based on real-time user and
  client feedback
‣ iPad users are incredibly sophisticated
‣ Users have an expectation of the “Apple Aesthetic” when it comes to
  interaction and user experience. Pixel perfection is important.
‣ Users prefer Need-driven over Marketing-driven Design
‣ Users are in control of their iPad experience, and will remove, close,
  delete or leave anything they perceive as marketing or advertising
  activity.
‣ Less is more
‣ This is true when talking about animations or content on each
  screen. Users have an expectation of interactions but are impatient
  with too much animation.
‣ Gestures Matter
‣ Web metaphors, like scrolling are considered “cheap” or “lower
  quality.” Users prefer “native” metaphors like swiping.
disrupt                                         device



                   ls




                                  tec
                 oa
business                                       constraints




                                     hn
                sg




                                     ica
            es




                                        lg
                          sweet
           sin

                           spot




                                          oa
           bu




                                           ls
                        user goals

                  empower users
Designing mobile experiences
Designing mobile experiences
Designing mobile experiences
Designing mobile experiences
Designing mobile experiences
Designing mobile experiences
Planning   Interactions   Design       Integration   Development   Testing   Fixes   Deployment




                                   DESIGNERS                  DEVELOPERS
example


          MADE WITH LOVE IN SEATTLE BY
p/z universal
build a website that provided the best
possible experience to the context.

      iPad         iPhone        Desktop
      magazine     web app       website
MADE WITH LOVE IN SEATTLE BY
1x HTML5 Markup
1x Typography Framework
3x Javascript Frameworks
12x Media-Query-based Layouts
1x Hexadecimal CSS Framework
a hexadecimal what?



                MADE WITH LOVE IN SEATTLE BY
the hex-grid
Typically when using a grid
web designers are typically
only using vertical units.
the hex-grid
but in mobile design, we must use
horizontal units as well. this
means that any unit size must
work vertically as well as
horizontally.
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
Asset Library



                                   App Flow      Reference
                                                                Design Comps
                                                  Design


               Context Map     Data Modeling                        Design
                                                  App Map
                                                                   Direction


                  Journeys        API Audit    Zone Diagrams     Wireframes
Deliverables




               Project Brief                       Screen
                               Content Audit                      Design Brief
                                                 Descriptions


                  Define             Data        Interaction       Design




               Process
CARMEN   agile product management




                          MADE WITH LOVE IN SEATTLE BY
A Fully Agile Agency
                                      From Start to Finish
This document contains confidential information and is provided for private review only. Do not distribute without permission.
you can create
innovative technology
that succeeds.

                MADE WITH LOVE IN SEATTLE BY
you can design mobile
experiences that
empower.

                MADE WITH LOVE IN SEATTLE BY
ls




                       tec
      oa




                          hn
     sg




                          ica
 es




                             lg
               sweet
sin

                spot




                               oa
bu




                                ls
             user goals



                                    MADE WITH LOVE IN SEATTLE BY
ls




                         tec
        oa




                            hn
      sg




                            ica
   es
Trust the Triangle!



                               lg
                 sweet
  sin

                  spot




                                 oa
 bu




                                  ls
               user goals



                                      MADE WITH LOVE IN SEATTLE BY
mobiledesign.org
Get in Touch
THANK YOU!                 Find Out How We Can Help You.

                                   Brian Fling
                                   Founder & CEO

@fling                          brian@pinchzoom.com
                                   +1 206 351-6060
book mobiledesign.org
company pinchzoom.com
blog pinchzoom.com/fling

More Related Content

Viewers also liked

Native v. Hybrid v. Web
Native v. Hybrid v. WebNative v. Hybrid v. Web
Native v. Hybrid v. WebBrian Fling
 
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)Brian Fling
 
6 Rules for Building Amazing Apps for Mobile & Tablet Devices
6 Rules for Building Amazing Apps for Mobile & Tablet Devices6 Rules for Building Amazing Apps for Mobile & Tablet Devices
6 Rules for Building Amazing Apps for Mobile & Tablet DevicesBrian Fling
 
Information Architecture & UI Design
Information Architecture & UI DesignInformation Architecture & UI Design
Information Architecture & UI DesignIvano Malavolta
 
Mobile Information Architecture
Mobile Information ArchitectureMobile Information Architecture
Mobile Information ArchitectureChristian Crumlish
 
Mobile Application Development: Hybrid, Native and Mobile Web Apps
Mobile Application Development: Hybrid, Native and Mobile Web AppsMobile Application Development: Hybrid, Native and Mobile Web Apps
Mobile Application Development: Hybrid, Native and Mobile Web AppsPaul Sons
 
Modeling behaviour via UML state machines [Software Modeling] [Computer Scie...
Modeling behaviour via  UML state machines [Software Modeling] [Computer Scie...Modeling behaviour via  UML state machines [Software Modeling] [Computer Scie...
Modeling behaviour via UML state machines [Software Modeling] [Computer Scie...Ivano Malavolta
 
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction DesignMobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction DesignNick Finck
 
Designing Mobile Experiences
Designing Mobile ExperiencesDesigning Mobile Experiences
Designing Mobile ExperiencesBrian Fling
 
Mobile Ecosystem
Mobile EcosystemMobile Ecosystem
Mobile EcosystemPragati Rai
 

Viewers also liked (12)

What is Information Architecture?
What is Information Architecture?What is Information Architecture?
What is Information Architecture?
 
Native v. Hybrid v. Web
Native v. Hybrid v. WebNative v. Hybrid v. Web
Native v. Hybrid v. Web
 
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
 
6 Rules for Building Amazing Apps for Mobile & Tablet Devices
6 Rules for Building Amazing Apps for Mobile & Tablet Devices6 Rules for Building Amazing Apps for Mobile & Tablet Devices
6 Rules for Building Amazing Apps for Mobile & Tablet Devices
 
Different types of mobile apps
Different types of mobile appsDifferent types of mobile apps
Different types of mobile apps
 
Information Architecture & UI Design
Information Architecture & UI DesignInformation Architecture & UI Design
Information Architecture & UI Design
 
Mobile Information Architecture
Mobile Information ArchitectureMobile Information Architecture
Mobile Information Architecture
 
Mobile Application Development: Hybrid, Native and Mobile Web Apps
Mobile Application Development: Hybrid, Native and Mobile Web AppsMobile Application Development: Hybrid, Native and Mobile Web Apps
Mobile Application Development: Hybrid, Native and Mobile Web Apps
 
Modeling behaviour via UML state machines [Software Modeling] [Computer Scie...
Modeling behaviour via  UML state machines [Software Modeling] [Computer Scie...Modeling behaviour via  UML state machines [Software Modeling] [Computer Scie...
Modeling behaviour via UML state machines [Software Modeling] [Computer Scie...
 
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction DesignMobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
 
Designing Mobile Experiences
Designing Mobile ExperiencesDesigning Mobile Experiences
Designing Mobile Experiences
 
Mobile Ecosystem
Mobile EcosystemMobile Ecosystem
Mobile Ecosystem
 

More from Brian Fling

What's Next: How Mobile is Changing Design
What's Next: How Mobile is Changing DesignWhat's Next: How Mobile is Changing Design
What's Next: How Mobile is Changing DesignBrian Fling
 
Mobile 2.0: Design & Develop for the iPhone and Beyond
Mobile 2.0: Design & Develop for the iPhone and BeyondMobile 2.0: Design & Develop for the iPhone and Beyond
Mobile 2.0: Design & Develop for the iPhone and BeyondBrian Fling
 
Mobile 2.0: Design and Develop for the iPhone and Beyond (Web 2.0 Expo)
Mobile 2.0: Design and Develop for the iPhone and Beyond (Web 2.0 Expo)Mobile 2.0: Design and Develop for the iPhone and Beyond (Web 2.0 Expo)
Mobile 2.0: Design and Develop for the iPhone and Beyond (Web 2.0 Expo)Brian Fling
 
How the iPhone will forever change the mobile space (Over the Air)
How the iPhone will forever change the mobile space (Over the Air)How the iPhone will forever change the mobile space (Over the Air)
How the iPhone will forever change the mobile space (Over the Air)Brian Fling
 
Mobile Monday Austin: How the iPhone will forever change the Mobile Space
Mobile Monday Austin: How the iPhone will forever change the Mobile SpaceMobile Monday Austin: How the iPhone will forever change the Mobile Space
Mobile Monday Austin: How the iPhone will forever change the Mobile SpaceBrian Fling
 
Web Builder 2.0 Workshop: iPhone Design and Development Workshop
Web Builder 2.0 Workshop:  iPhone Design and Development WorkshopWeb Builder 2.0 Workshop:  iPhone Design and Development Workshop
Web Builder 2.0 Workshop: iPhone Design and Development WorkshopBrian Fling
 
Web 2.0 Expo 2007
Web 2.0 Expo 2007Web 2.0 Expo 2007
Web 2.0 Expo 2007Brian Fling
 
Web Design World 2007: iPhone Design and Development Workshop
Web Design World 2007: iPhone Design and Development WorkshopWeb Design World 2007: iPhone Design and Development Workshop
Web Design World 2007: iPhone Design and Development WorkshopBrian Fling
 
The Next Generation of the Mobile Web
The Next Generation of the Mobile WebThe Next Generation of the Mobile Web
The Next Generation of the Mobile WebBrian Fling
 
Getting Started in the Mobile Web
Getting Started in the Mobile WebGetting Started in the Mobile Web
Getting Started in the Mobile WebBrian Fling
 
Designing for Mobile
Designing for MobileDesigning for Mobile
Designing for MobileBrian Fling
 
Blue Flavor's Leaflets
Blue Flavor's LeafletsBlue Flavor's Leaflets
Blue Flavor's LeafletsBrian Fling
 

More from Brian Fling (12)

What's Next: How Mobile is Changing Design
What's Next: How Mobile is Changing DesignWhat's Next: How Mobile is Changing Design
What's Next: How Mobile is Changing Design
 
Mobile 2.0: Design & Develop for the iPhone and Beyond
Mobile 2.0: Design & Develop for the iPhone and BeyondMobile 2.0: Design & Develop for the iPhone and Beyond
Mobile 2.0: Design & Develop for the iPhone and Beyond
 
Mobile 2.0: Design and Develop for the iPhone and Beyond (Web 2.0 Expo)
Mobile 2.0: Design and Develop for the iPhone and Beyond (Web 2.0 Expo)Mobile 2.0: Design and Develop for the iPhone and Beyond (Web 2.0 Expo)
Mobile 2.0: Design and Develop for the iPhone and Beyond (Web 2.0 Expo)
 
How the iPhone will forever change the mobile space (Over the Air)
How the iPhone will forever change the mobile space (Over the Air)How the iPhone will forever change the mobile space (Over the Air)
How the iPhone will forever change the mobile space (Over the Air)
 
Mobile Monday Austin: How the iPhone will forever change the Mobile Space
Mobile Monday Austin: How the iPhone will forever change the Mobile SpaceMobile Monday Austin: How the iPhone will forever change the Mobile Space
Mobile Monday Austin: How the iPhone will forever change the Mobile Space
 
Web Builder 2.0 Workshop: iPhone Design and Development Workshop
Web Builder 2.0 Workshop:  iPhone Design and Development WorkshopWeb Builder 2.0 Workshop:  iPhone Design and Development Workshop
Web Builder 2.0 Workshop: iPhone Design and Development Workshop
 
Web 2.0 Expo 2007
Web 2.0 Expo 2007Web 2.0 Expo 2007
Web 2.0 Expo 2007
 
Web Design World 2007: iPhone Design and Development Workshop
Web Design World 2007: iPhone Design and Development WorkshopWeb Design World 2007: iPhone Design and Development Workshop
Web Design World 2007: iPhone Design and Development Workshop
 
The Next Generation of the Mobile Web
The Next Generation of the Mobile WebThe Next Generation of the Mobile Web
The Next Generation of the Mobile Web
 
Getting Started in the Mobile Web
Getting Started in the Mobile WebGetting Started in the Mobile Web
Getting Started in the Mobile Web
 
Designing for Mobile
Designing for MobileDesigning for Mobile
Designing for Mobile
 
Blue Flavor's Leaflets
Blue Flavor's LeafletsBlue Flavor's Leaflets
Blue Flavor's Leaflets
 

Recently uploaded

Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 

Recently uploaded (19)

Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 

Designing mobile experiences

  • 1. designing mobile experiences by Brian Fling MADE WITH LOVE IN SEATTLE BY
  • 2. what does it take to create an amazing mobile experience? MADE WITH LOVE IN SEATTLE BY
  • 8. these experiences are not made in Photoshop MADE WITH LOVE IN SEATTLE BY
  • 9. 1965 MADE WITH LOVE IN SEATTLE BY
  • 10. MADE WITH LOVE IN SEATTLE BY
  • 11. MADE WITH LOVE IN SEATTLE BY
  • 12. MADE WITH LOVE IN SEATTLE BY
  • 13. MADE WITH LOVE IN SEATTLE BY
  • 14. MADE WITH LOVE IN SEATTLE BY
  • 15. MADE WITH LOVE IN SEATTLE BY
  • 16. MADE WITH LOVE IN SEATTLE BY
  • 17. MADE WITH LOVE IN SEATTLE BY
  • 18. MADE WITH LOVE IN SEATTLE BY
  • 19. MADE WITH LOVE IN SEATTLE BY
  • 21. He never made any money from it. MADE WITH LOVE IN SEATTLE BY
  • 22. MADE WITH LOVE IN SEATTLE BY
  • 23. MADE WITH LOVE IN SEATTLE BY
  • 24. MADE WITH LOVE IN SEATTLE BY
  • 25. FAIL MADE WITH LOVE IN SEATTLE BY
  • 26. why did my father fail? MADE WITH LOVE IN SEATTLE BY
  • 27. 2000 MADE WITH LOVE IN SEATTLE BY
  • 28. 3 DEF MADE WITH LOVE IN SEATTLE BY
  • 29. MADE WITH LOVE IN SEATTLE BY
  • 30. MADE WITH LOVE IN SEATTLE BY
  • 31. MADE WITH LOVE IN SEATTLE BY
  • 32. 2 Ways of Making Money in Mobile MADE WITH LOVE IN SEATTLE BY
  • 33. Ringtones. MADE WITH LOVE IN SEATTLE BY
  • 34. Carrier Logos. MADE WITH LOVE IN SEATTLE BY
  • 35. MADE WITH LOVE IN SEATTLE BY
  • 36. MADE WITH LOVE IN SEATTLE BY
  • 37. Lost our backing & failed. MADE WITH LOVE IN SEATTLE BY
  • 38. MADE WITH LOVE IN SEATTLE BY
  • 40. why does innovative technology fail, while others succeed? MADE WITH LOVE IN SEATTLE BY
  • 41. a mobile design & development firm located in Fremont a few of our clients...
  • 42. “We could build the best mobile app ever made, but if our customers don’t know why it’s good, then it could be a mobile design & development firm located in Fremont the worst app ever made. —Scott Dierdorf a few of our clients... @sdierdorf
  • 43. mobile is really damn hard... ... it always has been MADE WITH LOVE IN SEATTLE BY
  • 44. the craft of just creating great mobile design is not enough MADE WITH LOVE IN SEATTLE BY
  • 46. ls tec oa hn sg ica es lg sweet sin spot oa bu ls user goals
  • 47. increases dispenses ls tec oa productivity soda hn sg ica es lg sweet sin spot oa bu ls user goals as easy to use
  • 48. mobile is really damn hard. MADE WITH LOVE IN SEATTLE BY
  • 49. examples MADE WITH LOVE IN SEATTLE BY
  • 51. MADE WITH LOVE IN SEATTLE BY
  • 52. MADE WITH LOVE IN SEATTLE BY
  • 53. MADE WITH LOVE IN SEATTLE BY
  • 54. MADE WITH LOVE IN SEATTLE BY
  • 55. MADE WITH LOVE IN SEATTLE BY
  • 56. Creating Amazing Experiences for all Mobile Devices CLIENT Automatic Data Processing PROJECTS ADP iPhone App, Mobile Web App, Content Proxy SERVICES Screenshot Concept, Strategy, Design & Development DESCRIPTION Placeholder We designed and developed an application for ADP customers to complete common tasks related to HR, payroll, and benefits in a mobile context. This document contains confidential information and is provided for private review only. Do not distribute without permission.
  • 57. disrupt ls tec oa business hn sg ica es lg sweet sin spot oa bu ls user goals
  • 58. MADE WITH LOVE IN SEATTLE BY
  • 59. MADE WITH LOVE IN SEATTLE BY
  • 60. MADE WITH LOVE IN SEATTLE BY
  • 61. MADE WITH LOVE IN SEATTLE BY
  • 62. MADE WITH LOVE IN SEATTLE BY
  • 63. example MADE WITH LOVE IN SEATTLE BY
  • 65. MADE WITH LOVE IN SEATTLE BY
  • 68. refresh product lines before they become tired. happy with just 50%
  • 69. a bold vision empowers people to cross the chasm together. MADE WITH LOVE IN SEATTLE BY
  • 70. MADE WITH LOVE IN SEATTLE BY
  • 71. “As long as a function is confined to a small area on a wafer, the amount of capacitance which must be driven is distinctly limited.” —Gordon E. Moore April 19, 1965 MADE WITH LOVE IN SEATTLE BY
  • 72. + 9 years = MADE WITH LOVE IN SEATTLE BY
  • 73. 1970 1980 1990 2000 2010 2020 computing mainframe pc’s mobility ubiquity network internet devices web MADE WITH LOVE IN SEATTLE BY
  • 74. 1970 1980 1990 2000 2010 2020 computing mainframe pc’s mobility ubiquity network 1G 2G 2.5G 3G 4G internet devices web MADE WITH LOVE IN SEATTLE BY
  • 75. 1970 1980 1990 2000 2010 2020 computing mainframe pc’s mobility ubiquity network 1G 2G 2.5G 3G 4G internet IPv4 IPv6 devices web MADE WITH LOVE IN SEATTLE BY
  • 76. 1970 1980 1990 2000 2010 2020 computing mainframe pc’s mobility ubiquity network 1G 2G 2.5G 3G 4G internet IPv4 IPv6 devices brick candybar feature touch web MADE WITH LOVE IN SEATTLE BY
  • 77. 1970 1980 1990 2000 2010 2020 computing mainframe pc’s mobility ubiquity network 1G 2G 2.5G 3G 4G internet IPv4 IPv6 devices brick candybar feature touch web academia dot-com web 2.0 HTML5 MADE WITH LOVE IN SEATTLE BY
  • 78. 1970 1980 1990 2000 2010 2020 computing mainframe pc’s mobility ubiquity network 1G 2G 2.5G 3G 4G internet IPv4 IPv6 devices brick candybar feature touch web academia dot-com web 2.0 HTML5 MADE WITH LOVE IN SEATTLE BY
  • 79. 1970 1980 1990 2000 2010 2020 computing mainframe pc’s mobility ubiquity network 1G 2G 2.5G 3G 4G internet IPv4 IPv6 devices brick candybar feature touch web academia dot-com web 2.0 HTML5 MADE WITH LOVE IN SEATTLE BY
  • 80. MOBILE BOOTCAMP MADE WITH LOVE IN SEATTLE BY
  • 81. ‣ designed to get brands on the mobile path quickly ‣ it lasts from 1-5 days depending on the size and scope of the project ‣ we create a shared vision of how mobile is meant to improve your business ‣ we discover what you do well ‣ we uncover areas where you can improve ‣ we define what success will look like ‣ we define how mobile will improve your bottom line ‣ the result is a mobile strategy that you can start on today that will take you into tomorrow MADE WITH LOVE IN SEATTLE BY
  • 82. disrupt ls tec oa business hn sg ica es lg sweet sin spot oa bu ls user goals empower users
  • 83. mobile is an entirely new breed. MADE WITH LOVE IN SEATTLE BY
  • 84. ‣ Platform Aesthetic ‣ Interactions ‣ Many Resolutions ‣ Motion ‣ Pixels per Inch ‣ Transitions ‣ Orientation ‣ Color ‣ Design Grids ‣ Typography ‣ Perspective ‣ Iconography ‣ Dimension
  • 87. 6x Navigation & Toolbars 3x Alerts & Modals 26x Types of Views 15x View Controls 13x Application Controls 9x Animations & Transitions
  • 89. Phones are about making the most of the moment, simple tasks, & context.
  • 90. MADE WITH LOVE IN SEATTLE BY
  • 91. MADE WITH LOVE IN SEATTLE BY
  • 92. think of your app as a great book. with a great beginning, middle and end MADE WITH LOVE IN SEATTLE BY
  • 95. examples MADE WITH LOVE IN SEATTLE BY
  • 96. JOINT VENTURE MADE WITH LOVE IN SEATTLE BY
  • 97. us them mobile experts customer experts the product MADE WITH LOVE IN SEATTLE BY
  • 102. ‣ The BBC app was designed by pinch/zoom ‣ BBC hired pinch/zoom based on their deep knowledge and over a decade’s experience of creating mobile experiences ‣ pinch/zoom & BBC designed the iPad app as a new means to connect people to the wealth of BBC content ‣ We worked with BBC to define strategy, pricing, wording, content, design, interactions and more ‣ pinch/zoom created an interaction concept to test with 32 users between Dec 2010 and Feb 2011 in New York ‣ New York-based usability firm, Creative Good facilitated the usability tests ‣ We did rapid design iteration based on real-time user and client feedback
  • 103. ‣ iPad users are incredibly sophisticated ‣ Users have an expectation of the “Apple Aesthetic” when it comes to interaction and user experience. Pixel perfection is important. ‣ Users prefer Need-driven over Marketing-driven Design ‣ Users are in control of their iPad experience, and will remove, close, delete or leave anything they perceive as marketing or advertising activity. ‣ Less is more ‣ This is true when talking about animations or content on each screen. Users have an expectation of interactions but are impatient with too much animation. ‣ Gestures Matter ‣ Web metaphors, like scrolling are considered “cheap” or “lower quality.” Users prefer “native” metaphors like swiping.
  • 104. disrupt device ls tec oa business constraints hn sg ica es lg sweet sin spot oa bu ls user goals empower users
  • 111. Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS
  • 112. example MADE WITH LOVE IN SEATTLE BY
  • 113. p/z universal build a website that provided the best possible experience to the context. iPad iPhone Desktop magazine web app website
  • 114. MADE WITH LOVE IN SEATTLE BY
  • 115. 1x HTML5 Markup 1x Typography Framework 3x Javascript Frameworks 12x Media-Query-based Layouts 1x Hexadecimal CSS Framework
  • 116. a hexadecimal what? MADE WITH LOVE IN SEATTLE BY
  • 117. the hex-grid Typically when using a grid web designers are typically only using vertical units.
  • 118. the hex-grid but in mobile design, we must use horizontal units as well. this means that any unit size must work vertically as well as horizontally.
  • 119. MADE WITH LOVE IN SEATTLE BY
  • 120. MADE WITH LOVE IN SEATTLE BY
  • 121. MADE WITH LOVE IN SEATTLE BY
  • 122. MADE WITH LOVE IN SEATTLE BY
  • 123. MADE WITH LOVE IN SEATTLE BY
  • 124. Asset Library App Flow Reference Design Comps Design Context Map Data Modeling Design App Map Direction Journeys API Audit Zone Diagrams Wireframes Deliverables Project Brief Screen Content Audit Design Brief Descriptions Define Data Interaction Design Process
  • 125. CARMEN agile product management MADE WITH LOVE IN SEATTLE BY
  • 126. A Fully Agile Agency From Start to Finish This document contains confidential information and is provided for private review only. Do not distribute without permission.
  • 127. you can create innovative technology that succeeds. MADE WITH LOVE IN SEATTLE BY
  • 128. you can design mobile experiences that empower. MADE WITH LOVE IN SEATTLE BY
  • 129. ls tec oa hn sg ica es lg sweet sin spot oa bu ls user goals MADE WITH LOVE IN SEATTLE BY
  • 130. ls tec oa hn sg ica es Trust the Triangle! lg sweet sin spot oa bu ls user goals MADE WITH LOVE IN SEATTLE BY
  • 132. Get in Touch THANK YOU! Find Out How We Can Help You. Brian Fling Founder & CEO @fling brian@pinchzoom.com +1 206 351-6060 book mobiledesign.org company pinchzoom.com blog pinchzoom.com/fling