AZIMA Keynote from July 23, 2015. Ryan Smeets, Director of Client Strategy at Brushfire Interactive lead a discussion on the topic of UX/UI: Design for Human Interaction

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