Erik Loehfelm of Universal Mind discusses designing elegant user experiences across devices and platforms. He emphasizes focusing on understanding people and contexts, documenting user journeys, exploring options in wireframes, and testing iteratively. Loehfelm advocates a mobile-first approach using responsive design and progressive enhancement to build experiences from a baseline up. Technologies mentioned include HTML5, LESS, Backbone, Bootstrap, and jQuery. Fluid UI is recommended for on-device wireframing and prototyping.

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