Presentation from the Future of Web Apps / Future of Mobile 2012 in London http://future-of-mobile.com/london-2012/

1. Universal Mind™
Future of Mobile London
Designing Elegant UX Across Devices and Platforms

2. Universal Mind™
:)-
Erik Loehfelm
EVP of User Experience, Universal Mind

3. Universal Mind™
what is our challenge?

4. Universal Mind™

5. Universal Mind™
Your
Content

6. Universal Mind™
Your
Content

7. Universal Mind™

8. Universal Mind™
why?
Consumers expect content on their terms.
In their ‘contexts’!

9. Universal Mind™
the not-so-obvious issue...
This is an EXPERIENCE DESIGN problem,
more than a technology challenge.

10. Universal Mind™
how do we solve this?
For elegant experience across devices,
focus on 2 critical points...

11. Universal Mind™
focus on people.

12. Universal Mind™
focus on context.

13. Universal Mind™
how?
web techniques to consider:
1. Graceful Degredation...
2. Progressive Enhancement...
1. Adaptive Design
2. Responsive Design
3. ???

14. Universal Mind™
1. graceful degredation
• been around for awhile
• could work for some instances
• many sacrifices (from a CX perspective)
• ‘backward’ approach (?)

15. Universal Mind™
2. progressive enhancement
• build up an experience from the baseline
• work in an adaptive / responsive manner
• target sizes not devices*

16. Universal Mind™
http://www.teehanlax.com/blog/

17. Universal Mind™
“Honestly, our team is kind of
bored of talking about responsive
design. It should no longer be
considered a special feature, it’s
how any self-respecting website
should behave in 2012.”
- Bobby Solomon,
TheFoxIsBlack.com and Disney

18. Universal Mind™

19. Universal Mind™
Aaron Gustafson:
http://www.alistapart.com/articles/understandingprogressiveenhancement/

20. Universal Mind™
content is KEY!
contextually relevant content is KEY-ER!!

21. Universal Mind™
...which points
back to people.
Understand user’s needs and you’ll understand
what they need in their physical context

22. Universal Mind™
sidebar... SoLoMo!
The integration of social networks with
inherent mobile location features

23. Universal Mind™
Lo
So
Mo

24. Universal Mind™
3. (Mystery Approach)
drumroll please...

25. Universal Mind™
as firs
t desc
from b ribed
by Lu
ack in ke W
200
9!
3. Mobile First... v.2012
• Understand your user +
• Content focus +
• Contextual relevancy +
• Progressive enhancement +
• Responsive design

26. Universal Mind™
things to consider with a
Mobile First strategy:
• research is your friend
• analytics are your friend
• hardware specific features, might not be your friend
• many delivery options

27. Universal Mind™
considerations:
• Mobile Web vs. Desktop Web
• Responsive Web vs. Mobile Web
• Web App vs. Native App
• Wrapped Web vs. Native App

28. rich functionality
Universal Mind™
Native App
Wrapped Web
Web App
expensive
Desktop Web
cheap
Responsive Web
Mobile Web
basic functionality
inflexible flexible

29. Universal Mind™
a true story.
A global, Mobile First approach in action!

30. Universal Mind™

31. Universal Mind™
technologies...
• HTML 5
• LESS (css)
• Backbone (MVC framework)
• Twitter Bootstrap
• JQuery
• iOS Native - Custom UIWebView

32. Universal Mind™
where do I start?

33. Universal Mind™
1. understand people and context

34. Universal Mind™
2. document their journey

35. Universal Mind™
bullshit... kinda’!
• Agile UX could / should be the goal but...
• ‘Don’t fly a plane without wings.’
• Opportunity for ‘cornering’ and ‘redo’ is great at this stage
• “Any fidelity wireframe is the right fidelity wireframe.”

36. Universal Mind™
3. wireframes

37. Universal Mind™
wireframe techniques

38. Universal Mind™

39. Universal Mind™

40. Universal Mind™
Doug Chiang
marker techniques

41. Universal Mind™

42. Universal Mind™

43. Universal Mind™

44. Universal Mind™

45. Universal Mind™

46. Universal Mind™

47. Universal Mind™

48. Universal Mind™

49. Universal Mind™

50. Universal Mind™

51. Universal Mind™

52. Universal Mind™

53. Universal Mind™

54. Universal Mind™

55. Universal Mind™
4. graphic and interaction design

56. Universal Mind™
5. prototypes

57. Universal Mind™
fluidui.com
EXCELLENT on-device wireframe and prototyping tool!

58. Universal Mind™

59. Universal Mind™
screen shots of fluid

60. Universal Mind™

61. Universal Mind™
6. test and iterate!

62. Universal Mind™
take aways:
• Design challenge big... tech challenge not as big
• Focus on users
• Focus on context
• Mobile First
• Explore many options in wireframes
• Test, test, test!
• Consider native, wrapper, or HTML (or combo)

63. Universal Mind™
workshop!
• Designing Elegant UX Across Devices and Platforms
• 9-5 Wednesday

64. Universal Mind™
:)-
Erik Loehfelm
EVP of User Experience, Universal Mind
@eloehfelm
erik.loehfelm@universalmind.com