Presenting Omnigraffle as a tool that can visualize both the “what”, framing your research with mental models, experience maps and task-flow diagrams, and defining the "how" with wireframes and light prototypes. 10 minutes. Presented at the Grand Rapids IxDA and Ladies that UX Wireframing and Prototyping workshop.

1. The Flexibility of Omnigraffle...Macro and Micro
VC Fund
IP Law
Corporation
Patent
Office
Search
Firm
University
Startup
Abhinav
Kirsten
Ritesh
Jessica
Henry
Saraara
Linda Tim
Victoria
Katie
Brian
Peter
Kurt
Massi
Barry
Gavin
Deb
Sarah
Sam
Will
Andrew
Examiner
Tom
Inventor
Jakob
Expert
Sachin
Marketing
Counsel
License
Invest
Invest
License
Apply
Apply
Hire
Hire
Expert
Expert
Inventor
Inventor
Hire
Instructors
Wizard
Reference
Support
• Guides for managing experiences
• Instructor community
• Preview other textbooks
Build ClassAccount
Student Feedback
Update notices
Admin messages
Build new
Template*
Choose Template based
on amount of ped content:
• Low - Text only
• Med - Balanced
• High - Full Experience
• Custom
Edit Template
• +/-tasks
Launch
Class
Admin
Consult and build resources
Define Templates
My Classes
Choose Context:
• Traditional
• Online
• Hybrid
Assign
Textbook
Create
Class
Assign
Students
(Manual or
batch) and
class size
May inherit customization from
previous classes
Students
Email link to buy book/
get account
Set Up Account
Determine which
chapters to flag as
being covered in
the class
Choose, duplicate
class
Credentials to enable
Instructor access
Q: Does an Instructor
want to see a
dashboard with Student
progress , all class
overview here?
Book Selection Create Class
Assign Students
Assign
Students
Batch input
student list
Manually enter
student names
Create new account
Input Name or
choose name
Input school
input
credentials
Input class
name id for
each class
Get help on
process
Create a Class
Duplicate Class
Define what
attributes to
include if
duplicate
Define class
start/end dates
PIck class
(CRUD)
Setup Account
Create Syllabus
Choose
textbook
build lesson
plan
Establish
grading
Find a book
Search for Title,
Author
Browse by
subject
Browse titles
Input class
name id for
each class
List import
Link generator
Templates
predefined
Preparation
Create Account
form
Reference on
how to create
account
Buy a book
Add book to
library
Review sample
textbook
Purchase book
Assign book
Choose Book
from library
Search for
book
Book store
Search
Library of
purchases
Update account
Update Profile
Add my photo
Review Profile
Purchase
History
Profile Edit
Textbook
provides lesson
plan?
Reference on
how to
purchase
Book preview,
details
Create class
wizard
Reference on
how to create
class
Build Template
Build Custom
Template
+/- tasks from
experience list
Delete Custom
Template
Name Template
Schedule
Define Class
Choose
Context
Choose
Template
Edit Template
+/- tasks
Calendar
Task list for
each template
Dashboard Equipment Surveys Maps Reports Planner Learn
Campus Name
1 Campus, 5 Buildings
Hello Ann
Terry MacIntosh
888-288-8888
Your Company Rep
Email Terry
Chat now with Company Support…
Utility Co.
System Health University Campus
90.5%
Dashboard 5
Power
Equipment LifePerformance
Good Days since last error message: 27 days
2014 upgrades have already saved over $50k!
Jump to Surveys
Efficiency
H20
Costs University Campus
Consumption
25 March
Actual Loss counter
$129,231
Actual losses incurred to date from unrepaired equipment reported on last survey 5 March 2014
$129,231-$287,221
Estimated loss range
48/382
Top Alerts
More…
Alert Type
9:00 am 2 Apr 2014
U/Food Warehouse
High
Alert Type
8:00 am 2 Apr 2014
U/Food Warehouse
High
Alert Type
7:00 am 2 Apr 2014
U/Food Warehouse
High
Active Work Orders
More…
Work Type
8:00 am 2 Apr 2014
WMU/Food Warehouse
Work Type
9:00 am 2 Apr 2014
WMU/Food Warehouse
$6250 Estimated investment
2
3
Legionella
!
Inlet Set Point
1
4 5
4.1
8
3
2
6
7
$129,231-$287,221
Estimated loss range
0/211
Active Work Orders
More…
Work Type
8:00 am 2 Apr 2014
U/Food Warehouse
Work Type
9:00 am 2 Apr 2014
U/Food Warehouse
4.2 1 year
1 year
9
OmniGraffle
Grant Carmichael of The Understanding Group | @thinkxd

2. TUG Information Architecture Process
programming analysis synthesis specification
HOWWHAT
architect design
Business Goals
Interview Stakeholders
Intention Modeling
Current State
Interview Users
Benchmarking
Future State
Personas
Experience Maps
Structural Design
Taxonomy
Instruct
Sitemaps
Wireframes

3. Research...

4. Current State Journey Map: Overview
Aware Onboard Build Manage Evolve Close
Email
Home
Tool
Admin
Documents
Communities
Support
External
5
?
a
11
17
12
g
7 9 10
b
e
? ?
4 a
f
?
6c d e
?
h
13 14 15
18
20
21 22
16
18
19
Chuck
Business Mgmt
+ Sys Admin
Adaline
Dev + Sys Admin
1 gb c d f b 5
8
6
Configure
23
24 25
28
28
26?
27
28
28
28
28
28
28 35
35
3630
31
32
33
?
3a
?
?
?
?
?
?
?
34
?
?
?
Failure
Errors
Confusion
Wait Time

5. Current State Journey Map: Detail
Email
Home
Tool
Admin
Documents
Communities
Support
External
5
?
10a
11 12
4g
7 9 10
10b
?
3e
? ?
4 4a
4f
?
64c 4d 4e
?
4h
13 14 15
16
Adaline
Dev + Sys
Admin
3g3b 3c 3d 3f 4b 5
8
6
Chuck
Business Mgmt
+ Sys Admin
3a
3a. Chuck, who tends to take lead on business oversight, attempts to
kick off a Trial Account, assuming he will then pass along the more
particular technical details to Adaline. Unsure how to proceed. After
clicking through the three main graphical invitations, he realizes,
based on the video, that he should be creating a project.
3b. Chuck clicks “Create Project” -- only to get an alert that that he has
to have an account first. So he guesses he may need to use
“Manage Account”, even though he doesn’t have an account yet,
and the instructional video didn’t mention this step.
3c. In the “Manage Account” modal, Chuck is not sure how the
process works for setting up an account, beyond filling out the
forms. He hovers over the “?” icon by the Account Type drop-down
menu, and sees a director will need to approve, but doesn’t know
how long it will take, what he will get with Trial versus Production,
or why there are such restrictions on what is billed as a flexible
service infrastructure.
3d. In the form, he isn’t sure what an “Application Account” is, and
doesn’t understand why the help text says 30 days but the
expiration period is 60 days. He assumes a Trial Account can be
upgraded later, rather than having to start over.
3e. The purpose of the Associated Projects step is not clear, but
Chuck sees it is Optional, so moves along.
3f. Chuck wants to add Adaline and other team members to the
account, but does not see an opportunity to do so -- the Associated
Users step lists only him.
3g. After Submitting, Chuck sees a pop-up confirming his request was
submitted, and mentioning who will be reviewing it.
4. Automated email confirmation that the system received
submission.
4a. He finally receives an email saying the Trial Account is approved
a day later.
4b. Chuck wonders how he will be able to collaborate across the
team, using this account structure. He clicks “Manage Account”
after approval, but sees it is the same Account Creation process,
but with his current account information pre-filled, with the option
to create a new one. He wonders if this means he could create
more than one account, and if that will be necessary.
4c. Chuck selects “Create Project” to start the request for for
Compute, Storage and Network resources so he can kick the tires
of the Product.
4d. Chuck walks through the three-step pop-up
4e. Chuck notices the “i” icon and reads the instructions there, but
sees nowhere to choose small, medium, large, or x-large options.
It’s unclear if that information is supposed to be stated in the
“Description” field. He does his best to describe what they need.
4f. He submits the request for the Project and waits for manual
approval
4g. After 2 days, Chuck receives an email notifying him his Project is
approved (He is still wondering why so many constraints, and
who approved his project, or why).
4h. Chuck forwards the trial-account-approval email notification he
receives to Adaline. “Can you get us a project spun up?”
5. Adaline goes to cloud.Cloudco.com to set up a project, but
doesn’t see that she is on an existing project. She contacts
Chuck, asking how she can get access.
6. Chuck remembers seeing something about adding users in the account creation wizard. He tries the Manage
Account tool again, but sees no way to add users.
7. Chuck wonders how to add Adaline and other team members, so he tries the Support link in the header, but
finds it only takes him to an Overview page, with no instructions -- he has already agreed to try the service, so
isn’t interested in the content marketing the service to him.
8. Chuck notices there is a Support section in the footer, and tries the FAQs link. He sees no search ability, so
he user Control-F to find what he is looking for using keywords like “access” and “add” but sees no help for
his question.
9. Chuck goes back to the previous page, and tries the “Support Info” link in the footer, but sees it is only about
how to create a support ticket. He doesn’t want to bother with that process, since nothing is broken, he only
needs an answer to a simple question.
10. Chuck tries the Documentation link from the footer.
10a. Chuck finds a list of resources; the only one that looks relevant is the User Guide, which he navigates to.
10b. Chuck searches for “access” in the PDF, and stumbles across the section on Add Users to a Project.
11. Chuck goes back to the Home page, and clicks “Go To My Projects”
12. Chuck sees there is a Project listed as a rectangular panel, listed under the name he gave it. At this point, he
doesn’t remember what the User Guide said, and isn’t sure where he found it, so he looks around the page
for what he should do.
13. He tries the gears icon and sees there are management tools linked there.
14. Chuck tries “Manage Project Access” and sees there is a way to add team members; he isn’t sure what
permissions will be ascribed to a “user” versus an “administrator” but he selects the empty name field to add
Adaline.
15. He thinks the field to enter her name isn’t working at first even though he highlight the whole row when he
selects the field until he realizes that he has to select the magnification glass icon specifically. He finds he has
to input Adaline’s full name “Adalineline” in the pop-up search window in order for her name to show up in the
results list. He adds her to the project.
16. He realizes he ought to check with Adaline on what specifics he should choose configure the Project. He
writes an email to Adaline to asking her to configure the project.
?
?
?
?
?
?
?
?
?
?
?
?
?
Failure
Errors
Confusion
Wait Time

6. Line of Visibility
Messages/Email
Support
Home
Dashboard
Services
Store
KEY TransparencyPrinciples: Contextual learning Semantic clarity Simplicity Proactivity
Backstage
Future State Journey Map: Overview
11
5
Aware Onboard Build Manage Evolve Close
1
6
5
12
14
14
a
15
15
a
17
18
18a
19
19
a
19
a
Chuck
Business Mgmt
+ Sys Admin
Adaline
Dev + Sys Admin
2
6 7 8 9
3 3a
6a
4 4a 4b 4c 4d
11 11 11 11 11
3a
14
a
9
15
a
17
19
a
> Search platform
> Taxonomy Mgmt system
> CMS
> Forums
> Support platform
Full Ecosystem
6 7 8 9
117 8

7. Line of Visibility
Messages/Email
Support
Home
Dashboard
Services
Store
KEY TransparencyPrinciples: Contextual learning Semantic clarity Simplicity Proactivity
Backstage
Future State Journey Map: Detail
4a 4b 4c
6
5
4d
4. Armed with recommendations from the Cloud Readiness Check, Chuck has what he
needs and thinks it makes sense to create an account. So he selects Get Started to
start the workflow of establishing a Product account.
a. He reviews the account levels and support package options presented to him and
notices that the ones recommended are flagged and preselected. He can
review all options listed by expanding contextual help icons for more details.
b. He is prompted to add other users that will be able to access the account. Chuck,
being an internal tenant and logged in to the network, has an initial view of
everyone in his department to choose from and a quick lookup with
autocomplete of any other user with Cloudco credentials.
c. He can select multiple users to save as named groups which, along with lists of
recent additions, will help to speed-up batch assignments to projects in the
future. He can always edit his team in Account section or adjust per project.
d. Before he submits the application, he is asked to confirm his email and sees an
estimate of how long it will take for approval but, he can start to create
placeholder projects in the meantime. He submits the application and gets a
confirmation on-screen and via email.
5. He is quickly approved, indicated by an email and with an alert in the Messaging portion
of the UI. He follows the link to the Dashboard.
6. Chuck has to sign in only once, because all regions and systems related to Product
recognize his credentials. In the Dashboard, Chuck has a global view of all projects
within an account, and can view, filter and edit by performance, billing and user status
across regions.
a. He remembers to add Adaline, who will configure the instances. He opens a User
search tool while in the Product Dashboard to Search for Adaline (finds
“Adaline” even though her name is “Adalina”) and drags her to the two
projects.
4
> Metadata for User DB
> User Preference DB
> Consistent approval timeframes
> In-context help content
> Authentication
> Live system status reporting
> Live cost reporting
Taxonomy system
CMS
Unified platform
Development
6a
Onboard
Chuck
Business Mgmt
+ Sys Admin

8. Scenario Flagging
Sara is looking for details on available window air
conditioners from Store
Sara just boarded the train and while grabbing an open seat, opens her
iPhone and is desperately in search of a window air conditioner for her
apartment. As she opens her Store app which has defaulted to her home store
location. She types in the search box "air conditioner" which results in a list
of varying products including air conditioners [multiple types] to hair conditioner.
She is able to quickly filter by department and clicks home improvement. She is
narrowed down to just air conditioners. She is presented one additional filter that
allows her to filter by stand alone, window or other types of air conditioners.
She filters by Window and receives six types of window air conditioners. Sara
locates a window air conditioner and clicks on the result to go to a product detail
page. There she is able to see a product image as well as color options. She
sees details on how much space it will cool and knows that will cool her
apartment. Sara reads the full description and then notices customer reviews
and that the a/c unit she's looking at has an average rating of 4.5 out of 5. She
also notices that there is a link to check availability. When she taps it she is able
to see that there are no units available at her local store but she is provided
additional area stores near her that have available stock as well as an option
to have it shipped to her home. Sara decides that she will add one of the units
to her cart found at the next closest store.
Sara
Goal
Search for window air conditioner
Context
Using iPhone on public transportation
Status: desperate
Features (Product Detail)
Default Home store
Availability at home store
Availability of stores nearby
Option to ship
Add to cart from another store
Features (Optional)
Customer reviews: summary and individual reviews
Features (Search)
Search results of varying products
Filter by department, type of air conditioner (standalone, window, other)
Product details: image, color options, specifications

9. Scenario Task Flow
Product Detail
Search Results
Cart
Search (in product context)
Option 3
Option 1
Type “Air
Conditioner”
Sara
Option 2
Scenario 3
Looking for details on available window air conditioners from Store
See Page 3
Add to Cart
In-stock Store list
Make required
selection
(size, etc.)
In stock?
Review details
YES
NO
Change to Home
store for Order
Floorplan Map
Change store?
NO
YES
Review Search
contextual Result list
(products)
Filter by Dept.
(Home Improvement)
narrows to Air cond.
Filter by Attribute
(window)
Review filtered
Search Result list
(6 products)
Select Product to
go to detail
Change Search category
(initiates targeted search)

10. Rewards
Notes
20.0a Mobile Search Input
Autocomplete in-progressSara
Behavior of search criteria is dependent on the backend
capabilities.
Opens search input field
Search input field
Input persists until manually cleared or session ends
Auto complete selections
Displays category and # of results (if possible)
1.0
2.0
3.0
Cart
Air _
Search
Air Popped Popcorn in Grocery (3)
Air Conditioners in Home Improvement (34)
Air Filters in General Merchandise (18)
Air Compressed in Office Supplies (2)
Air Pump in General Merchandise (7)
She types in the search box
"air conditioner" which results
in a list of varying products
including air conditioners
[multiple types] to hair
conditioner.
1.0
2.0
3.0
Wireframe 1

11. Rewards
Notes
Add to
List
Add to
Cart
L’Oreal
Hair Conditioner
$5.99 Reg. $6.49 Save $0.50
Honeywell
Stand-alone Air Conditioner
$114.99 Reg. $124.99 Save $10.00
Honeywell
Window Air Conditioner
$124.99
In-stock at Shadyside
In-stock at Shadyside
•••
•••
•••
Cart
20.2 Mobile Search Results: Cart
Add item to cartSara
Add to Cart
⁃ Animation of addition recommended
⁃ (default =add 1 to cart)
Indication of # of items in cart (increments when items added from
search result)
Indication of # of items in cart (increments with each tap)
1.0
2.0
3.0
Add to
Favorites
In-stock at Shadyside
1.0
1
2.0
(34) Results for “Air Conditioner”
Filters Price Low-High
1 3.0
Honeywell
Window Air Conditioner
$124.99
In-stock at Shadyside
•••
Sara decides that she will add one
of the units to her cart found at
the next closest store.
Wireframe 2

12. Telling the Whole Story...the Macro and Micro
Scenario Map: Needing Motivation
Joe
Context
Joe graduated High School 10 years ago.
He has been unemployed for 6 months
and last worked for a local manufacturer
and is considering taking classes.
He finds out about the Map Your Future
platform at a Community Center Kiosk
More personal inquiry
If enrolled in a school eventually,
Joe can link his account to the one set up for
him. This enables even further value with
Advisor and academic progress input
Career Map My JobsJobs Map Your Future
Job Title
City
Salary
Job Title
City
Salary
Job Title
City
Salary
Job Title
City
Salary
Industrial EngineerCategories
Add to My Jobs
My Profile
Industrial Engineer
City
Salary
Filters
more like this
Local State All
Skills
Skills
Skills
Education
Outlook
Prospect
A good fit LXP AXP Prefs
Next
Healthy Job growth Projected
Summary
Salary
Career Map My JobsJobs Map Your Future
Progress
My Profile
Classes
Industrial Engineer
Field Industrial Engineer
Aerospace Engineer
Electrical Engineer
GRCC
Industrial Enginee
Skills
Skills
Skills
Education
Outlook
Prospect
A good fit LXP
Healthy Job
Summary
Salary
Remove
Access Map Your Future:
Wants to Investigate
Careers and schools
Skills
Survey
General
Survey
To discover life
experiences that
link to potential
career paths
ACADEMIC
Create
Account
Selected school’s classes
added to career map
Pick target
School
Link to School
Admissions info
Learn what local
jobs are ‘hot’ and
also suited to
reported life skills
Learn about unfamiliar job titles
and what skills are relevant
through video interviews and
discussions from other users
CAREER
Add Jobs to Career Map,
see suggested classes
What is an
Industrial Engineer?
Discussions
Description
Attributes
Personalized Service
Basic Service
Add to My Jobs
and view on
Career Map
Degree TBD
4 yrs
Remaining
0% More like this

13. Pros & Cons of Omnigraffle
Pro +
1. Easy and powerful Macro (diagramming) and Micro (wireframes)
2. Hard to lose stuff: Copy elements from autosaved points in the past!
3. Excellent multi-page PDF export, editable in Illustrator and vice-versa
Con -
1. Doesn't match Illustrator for custom shapes or InDesign for text handling
2. Interactive prototyping is very basic and only in-app or PDF
3. Mac-only
Grant Carmichael of The Understanding Group | @thinkxd