This document summarizes an event where participants will use sketchboarding techniques to design the user experience for a mobile app in a fast, fun, and collaborative way. The agenda includes introductions, defining user stories and app structure, individual and team sketchboarding, and presenting solutions. The goal is to use sketchboarding to quickly explore multiple design solutions before refining one. Sources provided offer more information on sketchboarding templates, designing for different mobile platforms, and responsive web design.

1. ux design for mobile
appsterdam guru session • BNO • march 14th 2012
mangrove.com • @mangrove

2. ruben bos
mangrove
@rubenbos

3. online
ecosystem
we develop (responsive) websites,
iphone apps, android apps, webapps,
social tv, facebook apps, online
marketing, campaigns... a lot!

6. today.
12:00 • Lunch
13:00 • Introductions
13:30 • Never-ending-story by me!
14:30 • Sketch awesome stuff
16:30 • Round-up
17:00 • PIZZAAAA

7. introduce yourself
in 140 characters
(I’ll do the counting)

8. guru session?

9. what not
• go deep into stuff already covered in previous 2
sessions:
• the anatomy of apps
• platform choices, numbers & wars
• how to make clickable prototypes

10. what we’re gonna cover
• structuring and defining your app
• handling technical possibilities & impossibilities
• a fast & effective UX (sketch) technique

11. main goal
UX design an app
in a fast and fun way
alone or in a team

12. lessons learned

14. source: killingtime (flickr.com)

18. TXXI verhaal

20. learn from others

22. mobile UX

26. apps

30. how?

33. how?
• define user stories, what does the user want & what
are business needs?
• define requirements, for example API’s.
• define structure
• we sketch using templates

35. why sketchboarding?
• reach UX solutions faster;
• requires to focus on multiple solutions, before
deepening a solution that might not be ideal;
• made for team work;
• agile worked well for code, let’s do the same with UX.
more info on sketchboarding can be found at Adaptive Path’s blog: http://bit.ly/uxsketch

36. now get to work!
user stories • defining structure • sketchboarding

38. 1 assignment: inspiration
creative brief
5 minutes

39. 2 assignment: inspiration
inspiration library
20 minutes

41. 3 assignment: user stories
define user stories
15 minutes

42. 4 assignment: user stories
example:
As a <user role>, I can <story>
so that <benefit>

43. 5 assignment: user stories
prioritize user stories
10 minutes

44. 6 assignment: sketchboarding
define structure
10 minutes

45. 7 assignment: sketchboarding
6-up template
individual
30 minutes

46. 8 assignment: sketchboarding
discuss!
team
15 minutes

47. 9 assignment: sketchboarding
1-up template
team
20 minutes

48. 10 result
show your ux solutions
team

49. next steps
in support:
• wireframing
• prototyping
• visual design
• code

50. sources of inspiration
• Sketchboarding by Adaptive Path
templates & article: http://bit.ly/uxsketch
• Tapworthy, Josh Clark
Book about designing iPhone apps
• Responsive Web Design, a book apart
Book about responsive web design
• User Interface Guidelines:
• Apple
http://bit.ly/uxhig
• Android
http://bit.ly/uxandroid

51. Thanks!
ruben@mangrove.nl • @rubenbos • blog.mangrove.nl