3. Client Education & Acceptance (is Key)
Speed of Industry
Emphasis on User
Internet of Things
Brand Context
Unlimited Options
Time
Apocalypse
Ongoing Work /
Maintenance
5. Participatory Sketching
Opportunity to collaborate with
key project stakeholders
Explore, Create & Invent
Identify, create and prove key use
cases
Identify Pain Points
Help Build the Brief
Research & Analysis
6. Rapid Prototyping
Create Rapid Interactive
Wireframe Prototypes
Iterate and develop in Lean Agile
Mode
Receive and monitor real time
feedback from key user
demographics
7. Identifying Contextual Differentiators
Smartphone
Tablet
Desktop
Action / Task
Oriented
Agnostic Paradigms
Context of Content
Simplified
Navigation
What the user
wants.
Key User Tasks
Agnostic Paradigms
Context of Content
Tablet = Browsing /
Couch Commerce
Site speed, CSS, Retina
Images and Resolutions
Key User Tasks
Context of Content
Calls to Action
Content Scale and Stack
8. Kill Documentation (time waste)
Time wasting on documentation creation
Prototype instead – More Beneficial
Learn More by Prototyping the User Experience
9. Test & Iterate Quickly
“You can Achieve a big vision – but in small increments.
It requires a commitment to iteration”
Eric Ries
11. What is (UX) User Experience?
“User experience design as a discipline is concerned with all
the elements that together make up that interface, including
layout, visual design, text, brand, sound and interaction. It
works to coordinate these elements to allow for the best
possible interaction by users”.
Don Norman
12. (UX) Key Questions
Why is the product being made?
Who is it being made for?
What are the stakeholders goals for the
project?
How do the requirements fit within the
wider business objectives of the
organization?
Who are the competitors?
How is success going to be measured?
13. Know Thy User
Users can be, ‘Experienced’, ‘Expert’, ‘Novice’
or ‘Power Users’
The more fluid and responsive the experience is
the more emotionally, invested users will become
Ask only for limited input from users
Users are not stupid
Create emotional connections
Users want novelty
14. Know Thy User
Build healthy long-term relationships with users
User’s will ask why doesn't my brand / site / app
know me?
Build users trust incrementally and look for soft
commitments along the way
Reduce input forms, user fatigue
Hide technology from the user
15. Simplicity
Make it feel snappier – always go back to engineering
Reduce chances for users to make mistakes
Stop making people passengers and more partners of the user experience.
Stop commanding users what to do
Reduce everything thoughtfully
16. Tell a Story - User Research
Contextual research
Competitor Analysis
In-depth interviews
Visual Style
Social analytics
Focus Groups
Online interviews
Existing Users
Analytics / tracking
On Location
Street interviews
Third Party Studies
Usability Review
Card Sorting
17. Create Personas
User Background:
Age range, native language, physical and or
cognitive limitations
Experience:
How familiar are your users with similar
systems? Will they need to learn?
Behavior:
What motivates users. Do they share any
behavioral traits?
Desires and Concerns:
What do they want to achieve, what
concerns do they have?
18. Focus on Outcomes Not Deliverables
Real people use your products and services, real people with different
wants, needs, abilities, environments and a million other possible variables
that need to be factored in…
“Businesses cannot treat their customers as passive consumers any
longer, every company is in the user experience business”
“If you take the time to understand how people think, then design solutions
around their true needs and behavior – your design will be far more likely to
perform better with them.”
http://alistapart.com/column/explaining-water-to-fish
21. Responsive Design
Still in it’s infancy
Content Dictates
It is ‘Future Friendly’
More Time = More Cost
Content Managed Across All Devices / Screens
Use of Best Practice in HTML5 & CSS3 Media Queries
Many frameworks, templates and solutions
28. Design Trends – Flat UI Design
No drop shadows, bevels, gradients and no depth
Every element is clean, crisp including buttons
and navigation menus
Color of the Year in Web
Flat interfaces are easy for users to understand
and interact with
Use simple interface elements such as icons
Simple, easy to click and tap
Pantone Emerald 17-5641
Simple shapes – rectangle and circles
Use of bold simple Colors
29. Design Trends – Flat Design – Color Palette
flatuicolors.com
30. Typography Considerations
Look and Feel of type used should suit the overall tone and message
Use simple font pairings
Flat design uses no more than two font pairings (novelty font for headings)
Use sharp, crisp, bold clear typefaces
San Serif Typefaces are typically used in flat design
Flat design focuses on simplicity – so should your text (content)
Reduce use of drop shadows, gradients – strong color contrast, (black & white)
Give type / paragraphs plenty of room to breathe – lots of white space
Good starting place – Google Fonts: http://www.google.com/fonts
37. Mobile First (Project Depending)
No longer an afterthought
Prepares brand thinking for the explosive growth
in mobile apocalypse
Forces brand focus and prioritization – under
mobile constraints
Allows for new and innovative brand experiences
built on capabilities and paradigms of devices
Start with presumptions of connectivity, context
interaction, and location
38. Mobile First (Project Depending)
“The simple guideline is whatever you are doing – do Mobile First”
Eric Schmidt, http://bkaprt.com/mf/1
“We’re just now starting to get into Mobile first. What we are finding is that the
designers on mobile are really embracing the constraints and that it is actually
teaching us a lot about how to design back to the desktop”
Kate Aronowitz, Facebook Director of Design, http://bkaprt.com/mf/2
40. Social Media
All Companies are social media companies now.
Key Platforms:
Pinterest, Instagram, Facebook and Twitter.
41. Social Media - Pinterest
Pinterest:
Female oriented mainly, aspirational – intent to buy (insights), pins drive
traffic to websites – big referrals, more physiological, infographics – shared
and repined and enormous virality and video.
42. Social Media - Instagram
Instagram:
Take print campaigns online creatively, youth marketing and strong
visuals, storytell visually, promoted grams, more advertising to come, #
tactics / be creative, animated gifs and video.
43. Social Media - Facebook
Facebook:
Virality, figure out how to storytell, scale in demographics, biggest
opportunities, images matter – it’s a picture platform, infographics, storytell
through photos, quality, calls to action, think mobile, less text, right times to
post, video and animation…
44. Social Media - Twitter
Twitter:
Jump in on any conversation, you need to listen on Twitter – and jump in
where you can on conversations to add value, a brand can show it
cares, brands gain credit, create enormous context, bring value, build most
equity, huge opportunities in storytelling, listen and engage, bring value –
answer questions, share and re-tweets, need to be witty, smart and
engaging.
45. Glossary
User Experience Design (UXd)
How the user thinks and feels
Information Architecture (IA)
How the system is organized
User Interface Design (UI)
How the content is organized
Interaction Design (IX)
How the user and device act and react
Responsive Website Design (RWD)
Optimal fluid grid based website
design that will flow and stack on any
screen size / resolution / device.
Adaptive Website Design (AWD)
Web design to scale to predetermined
set of screens and devices.
