SlideShare a Scribd company logo
UX/UI: Design for
Human Interaction
Ryan Smeets, Director of Client Strategy- Brushfire Interactive

@ryansmeets & @startabrushfire
TWEET:

@JOINAZIMA
KEYNOTE AGENDA
• Introduction
• A framework for “design”
• Define (un)necessary buzzwords
• Case Studies
• Practical Application
2
Ryan Smeets, Brushfire Interactive

@ryansmeets & @startabrushfire
A MORE REALISTIC AGENDA
• I will present information
• You [may] react or ask questions
• We [should] all meet new people
3
Ryan Smeets, Brushfire Interactive

@ryansmeets & @startabrushfire
RYAN

SMEETS [lucky guy]
4
TWEET TO:

@ryansmeets @startabrushfire
• FEATURED IN MASHABLE, WIRED, USA TODAY

& NY TIMES
• APPLE DESIGN OF THE YEAR
• 3 APPS IN APPLE HALL OF FAME
• 2 STARBUCKS APPS OF THE WEEK
• MICROSOFT CASE STUDY
5
Why define the term as 

“Human Interaction?”
6
• The culmination of previously used buzzwords.
• Not limited to just technology.
• Best explains the end goal of design.
Ryan Smeets, Brushfire Interactive

@ryansmeets & @startabrushfire
Human Interaction [a brief evolution]
1960’s Desktop Calculators

(e.g, 9100A)
Engelbart’s first computer mouse ‘64
1970’s Actual “Computers”

(e.g, HP3000)
Xerox Alto PC & Simonyi’s WYSIWYG ‘74
Decade | Product Era Resulting Innovation
7
Ryan Smeets, Brushfire Interactive

@ryansmeets & @startabrushfire
Human Interaction [a brief evolution]
Decade | Product Era Resulting Innovation
8
1980’s Personal Computing

(e.g, Commodore 64 OS ROM BASIC)
Intel microprocessor ’85 Recordable CD’s ‘88
1990’s Web 1.0

(e.g, Netscape, Yahoo, Ebay, Paypal & Google )
World Wide Web ’91 Google founded ‘98
Ryan Smeets, Brushfire Interactive

@ryansmeets & @startabrushfire
Human Interaction [a brief evolution]
Decade | Product Era Resulting Innovation
9
2000’s Web 2.0 +
Dawn of mobile

(e.g, personalized products & social
networks) Itunes ’03, YouTube ’05, Iphones ’06 + Android phones ‘08
2010’s Proliferation
of Mobile + IOTs

(e.g, Tablets, Wearables and smart
devices) FitBit ’11, Google Cardboard VR ‘15
Ryan Smeets, Brushfire Interactive

@ryansmeets & @startabrushfire
– Matías Duarte, Google VP of Design
“Everything is going to have power, everything is
going to have a screen, everything is going to
have wifi, everything is going to have computer
chips.
Your personal computer will actually be a series
of devices that surrounds you and that you
move through- that’s what the future is going to
be like. It’s not about any one device having to
have some killer feature that makes everyone
want to have it. 



In the future, we’re going to treat smart devices
like we do apps today.”
10
Human Interaction Trifecta [design]
• A New Reality for 

Consumer’s Demands + Expectations
DOES IT SOLVE
AN IMMEDIATE
NEED?
USEFUL
CONTENT
HONORS THE FEATURES
OF THE DEVICE(S)
11
Ryan Smeets, Brushfire Interactive

@ryansmeets & @startabrushfire
Human Interaction [design]
• Proof = Rise of “Chief Design Officers”
• Positioned alongside CFOs + CEOs
• Autonomous of Marketing or Product Teams
12
Human Interaction [content]
• A New Reality for a Company’s Demands +
Expectations
• Text is powerful, influential and accessible
• Video is powerful, influential and accessible
• Everything comes back to storytelling!
13
Human Interaction [content]
source: bradfrost.com 14
SNAP A PHOTO!
Human Interaction [design + content]
THE WEDGE:
IMPORTANCE OF A SINGLE PURPOSE

[THE 15 SECOND RULE]
15
SNAP A PHOTO
OF THIS SLIDE!
Ryan Smeets, Brushfire Interactive

@ryansmeets & @startabrushfire
We are collaborating with Trimble Navigation
to revolutionize construction automation.
Trimble's Android products are leap frogging
the competition by automating processes for
drivers of heavy machinery. With the help of
Brushfire, Trimble’s simple, elegant user
experience has created waves in the
construction industry
Android (OEM and OTS)
16
Brushfire worked closely with the Crossway
team to redesign and expand their iOS and
Android apps for both the ESV and ESV
Study Bible (originally launched by our
friends at Subsplash). The software teams
from both organizations worked side-by-
side to create one of the most elegant and
fastest performing Bible apps available.
iPhone, Android
17
Brushfire designed and developed the
Child Sponsorship App on behalf of
Compassion International. Child Sponsors
can now see biographical info and photos
of their children, write or send a photo
from their device or learn about the child’s
country and their favorite activities.
Universal iOS and Android
18
No cash on hand? Bravo is the
revolutionary new tipping app designed
to transfer tips quickly and easily to
service professionals. Brushfire
collaborated with Bravo to create a
product roadmap, name/brand/logo, UX
design, marketing strategy, and web/
mobile tipping platform
Android, iPhone, Web
19
A Brief Discussion: Poor vs Good Design
20
Poor = Difficulty navigating + visually uninviting
Good = Frictionless + inviting + familiar
Ryan Smeets, Brushfire Interactive

@ryansmeets & @startabrushfire
21
Human Interaction [entry-level choices]
Web: Cookie Cutter vs Professional Design
• WordPress, SquareSpace & Twitter Bootstrap
Themes are the new normal
• Cheap & Easy = bootswatch.com,
rockettheme.com, startbootstrap.com
bootbundle.com or search via any respective
theme shops
Ryan Smeets, Brushfire Interactive

@ryansmeets & @startabrushfire
Human Interaction [professional process]
Minimum Viable Product (MVP) Approach
• Brainstorming + Whiteboard Workshop
• Wireframes
• Design Exploration
• Present Early Concepts
• Refine
• Prototype
22
Human Interaction [tools]
• Wireframes = Balsamiq or OmniGraffle


TIP:

Tools like these should look like sketches. 

They facilitate conversation around features and functions 23
Human Interaction [tools]
• Actual Design = Adobe Photoshop or Sketch
TIP:

Familiar tools are good to use however the aim with clients at this
phase should be to hone the overall look and feel. 24
Human Interaction [tools]
• Rapid Prototyping = Invision, sketch or proto.io
TIP:

Prototyping fosters immediate user feedback and allows developers to
better estimate in an MVP framework. 25
HUMAN INTERACTION APPLIED
email | Google Inbox
26
HUMAN INTERACTION APPLIED
email | Google Inbox
Previous Email Problems Alleviated Through New Design:
• Clutter
• Desire/Ability to Respond Appropriately
• Lack of Personalization
 27
CLOSING THOUGHTS
– Robert Brunner, Ammunition (Design Studio)
“Technology enables; it’s design that
puts it in people’s lives, makes it
accessible and makes it interesting and
desirable. Most savvy companies will
have to invest in design as much as
they do in their technology program.”
28
TWEET:

@JOINAZIMA

More Related Content

What's hot

Android Material Design Quick Presentation
Android Material Design Quick PresentationAndroid Material Design Quick Presentation
Android Material Design Quick Presentation
Deimantas Brandišauskas
 
flat design and colors
flat design and colorsflat design and colors
flat design and colors
Halil Eren Çelik
 
Material Design on Android
Material Design on Android Material Design on Android
Material Design on Android
droidcon Dubai
 
Typography and User Experience - WCSF
Typography and User Experience -  WCSFTypography and User Experience -  WCSF
Typography and User Experience - WCSF
Sara Cannon
 
Designing for Mobile
Designing for MobileDesigning for Mobile
Designing for Mobile
paultrani
 
Carolyn Jao UX Design Portfolio
Carolyn Jao UX Design Portfolio Carolyn Jao UX Design Portfolio
Carolyn Jao UX Design Portfolio
Carolyn Jao
 
UX: Now & Next
UX: Now & NextUX: Now & Next
UX: Now & Next
Robert Hsu
 
Keynote for Salesforce Users Group
Keynote for Salesforce Users GroupKeynote for Salesforce Users Group
Keynote for Salesforce Users Group
Alex Cowan
 
Kazumi Terada UX Portfolio 2016
Kazumi Terada UX Portfolio 2016Kazumi Terada UX Portfolio 2016
Kazumi Terada UX Portfolio 2016
Kazumi Terada
 
The Wicked Craft of Enterprise UX
The Wicked Craft of Enterprise UXThe Wicked Craft of Enterprise UX
The Wicked Craft of Enterprise UX
InVision App
 
User Experience & RIA’s: How does it all come together?
User Experience & RIA’s:  How does it all come together?User Experience & RIA’s:  How does it all come together?
User Experience & RIA’s: How does it all come together?
OneSpring LLC
 
Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014
Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014
Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014
Anna Dahlström
 
UI Design, Trends, Patterns and User Experience - Academy of Design
UI Design, Trends, Patterns and User Experience - Academy of DesignUI Design, Trends, Patterns and User Experience - Academy of Design
UI Design, Trends, Patterns and User Experience - Academy of Design
Shiran Sanjeewa
 
What are the web design trends for 2022
What are the web design trends for 2022What are the web design trends for 2022
What are the web design trends for 2022
Jane Brewer
 
Interaction Design & Rapid Prototyping
Interaction Design & Rapid PrototypingInteraction Design & Rapid Prototyping
Interaction Design & Rapid Prototyping
Carolyn Jao
 
Web Design Trends e-Book
 Web Design Trends e-Book Web Design Trends e-Book
Web Design Trends e-Book
jesús Santo
 
The 2011 trends in interactive design
The 2011 trends in interactive designThe 2011 trends in interactive design
The 2011 trends in interactive design
Prophets Agency
 
Hunting Unicorns - What makes an effective UX Professional
Hunting Unicorns - What makes an effective UX ProfessionalHunting Unicorns - What makes an effective UX Professional
Hunting Unicorns - What makes an effective UX Professional
Patrick Neeman
 
Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design
Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI DesignGood UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design
Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design
Hafiz Huda
 
ux-trends-by-Andi-Prasetyo
ux-trends-by-Andi-Prasetyoux-trends-by-Andi-Prasetyo
ux-trends-by-Andi-Prasetyo
Andi Prasetyo
 

What's hot (20)

Android Material Design Quick Presentation
Android Material Design Quick PresentationAndroid Material Design Quick Presentation
Android Material Design Quick Presentation
 
flat design and colors
flat design and colorsflat design and colors
flat design and colors
 
Material Design on Android
Material Design on Android Material Design on Android
Material Design on Android
 
Typography and User Experience - WCSF
Typography and User Experience -  WCSFTypography and User Experience -  WCSF
Typography and User Experience - WCSF
 
Designing for Mobile
Designing for MobileDesigning for Mobile
Designing for Mobile
 
Carolyn Jao UX Design Portfolio
Carolyn Jao UX Design Portfolio Carolyn Jao UX Design Portfolio
Carolyn Jao UX Design Portfolio
 
UX: Now & Next
UX: Now & NextUX: Now & Next
UX: Now & Next
 
Keynote for Salesforce Users Group
Keynote for Salesforce Users GroupKeynote for Salesforce Users Group
Keynote for Salesforce Users Group
 
Kazumi Terada UX Portfolio 2016
Kazumi Terada UX Portfolio 2016Kazumi Terada UX Portfolio 2016
Kazumi Terada UX Portfolio 2016
 
The Wicked Craft of Enterprise UX
The Wicked Craft of Enterprise UXThe Wicked Craft of Enterprise UX
The Wicked Craft of Enterprise UX
 
User Experience & RIA’s: How does it all come together?
User Experience & RIA’s:  How does it all come together?User Experience & RIA’s:  How does it all come together?
User Experience & RIA’s: How does it all come together?
 
Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014
Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014
Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014
 
UI Design, Trends, Patterns and User Experience - Academy of Design
UI Design, Trends, Patterns and User Experience - Academy of DesignUI Design, Trends, Patterns and User Experience - Academy of Design
UI Design, Trends, Patterns and User Experience - Academy of Design
 
What are the web design trends for 2022
What are the web design trends for 2022What are the web design trends for 2022
What are the web design trends for 2022
 
Interaction Design & Rapid Prototyping
Interaction Design & Rapid PrototypingInteraction Design & Rapid Prototyping
Interaction Design & Rapid Prototyping
 
Web Design Trends e-Book
 Web Design Trends e-Book Web Design Trends e-Book
Web Design Trends e-Book
 
The 2011 trends in interactive design
The 2011 trends in interactive designThe 2011 trends in interactive design
The 2011 trends in interactive design
 
Hunting Unicorns - What makes an effective UX Professional
Hunting Unicorns - What makes an effective UX ProfessionalHunting Unicorns - What makes an effective UX Professional
Hunting Unicorns - What makes an effective UX Professional
 
Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design
Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI DesignGood UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design
Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design
 
ux-trends-by-Andi-Prasetyo
ux-trends-by-Andi-Prasetyoux-trends-by-Andi-Prasetyo
ux-trends-by-Andi-Prasetyo
 

Viewers also liked

nơi nào dịch vụ giúp việc theo giờ uy tín ở hcm
nơi nào dịch vụ giúp việc theo giờ uy tín ở hcmnơi nào dịch vụ giúp việc theo giờ uy tín ở hcm
nơi nào dịch vụ giúp việc theo giờ uy tín ở hcmlonnie241
 
Hipertensi¢n arterial
Hipertensi¢n arterialHipertensi¢n arterial
Hipertensi¢n arterial
Clariza Manrique
 
Brain-Inspired Robotics and Neural Dynamics: Lecture 01 (2015)
Brain-Inspired Robotics and Neural Dynamics: Lecture 01 (2015)Brain-Inspired Robotics and Neural Dynamics: Lecture 01 (2015)
Brain-Inspired Robotics and Neural Dynamics: Lecture 01 (2015)
Hiroaki Wagatsuma
 
The pitch
The pitchThe pitch
The pitch
Terence Smith
 
Top 8 project consultant resume samples
Top 8 project consultant resume samplesTop 8 project consultant resume samples
Top 8 project consultant resume samples
jombinri
 
手機搶走了孩子多少的愛!
手機搶走了孩子多少的愛!手機搶走了孩子多少的愛!
手機搶走了孩子多少的愛!
TonyC Chen
 
RESUME
RESUMERESUME
V230i-TTO-brochure-web-copy
V230i-TTO-brochure-web-copyV230i-TTO-brochure-web-copy
V230i-TTO-brochure-web-copy
Melanie Buckle
 
Artifact together for the better- v5
Artifact  together for the better- v5Artifact  together for the better- v5
Artifact together for the better- v5
HaririFoundation
 
GlendaSmith2015
GlendaSmith2015GlendaSmith2015
GlendaSmith2015
Glenda Smith
 
nhận làm dịch vụ giúp việc nhà có kinh nghiệm tại sài gòn
nhận làm dịch vụ giúp việc nhà có kinh nghiệm tại sài gònnhận làm dịch vụ giúp việc nhà có kinh nghiệm tại sài gòn
nhận làm dịch vụ giúp việc nhà có kinh nghiệm tại sài gònolen578
 
nhận làm dịch vụ giúp việc quận 6 tại hcm
nhận làm dịch vụ giúp việc quận 6 tại hcmnhận làm dịch vụ giúp việc quận 6 tại hcm
nhận làm dịch vụ giúp việc quận 6 tại hcmkraig109
 
hrm report
hrm reporthrm report
hrm report
Adil Abbas
 

Viewers also liked (13)

nơi nào dịch vụ giúp việc theo giờ uy tín ở hcm
nơi nào dịch vụ giúp việc theo giờ uy tín ở hcmnơi nào dịch vụ giúp việc theo giờ uy tín ở hcm
nơi nào dịch vụ giúp việc theo giờ uy tín ở hcm
 
Hipertensi¢n arterial
Hipertensi¢n arterialHipertensi¢n arterial
Hipertensi¢n arterial
 
Brain-Inspired Robotics and Neural Dynamics: Lecture 01 (2015)
Brain-Inspired Robotics and Neural Dynamics: Lecture 01 (2015)Brain-Inspired Robotics and Neural Dynamics: Lecture 01 (2015)
Brain-Inspired Robotics and Neural Dynamics: Lecture 01 (2015)
 
The pitch
The pitchThe pitch
The pitch
 
Top 8 project consultant resume samples
Top 8 project consultant resume samplesTop 8 project consultant resume samples
Top 8 project consultant resume samples
 
手機搶走了孩子多少的愛!
手機搶走了孩子多少的愛!手機搶走了孩子多少的愛!
手機搶走了孩子多少的愛!
 
RESUME
RESUMERESUME
RESUME
 
V230i-TTO-brochure-web-copy
V230i-TTO-brochure-web-copyV230i-TTO-brochure-web-copy
V230i-TTO-brochure-web-copy
 
Artifact together for the better- v5
Artifact  together for the better- v5Artifact  together for the better- v5
Artifact together for the better- v5
 
GlendaSmith2015
GlendaSmith2015GlendaSmith2015
GlendaSmith2015
 
nhận làm dịch vụ giúp việc nhà có kinh nghiệm tại sài gòn
nhận làm dịch vụ giúp việc nhà có kinh nghiệm tại sài gònnhận làm dịch vụ giúp việc nhà có kinh nghiệm tại sài gòn
nhận làm dịch vụ giúp việc nhà có kinh nghiệm tại sài gòn
 
nhận làm dịch vụ giúp việc quận 6 tại hcm
nhận làm dịch vụ giúp việc quận 6 tại hcmnhận làm dịch vụ giúp việc quận 6 tại hcm
nhận làm dịch vụ giúp việc quận 6 tại hcm
 
hrm report
hrm reporthrm report
hrm report
 

Similar to Human Interaction Keynote Brushfire Interactive July 2015

Top Three Modern Product Trends
Top Three Modern Product TrendsTop Three Modern Product Trends
Top Three Modern Product Trends
Jeremy Johnson
 
24 Hours of UX, 2023: Preventing the Future
24 Hours of UX, 2023: Preventing the Future24 Hours of UX, 2023: Preventing the Future
24 Hours of UX, 2023: Preventing the Future
Joshua Randall
 
UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1
Lewis Lin 🦊
 
MIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design WorkflowMIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design Workflow
easelsolutions
 
Metro design primer
Metro design primerMetro design primer
Metro design primer
Andy Chiang
 
Design Portfolio
Design Portfolio Design Portfolio
Design Portfolio
Amir Khella
 
UX South Africa 2014 - Keynote
UX South Africa 2014 - KeynoteUX South Africa 2014 - Keynote
UX South Africa 2014 - Keynote
Phil Barrett
 
DZ Crew Presentation
DZ Crew PresentationDZ Crew Presentation
DZ Crew Presentation
Denis Zabelin
 
WebVisions - Explore the Future of the Web
WebVisions - Explore the Future of the WebWebVisions - Explore the Future of the Web
WebVisions - Explore the Future of the Web
WebVisions
 
Techstartupday - Digital Product Design
Techstartupday - Digital Product Design Techstartupday - Digital Product Design
Techstartupday - Digital Product Design
Little Miss Robot
 
10 Truths to Great Product Experiences
10 Truths to Great Product Experiences10 Truths to Great Product Experiences
10 Truths to Great Product Experiences
Jeremy Johnson
 
Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013
Michele Ide-Smith
 
Portfolio draft
Portfolio draftPortfolio draft
Portfolio draft
neileverette
 
An introduction to user experience design
An introduction to user experience designAn introduction to user experience design
An introduction to user experience design
Elena Donets
 
Rapid Prototyping 2015: Its a Mad Mad World
Rapid Prototyping 2015: Its a Mad Mad WorldRapid Prototyping 2015: Its a Mad Mad World
Rapid Prototyping 2015: Its a Mad Mad World
Marti Gold
 
Web and-mobile-trends-2013
Web and-mobile-trends-2013Web and-mobile-trends-2013
Web and-mobile-trends-2013
boypotay
 
Web and mobile trends 2013
Web and mobile trends 2013Web and mobile trends 2013
Web and mobile trends 2013
Jessie Doan
 
Responsive Web Design vs Mobile Web App
Responsive Web Design  vs  Mobile Web AppResponsive Web Design  vs  Mobile Web App
Responsive Web Design vs Mobile Web App
Sheeraz Qurban
 
Careers In Web Design
Careers In Web DesignCareers In Web Design
Careers In Web Design
Adrian Mendoza
 
Building real things for real people 2009
Building real things for real people 2009Building real things for real people 2009
Building real things for real people 2009
Justin Ferrell
 

Similar to Human Interaction Keynote Brushfire Interactive July 2015 (20)

Top Three Modern Product Trends
Top Three Modern Product TrendsTop Three Modern Product Trends
Top Three Modern Product Trends
 
24 Hours of UX, 2023: Preventing the Future
24 Hours of UX, 2023: Preventing the Future24 Hours of UX, 2023: Preventing the Future
24 Hours of UX, 2023: Preventing the Future
 
UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1
 
MIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design WorkflowMIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design Workflow
 
Metro design primer
Metro design primerMetro design primer
Metro design primer
 
Design Portfolio
Design Portfolio Design Portfolio
Design Portfolio
 
UX South Africa 2014 - Keynote
UX South Africa 2014 - KeynoteUX South Africa 2014 - Keynote
UX South Africa 2014 - Keynote
 
DZ Crew Presentation
DZ Crew PresentationDZ Crew Presentation
DZ Crew Presentation
 
WebVisions - Explore the Future of the Web
WebVisions - Explore the Future of the WebWebVisions - Explore the Future of the Web
WebVisions - Explore the Future of the Web
 
Techstartupday - Digital Product Design
Techstartupday - Digital Product Design Techstartupday - Digital Product Design
Techstartupday - Digital Product Design
 
10 Truths to Great Product Experiences
10 Truths to Great Product Experiences10 Truths to Great Product Experiences
10 Truths to Great Product Experiences
 
Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013
 
Portfolio draft
Portfolio draftPortfolio draft
Portfolio draft
 
An introduction to user experience design
An introduction to user experience designAn introduction to user experience design
An introduction to user experience design
 
Rapid Prototyping 2015: Its a Mad Mad World
Rapid Prototyping 2015: Its a Mad Mad WorldRapid Prototyping 2015: Its a Mad Mad World
Rapid Prototyping 2015: Its a Mad Mad World
 
Web and-mobile-trends-2013
Web and-mobile-trends-2013Web and-mobile-trends-2013
Web and-mobile-trends-2013
 
Web and mobile trends 2013
Web and mobile trends 2013Web and mobile trends 2013
Web and mobile trends 2013
 
Responsive Web Design vs Mobile Web App
Responsive Web Design  vs  Mobile Web AppResponsive Web Design  vs  Mobile Web App
Responsive Web Design vs Mobile Web App
 
Careers In Web Design
Careers In Web DesignCareers In Web Design
Careers In Web Design
 
Building real things for real people 2009
Building real things for real people 2009Building real things for real people 2009
Building real things for real people 2009
 

Recently uploaded

一比一原版不列颠哥伦比亚大学毕业证(UBC毕业证书)学历如何办理
一比一原版不列颠哥伦比亚大学毕业证(UBC毕业证书)学历如何办理一比一原版不列颠哥伦比亚大学毕业证(UBC毕业证书)学历如何办理
一比一原版不列颠哥伦比亚大学毕业证(UBC毕业证书)学历如何办理
bttak
 
一比一原版(Adelaide文凭证书)阿德莱德大学毕业证如何办理
一比一原版(Adelaide文凭证书)阿德莱德大学毕业证如何办理一比一原版(Adelaide文凭证书)阿德莱德大学毕业证如何办理
一比一原版(Adelaide文凭证书)阿德莱德大学毕业证如何办理
xuqdabu
 
按照学校原版(UPenn文凭证书)宾夕法尼亚大学毕业证快速办理
按照学校原版(UPenn文凭证书)宾夕法尼亚大学毕业证快速办理按照学校原版(UPenn文凭证书)宾夕法尼亚大学毕业证快速办理
按照学校原版(UPenn文凭证书)宾夕法尼亚大学毕业证快速办理
uwoso
 
一比一原版(Greenwich文凭证书)格林威治大学毕业证如何办理
一比一原版(Greenwich文凭证书)格林威治大学毕业证如何办理一比一原版(Greenwich文凭证书)格林威治大学毕业证如何办理
一比一原版(Greenwich文凭证书)格林威治大学毕业证如何办理
byfazef
 
一比一原版(ANU文凭证书)澳大利亚国立大学毕业证如何办理
一比一原版(ANU文凭证书)澳大利亚国立大学毕业证如何办理一比一原版(ANU文凭证书)澳大利亚国立大学毕业证如何办理
一比一原版(ANU文凭证书)澳大利亚国立大学毕业证如何办理
nudduv
 
按照学校原版(Greenwich文凭证书)格林威治大学毕业证快速办理
按照学校原版(Greenwich文凭证书)格林威治大学毕业证快速办理按照学校原版(Greenwich文凭证书)格林威治大学毕业证快速办理
按照学校原版(Greenwich文凭证书)格林威治大学毕业证快速办理
yizxn4sx
 
按照学校原版(Westminster文凭证书)威斯敏斯特大学毕业证快速办理
按照学校原版(Westminster文凭证书)威斯敏斯特大学毕业证快速办理按照学校原版(Westminster文凭证书)威斯敏斯特大学毕业证快速办理
按照学校原版(Westminster文凭证书)威斯敏斯特大学毕业证快速办理
yizxn4sx
 
买(usyd毕业证书)澳洲悉尼大学毕业证研究生文凭证书原版一模一样
买(usyd毕业证书)澳洲悉尼大学毕业证研究生文凭证书原版一模一样买(usyd毕业证书)澳洲悉尼大学毕业证研究生文凭证书原版一模一样
买(usyd毕业证书)澳洲悉尼大学毕业证研究生文凭证书原版一模一样
nvoyobt
 
按照学校原版(AU文凭证书)英国阿伯丁大学毕业证快速办理
按照学校原版(AU文凭证书)英国阿伯丁大学毕业证快速办理按照学校原版(AU文凭证书)英国阿伯丁大学毕业证快速办理
按照学校原版(AU文凭证书)英国阿伯丁大学毕业证快速办理
ei8c4cba
 
按照学校原版(UVic文凭证书)维多利亚大学毕业证快速办理
按照学校原版(UVic文凭证书)维多利亚大学毕业证快速办理按照学校原版(UVic文凭证书)维多利亚大学毕业证快速办理
按照学校原版(UVic文凭证书)维多利亚大学毕业证快速办理
1jtj7yul
 
一比一原版(Monash文凭证书)莫纳什大学毕业证如何办理
一比一原版(Monash文凭证书)莫纳什大学毕业证如何办理一比一原版(Monash文凭证书)莫纳什大学毕业证如何办理
一比一原版(Monash文凭证书)莫纳什大学毕业证如何办理
xuqdabu
 
按照学校原版(SUT文凭证书)斯威本科技大学毕业证快速办理
按照学校原版(SUT文凭证书)斯威本科技大学毕业证快速办理按照学校原版(SUT文凭证书)斯威本科技大学毕业证快速办理
按照学校原版(SUT文凭证书)斯威本科技大学毕业证快速办理
1jtj7yul
 
按照学校原版(Columbia文凭证书)哥伦比亚大学毕业证快速办理
按照学校原版(Columbia文凭证书)哥伦比亚大学毕业证快速办理按照学校原版(Columbia文凭证书)哥伦比亚大学毕业证快速办理
按照学校原版(Columbia文凭证书)哥伦比亚大学毕业证快速办理
uyesp1a
 
按照学校原版(Adelaide文凭证书)阿德莱德大学毕业证快速办理
按照学校原版(Adelaide文凭证书)阿德莱德大学毕业证快速办理按照学校原版(Adelaide文凭证书)阿德莱德大学毕业证快速办理
按照学校原版(Adelaide文凭证书)阿德莱德大学毕业证快速办理
terpt4iu
 
一比一原版西三一大学毕业证(TWU毕业证书)学历如何办理
一比一原版西三一大学毕业证(TWU毕业证书)学历如何办理一比一原版西三一大学毕业证(TWU毕业证书)学历如何办理
一比一原版西三一大学毕业证(TWU毕业证书)学历如何办理
bttak
 
一比一原版圣托马斯大学毕业证(UST毕业证书)学历如何办理
一比一原版圣托马斯大学毕业证(UST毕业证书)学历如何办理一比一原版圣托马斯大学毕业证(UST毕业证书)学历如何办理
一比一原版圣托马斯大学毕业证(UST毕业证书)学历如何办理
bttak
 
欧洲杯赌钱-欧洲杯赌钱冠军-欧洲杯赌钱冠军赔率|【​网址​🎉ac10.net🎉​】
欧洲杯赌钱-欧洲杯赌钱冠军-欧洲杯赌钱冠军赔率|【​网址​🎉ac10.net🎉​】欧洲杯赌钱-欧洲杯赌钱冠军-欧洲杯赌钱冠军赔率|【​网址​🎉ac10.net🎉​】
欧洲杯赌钱-欧洲杯赌钱冠军-欧洲杯赌钱冠军赔率|【​网址​🎉ac10.net🎉​】
hanniaarias53
 
一比一原版(Adelaide文凭证书)阿德莱德大学毕业证如何办理
一比一原版(Adelaide文凭证书)阿德莱德大学毕业证如何办理一比一原版(Adelaide文凭证书)阿德莱德大学毕业证如何办理
一比一原版(Adelaide文凭证书)阿德莱德大学毕业证如何办理
nudduv
 
一比一原版(KCL文凭证书)伦敦国王学院毕业证如何办理
一比一原版(KCL文凭证书)伦敦国王学院毕业证如何办理一比一原版(KCL文凭证书)伦敦国王学院毕业证如何办理
一比一原版(KCL文凭证书)伦敦国王学院毕业证如何办理
kuehcub
 
按照学校原版(UAL文凭证书)伦敦艺术大学毕业证快速办理
按照学校原版(UAL文凭证书)伦敦艺术大学毕业证快速办理按照学校原版(UAL文凭证书)伦敦艺术大学毕业证快速办理
按照学校原版(UAL文凭证书)伦敦艺术大学毕业证快速办理
yizxn4sx
 

Recently uploaded (20)

一比一原版不列颠哥伦比亚大学毕业证(UBC毕业证书)学历如何办理
一比一原版不列颠哥伦比亚大学毕业证(UBC毕业证书)学历如何办理一比一原版不列颠哥伦比亚大学毕业证(UBC毕业证书)学历如何办理
一比一原版不列颠哥伦比亚大学毕业证(UBC毕业证书)学历如何办理
 
一比一原版(Adelaide文凭证书)阿德莱德大学毕业证如何办理
一比一原版(Adelaide文凭证书)阿德莱德大学毕业证如何办理一比一原版(Adelaide文凭证书)阿德莱德大学毕业证如何办理
一比一原版(Adelaide文凭证书)阿德莱德大学毕业证如何办理
 
按照学校原版(UPenn文凭证书)宾夕法尼亚大学毕业证快速办理
按照学校原版(UPenn文凭证书)宾夕法尼亚大学毕业证快速办理按照学校原版(UPenn文凭证书)宾夕法尼亚大学毕业证快速办理
按照学校原版(UPenn文凭证书)宾夕法尼亚大学毕业证快速办理
 
一比一原版(Greenwich文凭证书)格林威治大学毕业证如何办理
一比一原版(Greenwich文凭证书)格林威治大学毕业证如何办理一比一原版(Greenwich文凭证书)格林威治大学毕业证如何办理
一比一原版(Greenwich文凭证书)格林威治大学毕业证如何办理
 
一比一原版(ANU文凭证书)澳大利亚国立大学毕业证如何办理
一比一原版(ANU文凭证书)澳大利亚国立大学毕业证如何办理一比一原版(ANU文凭证书)澳大利亚国立大学毕业证如何办理
一比一原版(ANU文凭证书)澳大利亚国立大学毕业证如何办理
 
按照学校原版(Greenwich文凭证书)格林威治大学毕业证快速办理
按照学校原版(Greenwich文凭证书)格林威治大学毕业证快速办理按照学校原版(Greenwich文凭证书)格林威治大学毕业证快速办理
按照学校原版(Greenwich文凭证书)格林威治大学毕业证快速办理
 
按照学校原版(Westminster文凭证书)威斯敏斯特大学毕业证快速办理
按照学校原版(Westminster文凭证书)威斯敏斯特大学毕业证快速办理按照学校原版(Westminster文凭证书)威斯敏斯特大学毕业证快速办理
按照学校原版(Westminster文凭证书)威斯敏斯特大学毕业证快速办理
 
买(usyd毕业证书)澳洲悉尼大学毕业证研究生文凭证书原版一模一样
买(usyd毕业证书)澳洲悉尼大学毕业证研究生文凭证书原版一模一样买(usyd毕业证书)澳洲悉尼大学毕业证研究生文凭证书原版一模一样
买(usyd毕业证书)澳洲悉尼大学毕业证研究生文凭证书原版一模一样
 
按照学校原版(AU文凭证书)英国阿伯丁大学毕业证快速办理
按照学校原版(AU文凭证书)英国阿伯丁大学毕业证快速办理按照学校原版(AU文凭证书)英国阿伯丁大学毕业证快速办理
按照学校原版(AU文凭证书)英国阿伯丁大学毕业证快速办理
 
按照学校原版(UVic文凭证书)维多利亚大学毕业证快速办理
按照学校原版(UVic文凭证书)维多利亚大学毕业证快速办理按照学校原版(UVic文凭证书)维多利亚大学毕业证快速办理
按照学校原版(UVic文凭证书)维多利亚大学毕业证快速办理
 
一比一原版(Monash文凭证书)莫纳什大学毕业证如何办理
一比一原版(Monash文凭证书)莫纳什大学毕业证如何办理一比一原版(Monash文凭证书)莫纳什大学毕业证如何办理
一比一原版(Monash文凭证书)莫纳什大学毕业证如何办理
 
按照学校原版(SUT文凭证书)斯威本科技大学毕业证快速办理
按照学校原版(SUT文凭证书)斯威本科技大学毕业证快速办理按照学校原版(SUT文凭证书)斯威本科技大学毕业证快速办理
按照学校原版(SUT文凭证书)斯威本科技大学毕业证快速办理
 
按照学校原版(Columbia文凭证书)哥伦比亚大学毕业证快速办理
按照学校原版(Columbia文凭证书)哥伦比亚大学毕业证快速办理按照学校原版(Columbia文凭证书)哥伦比亚大学毕业证快速办理
按照学校原版(Columbia文凭证书)哥伦比亚大学毕业证快速办理
 
按照学校原版(Adelaide文凭证书)阿德莱德大学毕业证快速办理
按照学校原版(Adelaide文凭证书)阿德莱德大学毕业证快速办理按照学校原版(Adelaide文凭证书)阿德莱德大学毕业证快速办理
按照学校原版(Adelaide文凭证书)阿德莱德大学毕业证快速办理
 
一比一原版西三一大学毕业证(TWU毕业证书)学历如何办理
一比一原版西三一大学毕业证(TWU毕业证书)学历如何办理一比一原版西三一大学毕业证(TWU毕业证书)学历如何办理
一比一原版西三一大学毕业证(TWU毕业证书)学历如何办理
 
一比一原版圣托马斯大学毕业证(UST毕业证书)学历如何办理
一比一原版圣托马斯大学毕业证(UST毕业证书)学历如何办理一比一原版圣托马斯大学毕业证(UST毕业证书)学历如何办理
一比一原版圣托马斯大学毕业证(UST毕业证书)学历如何办理
 
欧洲杯赌钱-欧洲杯赌钱冠军-欧洲杯赌钱冠军赔率|【​网址​🎉ac10.net🎉​】
欧洲杯赌钱-欧洲杯赌钱冠军-欧洲杯赌钱冠军赔率|【​网址​🎉ac10.net🎉​】欧洲杯赌钱-欧洲杯赌钱冠军-欧洲杯赌钱冠军赔率|【​网址​🎉ac10.net🎉​】
欧洲杯赌钱-欧洲杯赌钱冠军-欧洲杯赌钱冠军赔率|【​网址​🎉ac10.net🎉​】
 
一比一原版(Adelaide文凭证书)阿德莱德大学毕业证如何办理
一比一原版(Adelaide文凭证书)阿德莱德大学毕业证如何办理一比一原版(Adelaide文凭证书)阿德莱德大学毕业证如何办理
一比一原版(Adelaide文凭证书)阿德莱德大学毕业证如何办理
 
一比一原版(KCL文凭证书)伦敦国王学院毕业证如何办理
一比一原版(KCL文凭证书)伦敦国王学院毕业证如何办理一比一原版(KCL文凭证书)伦敦国王学院毕业证如何办理
一比一原版(KCL文凭证书)伦敦国王学院毕业证如何办理
 
按照学校原版(UAL文凭证书)伦敦艺术大学毕业证快速办理
按照学校原版(UAL文凭证书)伦敦艺术大学毕业证快速办理按照学校原版(UAL文凭证书)伦敦艺术大学毕业证快速办理
按照学校原版(UAL文凭证书)伦敦艺术大学毕业证快速办理
 

Human Interaction Keynote Brushfire Interactive July 2015

  • 1. UX/UI: Design for Human Interaction Ryan Smeets, Director of Client Strategy- Brushfire Interactive @ryansmeets & @startabrushfire TWEET:
 @JOINAZIMA
  • 2. KEYNOTE AGENDA • Introduction • A framework for “design” • Define (un)necessary buzzwords • Case Studies • Practical Application 2 Ryan Smeets, Brushfire Interactive @ryansmeets & @startabrushfire
  • 3. A MORE REALISTIC AGENDA • I will present information • You [may] react or ask questions • We [should] all meet new people 3 Ryan Smeets, Brushfire Interactive @ryansmeets & @startabrushfire
  • 4. RYAN
 SMEETS [lucky guy] 4 TWEET TO:
 @ryansmeets @startabrushfire
  • 5. • FEATURED IN MASHABLE, WIRED, USA TODAY
 & NY TIMES • APPLE DESIGN OF THE YEAR • 3 APPS IN APPLE HALL OF FAME • 2 STARBUCKS APPS OF THE WEEK • MICROSOFT CASE STUDY 5
  • 6. Why define the term as 
 “Human Interaction?” 6 • The culmination of previously used buzzwords. • Not limited to just technology. • Best explains the end goal of design. Ryan Smeets, Brushfire Interactive @ryansmeets & @startabrushfire
  • 7. Human Interaction [a brief evolution] 1960’s Desktop Calculators
 (e.g, 9100A) Engelbart’s first computer mouse ‘64 1970’s Actual “Computers”
 (e.g, HP3000) Xerox Alto PC & Simonyi’s WYSIWYG ‘74 Decade | Product Era Resulting Innovation 7 Ryan Smeets, Brushfire Interactive @ryansmeets & @startabrushfire
  • 8. Human Interaction [a brief evolution] Decade | Product Era Resulting Innovation 8 1980’s Personal Computing
 (e.g, Commodore 64 OS ROM BASIC) Intel microprocessor ’85 Recordable CD’s ‘88 1990’s Web 1.0
 (e.g, Netscape, Yahoo, Ebay, Paypal & Google ) World Wide Web ’91 Google founded ‘98 Ryan Smeets, Brushfire Interactive @ryansmeets & @startabrushfire
  • 9. Human Interaction [a brief evolution] Decade | Product Era Resulting Innovation 9 2000’s Web 2.0 + Dawn of mobile
 (e.g, personalized products & social networks) Itunes ’03, YouTube ’05, Iphones ’06 + Android phones ‘08 2010’s Proliferation of Mobile + IOTs
 (e.g, Tablets, Wearables and smart devices) FitBit ’11, Google Cardboard VR ‘15 Ryan Smeets, Brushfire Interactive @ryansmeets & @startabrushfire
  • 10. – Matías Duarte, Google VP of Design “Everything is going to have power, everything is going to have a screen, everything is going to have wifi, everything is going to have computer chips. Your personal computer will actually be a series of devices that surrounds you and that you move through- that’s what the future is going to be like. It’s not about any one device having to have some killer feature that makes everyone want to have it. 
 
 In the future, we’re going to treat smart devices like we do apps today.” 10
  • 11. Human Interaction Trifecta [design] • A New Reality for 
 Consumer’s Demands + Expectations DOES IT SOLVE AN IMMEDIATE NEED? USEFUL CONTENT HONORS THE FEATURES OF THE DEVICE(S) 11 Ryan Smeets, Brushfire Interactive @ryansmeets & @startabrushfire
  • 12. Human Interaction [design] • Proof = Rise of “Chief Design Officers” • Positioned alongside CFOs + CEOs • Autonomous of Marketing or Product Teams 12
  • 13. Human Interaction [content] • A New Reality for a Company’s Demands + Expectations • Text is powerful, influential and accessible • Video is powerful, influential and accessible • Everything comes back to storytelling! 13
  • 14. Human Interaction [content] source: bradfrost.com 14 SNAP A PHOTO!
  • 15. Human Interaction [design + content] THE WEDGE: IMPORTANCE OF A SINGLE PURPOSE
 [THE 15 SECOND RULE] 15 SNAP A PHOTO OF THIS SLIDE! Ryan Smeets, Brushfire Interactive @ryansmeets & @startabrushfire
  • 16. We are collaborating with Trimble Navigation to revolutionize construction automation. Trimble's Android products are leap frogging the competition by automating processes for drivers of heavy machinery. With the help of Brushfire, Trimble’s simple, elegant user experience has created waves in the construction industry Android (OEM and OTS) 16
  • 17. Brushfire worked closely with the Crossway team to redesign and expand their iOS and Android apps for both the ESV and ESV Study Bible (originally launched by our friends at Subsplash). The software teams from both organizations worked side-by- side to create one of the most elegant and fastest performing Bible apps available. iPhone, Android 17
  • 18. Brushfire designed and developed the Child Sponsorship App on behalf of Compassion International. Child Sponsors can now see biographical info and photos of their children, write or send a photo from their device or learn about the child’s country and their favorite activities. Universal iOS and Android 18
  • 19. No cash on hand? Bravo is the revolutionary new tipping app designed to transfer tips quickly and easily to service professionals. Brushfire collaborated with Bravo to create a product roadmap, name/brand/logo, UX design, marketing strategy, and web/ mobile tipping platform Android, iPhone, Web 19
  • 20. A Brief Discussion: Poor vs Good Design 20 Poor = Difficulty navigating + visually uninviting Good = Frictionless + inviting + familiar Ryan Smeets, Brushfire Interactive @ryansmeets & @startabrushfire
  • 21. 21 Human Interaction [entry-level choices] Web: Cookie Cutter vs Professional Design • WordPress, SquareSpace & Twitter Bootstrap Themes are the new normal • Cheap & Easy = bootswatch.com, rockettheme.com, startbootstrap.com bootbundle.com or search via any respective theme shops Ryan Smeets, Brushfire Interactive @ryansmeets & @startabrushfire
  • 22. Human Interaction [professional process] Minimum Viable Product (MVP) Approach • Brainstorming + Whiteboard Workshop • Wireframes • Design Exploration • Present Early Concepts • Refine • Prototype 22
  • 23. Human Interaction [tools] • Wireframes = Balsamiq or OmniGraffle 
 TIP:
 Tools like these should look like sketches. 
 They facilitate conversation around features and functions 23
  • 24. Human Interaction [tools] • Actual Design = Adobe Photoshop or Sketch TIP:
 Familiar tools are good to use however the aim with clients at this phase should be to hone the overall look and feel. 24
  • 25. Human Interaction [tools] • Rapid Prototyping = Invision, sketch or proto.io TIP:
 Prototyping fosters immediate user feedback and allows developers to better estimate in an MVP framework. 25
  • 26. HUMAN INTERACTION APPLIED email | Google Inbox 26
  • 27. HUMAN INTERACTION APPLIED email | Google Inbox Previous Email Problems Alleviated Through New Design: • Clutter • Desire/Ability to Respond Appropriately • Lack of Personalization
 27
  • 28. CLOSING THOUGHTS – Robert Brunner, Ammunition (Design Studio) “Technology enables; it’s design that puts it in people’s lives, makes it accessible and makes it interesting and desirable. Most savvy companies will have to invest in design as much as they do in their technology program.” 28 TWEET:
 @JOINAZIMA