This session was presented at the MarkLogic User Conference in April of 2010. In it, I discuss strategies of how to combine functionality with aesthetics to create great apps. The audience consisted primarily of developers/engineers and product managers.

1. Creating the user
experience
JD Vogt - Director of User Experience, Mark Logic

5. Aesthetic
Functionality

6. Aesthetic
Fonts
Colors Code
Graphics Data
Layout
Functionality

7. Aesthetic
Functionality

8. Aesthetic
Functionality

9. Aesthetic
Functionality

10. Aesthetic
Functionality

11. Aesthetic
Sweet Spot
Functionality

12. Aesthetic
* Value
Sweet Spot
Functionality

13. Aesthetic
* Value
* Brand
Sweet Spot
Functionality

14. “Form follows function - that has
been misunderstood. Form and
function should be one, joined in
a spiritual union.”
- Frank Lloyd Wright

15. Real World
The evolution of maps

16. Real World
The evolution of maps

17. Real World
The evolution of maps

18. Real World
The evolution of maps

20. Aesthetic
* Value
* Brand
Functionality

21. How can we do that?

22. How can we do that?
• Understand the needs of users

23. How can we do that?
• Understand the needs of users
• Discover the magic moments in
your app

24. How can we do that?
• Understand the needs of users
• Discover the magic moments in
your app
• Get the right feedback at the
right time

25. Understanding the
needs of users
The KJ Technique

26. The KJ Technique
• Technique for gaining rapid group
consensus and understanding complex
systems
• Inventor Jiro Kawakita

27. KJ Technique

28. KJ Technique
• Gather 4-6 people for ~1 hour

29. KJ Technique
• Gather 4-6 people for ~1 hour
• Start with focus question

30. KJ Technique
• Gather 4-6 people for ~1 hour
• Start with focus question
• Put opinions (or data or questions) onto Sticky
Notes

31. KJ Technique
• Gather 4-6 people for ~1 hour
• Start with focus question
• Put opinions (or data or questions) onto Sticky
Notes
• One answer per note

32. KJ Technique
• Gather 4-6 people for ~1 hour
• Start with focus question
• Put opinions (or data or questions) onto Sticky
Notes
• One answer per note
• Put Sticky Notes on the wall

33. KJ Technique
• Gather 4-6 people for ~1 hour
• Start with focus question
• Put opinions (or data or questions) onto Sticky
Notes
• One answer per note
• Put Sticky Notes on the wall
• Group similar items

34. KJ Technique
• Gather 4-6 people for ~1 hour
• Start with focus question
• Put opinions (or data or questions) onto Sticky
Notes
• One answer per note
• Put Sticky Notes on the wall
• Group similar items
• Name the groups

35. KJ Technique
• Gather 4-6 people for ~1 hour
• Start with focus question
• Put opinions (or data or questions) onto Sticky
Notes
• One answer per note
• Put Sticky Notes on the wall
• Group similar items
• Name the groups
• Vote on priorities

36. KJ in Practice
A brownbag exercise at MarkLogic

37. Question 1
What would someone
coming to Bugtrack
expect to either find or
do?
Re port a
bug

38. Question 2
Bugtrack would be
magical if it could...
Order
a Esti mate
Pizz
Rel eases

39. Question 3
What could be done to
make Bugtrack worse?
IE Only
Do esn’t
save

40. Grouping and Voting

41. Grouping and Voting

42. Grouping and Voting

43. Results

44. Outline

45. Results
My
Search Releases Workflow Reporting
Workflow
Full text Bugs per Check for Dash- Magical
search release dupes board CVS
Mark Time to
Track Alerts
Fixed release
See Report a
progress bug
Combine
bugs

46. Logout Settings Alarms
Bugtrack + add a bug
Home Bugs Releases Reports
Search All Bugs My Bugs
Release status
Search Options
Total Bugs

47. Labels

48. Labels

49. Labels

50. Labels
Personal setup, training and projects

51. Does it work?

56. Results

57. Results
• Brand - Cited 190 times

58. Results
• Brand - Cited 190 times
• Value - 27 Million dollar grant, largest single
grant in the history of Virginia Tech

59. KJ Technique
• Great for information architecture
• Great for understanding user priorities
• Fast
• Democratic
• Can provide verbiage

60. Magic Moments
Found through prototyping

62. Core Interaction or
Activity

63. Office Toolkit

64. Office Toolkit

65. Frosting

66. Frosting

67. Frosting

68. Frosting

69. Magic Moment

70. Magic Moment
One Way Street

71. Magic Moment
One Way Street

72. Rich interactions

73. Rich interactions

74. Conference iPhone App

77. Twitter Friends Contacts
Photos
Surveys Maps
Personalized
News
Schedule

78. Prototyping

82. XML
MarkLogic
Property List
Excel Spreadsheet
Survey
Organizer
Attendee

83. Schedule
News changes
Survey
Communication
Core interaction
Dynamic Publish and Subscribe with
MarkLogic

84. HERB

86. HERB

87. HERB iPhone Webapp Information Architecture v.1 - Ordering
HERB Back Drinks Back Location Back Location HERB
Ajax update of Ajax update of
Order a drink from HERB... Ajax update of Tap a location on the map
home with drink Water home with location 1. Kitchen Counter
home with location
Choose your drink > Coke 2. Front Desk
1
Tell HERB your location > Diet Coke 3. Another Place
OR
3
Juice 4. Another Place
Enter your name >
Place Order
2 pic of HERB sweating
4
Boy, I'm really busy,
Home Status Queue Photos could you try again
Home Status Queue Photos Home Status Queue Photos
later?
Home - Pre-Order Mode Drinks Location Alt location idea Herb is busy/unavailable
We'll need to set/check a User selects drink from An overhead map of the room The user picks a location from When the queue is full or
cookie when the app launches choices. Check mark shows on is shown. User selects which a list of predetermined HERB is offline, the user
so we can know if we are in choice, clicks "Back." station they will be standing at. locations. receives this message, it
pre or post order mode. Signs are posted at each essentially locks them out.
station.
Back Name Back Name HERB
Please enter the following... Order a drink from HERB...
Please enter the following... Ajax update of
home with name Sending order to HERB... Sending order to HERB...
Name
| Diet Coke >
I got your order, for
I am a.... a Diet Coke, meet
I am a.... Station 3 > me at station 3 in
CMU Student about 10 min.
Previous Next
CMU Student Faculty Done
John Smith, Student >
OK
Faculty Member QIntel Employee Y U I O P
W E R T
Place Order
Intel Employee A S
Guest D F G H J K L
Z X C V B N M
Guest
Home Status Queue Photos Home Status Queue Photos
.?123 space return
Name and contact info Name and contact info Home, with Place Order Lit Sending Order...
User enters their name and Popup keyboard Becomes lit when drink, Sends http request to server
chooses their type. (type is location and name have been with drink, location, and name
only important if we can chosen. Those can be done in string. Could also potentially
customize the message HERB any order. send it as a text message.
sends.)

88. HERB iPhone Webapp Information Architecture and Interactions v.1
HERB HERB Other Messages: HERB HERB
Pushy aren't you?
Your Order... Your Order... (down one) Your Order...
You ordered Juice. (nice You ordered Juice. (nice
Sorry, you'll just You ordered Juice. (nice
choice) Right now you're choice) I'll meet you at have to wait like choice) I'll meet you at
4th in the queue. I'll meet I'm on3my way,
station in about 4 min.
?
station 3 in about 4 min. everyone else
you at station 3 in about 12 *wink* I'll see what meet you at station
min.
I can do 3
Why would I want
a bribe? I'm a OK
OK
robot.
Bribe Bribe Bribe
Money means
Cancel Order Cancel Order nothing to me. I Cancel Order
cost more than
Server receives message you make in a
The request is sent to the year.
server and placed in the Home Status Queue Photos Home Status Queue Photos Home Status Queue Photos
Home Status Queue Photos
queue.
Home Screen Post Order Bribes Notification Complete Transaction
The home screen after an Bribing HERB will bring return HERB could send a message How do we know a transaction
order. It will need to be pushed random messages. There is a (via SMS) to alert the user to has been completed? We
via ajax to update with time. chance of being moved up or be ready. thought of giving him a tip, or
down in the queue. saying thank you, holding up a
bar code... In some way, the
cookie on the phone needs to
get reset so that another drink
can be ordered.
Home Status Home Queue Home Photos Photos Photos HERB
Battery Jon Meet me at station x Your Order...
I'm on an almost full
charge You ordered Juice. (nice
Laura Meet me at station x choice) I'll meet you at
Are you sure you
station 3 in about 4 min.
Drinks Served Today
want to cancel your
Justine Meet me at station x order?
So far I've delivered 11 drinks
3 sodas No Yes
4 waters Francois Meet me at station x
4 Juices Bribe
Min Meet me at station x Cancel Order
Map
> Jon Meet me at station x
More Stats >
Home Status Queue Photos
Status Queue Photo Gallery Photo Detail Canceling an order
This page would show various Shows people waiting for Photos HERB has taken. Detail of a photo HERB has If a user has to leave, they can
statistics and stats on HERB. drinks. Might want to consider taken cancel their order and they will
moving the Bribe button here be removed from the queue.
as a sort of easter egg.

89. Experience Prototyping
Experience Prototyping is acting out the
existing or desired experience with props. It
gives the designers the ability to understand
existing experiences and explore design ideas.

90. Magic Moment

92. “Yes and...” culture

93. Lessons from improv

95. I put on my Viking
Helmet and jump on
my Harley

96. I put on my Viking
Helmet and jump on That idea sucks
my Harley

97. I put on my Viking
helmet and jump on
my Harley

98. I put on my Viking Here’s 5
helmet and jump on reasons why that
my Harley will never work

99. I put on my Viking
Helmet and jump on
my Harley

100. I put on my Viking
Let me play devil’s
Helmet and jump on
advocate...
my Harley

101. I put on my Viking
Helmet and jump on
my Harley

102. I put on my Viking Hey, there’s some
Helmet and jump on Martians -maybe they
my Harley need a lift.

103. In practice...
Apple's design process each week
Helen Walters on March 08, 2008 Businessweek

104. In practice...
Apple's design process each week
Helen Walters on March 08, 2008 Businessweek
Meeting 1

105. In practice...
Apple's design process each week
Helen Walters on March 08, 2008 Businessweek
Meeting 1 Meeting 2

106. In practice...
Apple's design process each week
Helen Walters on March 08, 2008 Businessweek
Meeting 1 Meeting 2
Forget about constraints
Brainstorm
Think freely
Go crazy

107. In practice...
Apple's design process each week
Helen Walters on March 08, 2008 Businessweek
Meeting 1 Meeting 2
Forget about constraints Nail things down
Brainstorm Work things out
Think freely
Go crazy

108. Feedback
Getting the right fidelity of feedback at the right time

109. Fidelity of Feedback
Kathy Sierra - co-creator of the Head First books

110. Fidelity of Feedback
Kathy Sierra - co-creator of the Head First books

111. Fidelity of Feedback
Kathy Sierra - co-creator of the Head First books

112. Fidelity of Feedback
Kathy Sierra - co-creator of the Head First books

113. Speed date storyboards

114. Participatory
Moodboard

115. Summary
Getting the correct mix of
aesthetics and functionality

116. Summary
Getting the correct mix of
aesthetics and functionality

117. Summary
Getting the correct mix of
aesthetics and functionality
• Use the KJ method or other techniques for
discovering user needs and creating an information
architecture

118. Summary
Getting the correct mix of
aesthetics and functionality
• Use the KJ method or other techniques for
discovering user needs and creating an information
architecture
• Find a magic moment that you can align your
application around

119. Summary
Getting the correct mix of
aesthetics and functionality
• Use the KJ method or other techniques for
discovering user needs and creating an information
architecture
• Find a magic moment that you can align your
application around
• Get the right feedback at the right time

120. Thank You