Beyond Wireframes
Voices That Matter • San Francisco • October 25, 2007
Dan Brown, Principal • EightShapes, LLC

October 1
?
995
2

October 1
995
1. What’s New Since 1995
Or, then and now

Then:
• Simple, hierarchical structures
• Lack of familiarity
• Jacks of all trade
• Waterfall methodologies
4

Now:
• Complex structures & interactions
• Embedded in business
• Team diversification
• Process diversification
5

Complex structures & interactions:
• Faceted navigation
• User-generated content
• User-generated structures
• Dynamic behaviors
• Dissolution of the page
6

Embedded in business:
• More stakeholders
• Greater scrutiny
• Greater impact on people
7

Team diversification:
• Specialization & Scale
• Generalization & Speed
8

Process diversification:
• Increased formality
• Associated backlash
• Experimentation
9

?
2. How Documents Fail
Or, mistakes we make

• Unclear
• Incomplete
• Inappropriate
11

An Example:
Abstracted Wireframes for
Reporting Engine of CMS
12

page
1
Reports Home
custom...
Application Home 2
1 The name of [HIDDEN] client.
[client name] : [timeframe] change
3 2 The selected timeframe for the overview. The
1 custom...
5 6
default timeframe is \"last seven days.\"
Highlights drag headers to change layout | edit metrics | export from: Jan 01 2006
4 3 Clicking this link reveals a drop-down menu
New Members Donations Exposure Forwards allowing users to select a different time frame. to: Jan 01 2007
Screen:
Options include: Yesterday, Last Seven Days,
999 $9,999 999 999 Last Week, Last Two Weeks, Last Month, Last
Quarter, Last Six Months, Last Year,
Custom... If users select \"custom\" they are
prior [timeframe]: 999 prior [timeframe]: 999 prior [timeframe]: 999 prior [timeframe]: 999 presented with the options at right. With a
custom timeframe, the tiles do not display
data from a prior timeframe. Tile Dragging Behavior Rules
Issue Targeting Comments [variable name] [variable name]
These customizations are attached to user
4 Each highlight tile displays the name of the accounts. Once a user selects metrics and
999 999 999 999 variable, the metric in the given timeframe,
and the same metric in the prior timeframe.
re-arranges the tiles, they are stored with his
or her account.
For example, if the selected timeframe is
prior [timeframe]: 999 prior [timeframe]: 999 prior [timeframe]: 999 prior [timeframe]: 999 \"Last Quarter\" the display will show \"Prior Dragging a tile within a row
Quarter\". Users can drag the tiles by the
header to rearrange them. Clicking on the If users drag a tile within
Document:
main part of the tile takes users to the the same row, the other
7 8 Comparison Report page for that metric. tiles shift left or right to
show: active campaigns | all campaigns export
accommodate it, but do
9 rank campaign pages page performance alerts alert performance
5 Clicking this link will take users to a separate not jump between rows.
page with a list of all possible metrics. Users
1/6 [campaign name] [# pages] [# alerts] can choose up to eight metrics to display on
Project: Reports Redesign
the Reports home. These selections are
specific to each user account.
2/1 [campaign name] [# pages] [# alerts]
6 Users can export the highlighted metrics to an
Dragging a tile to another row
XLS document. Clicking this link will start an
3/18 [campaign name] [# pages] [# alerts] automatic download. Dragging a tile to the top
row from the bottom
4/- [campaign name] [# pages] [# alerts]
7 By default the Reports home displays only
shifts the top-row tiles to
active campaigns. Clicking \"all campaigns\"
the right and down as
will change the display of the page, hiding the
necessary. The far-right
5/2 [campaign name] [# pages] [# alerts] highlights and populating the table will all the
tile shifts down to the far-
campaigns run by the client.
left position of the
8 Users can export the table data to an XLS bottom row.
Active Campaigns are campaigns that Page Performance is an aggregate Alert Performance shows click-throughs document. Clicking this link will start an Dragging a tile to the
have been designated as such by the client. measure of all the pages in a campaign. It is for the most recent alerts sent. It is not automatic download. bottom row from the top
If a client has no active campaigns, the determined by dividing the total number of modified by the selected timeframe. shifts the bottom-row tiles
Client: [HIDDEN]
campaigns displayed here are determined actions by the total number of views within 9 The table displays essential stats from active to the left. The far-left tile
by business rule: those campaigns that have the specified timeframe. campaign. Clicking on a campaign name takes moves to the far-right
had at least 10 actions in the last 6 months. users to the Campaign Overview page. position of the top row.
Campaign Rank is determined by summing the page performance and the alert performance.
The display shows the rank in the current timeframe and the rank in the prior timeframe.
13

page
1
Reports Home
custom...
Application Home 2
1 The name of [HIDDEN] client.
[client name] : [timeframe]
1
Priority Highlights
4
change
3
5
drag headers to change layout | edit metrics | export
6
2 The selected timeframe for the overview. The
default timeframe is \"last seven days.\"
from:
custom...
Jan 01 2006
3 Clicking this link reveals a drop-down menu
New Members Donations Exposure Forwards allowing users to select a different time frame. to: Jan 01 2007
Screen:
Options include: Yesterday, Last Seven Days,
999 $9,999 999 999 Last Week, Last Two Weeks, Last Month, Last
Quarter, Last Six Months, Last Year,
Custom... If users select \"custom\" they are
prior [timeframe]: 999 prior [timeframe]: 999 prior [timeframe]: 999 prior [timeframe]: 999 presented with the options at right. With a
custom timeframe, the tiles do not display
data from a prior timeframe. Tile Dragging Behavior Rules
Issue Targeting Comments [variable name] [variable name]
These customizations are attached to user
4 Each highlight tile displays the name of the accounts. Once a user selects metrics and
999 999 999 999 variable, the metric in the given timeframe,
and the same metric in the prior timeframe.
re-arranges the tiles, they are stored with his
or her account.
For example, if the selected timeframe is
prior [timeframe]: 999 prior [timeframe]: 999 prior [timeframe]: 999 prior [timeframe]: 999 \"Last Quarter\" the display will show \"Prior Dragging a tile within a row
Quarter\". Users can drag the tiles by the
header to rearrange them. Clicking on the If users drag a tile within
Document:
main part of the tile takes users to the the same row, the other
7 8 Comparison Report page for that metric. tiles shift left or right to
show: active campaigns | all campaigns export
accommodate it, but do
9 rank campaign pages page performance alerts alert performance
5 Clicking this link will take users to a separate not jump between rows.
page with a list of all possible metrics. Users
1/6 [campaign name] [# pages] [# alerts] can choose up to eight metrics to display on
Project: Reports Redesign
the Reports home. These selections are
specific to each user account.
2/1 [campaign name] [# pages] [# alerts]
6 Users can export the highlighted metrics to an
Dragging a tile to another row
XLS document. Clicking this link will start an
3/18 [campaign name] [# pages] [# alerts] automatic download. Dragging a tile to the top
row from the bottom
4/- [campaign name] [# pages] [# alerts]
7 By default the Reports home displays only
shifts the top-row tiles to
5/2 [campaign name] [# pages] Elements [# alerts]
active campaigns. Clicking \"all campaigns\"
will change the display of the page, hiding the
highlights and populating the table will all the
campaigns run by the client.
the right and down as
necessary. The far-right
tile shifts down to the far-
left position of the
8 Users can export the table data to an XLS bottom row.
Active Campaigns are campaigns that Page Performance is an aggregate Alert Performance shows click-throughs document. Clicking this link will start an Dragging a tile to the
have been designated as such by the client. measure of all the pages in a campaign. It is for the most recent alerts sent. It is not automatic download. bottom row from the top
If a client has no active campaigns, the determined by dividing the total number of modified by the selected timeframe. shifts the bottom-row tiles
Client: [HIDDEN]
campaigns displayed here are determined actions by the total number of views within 9 The table displays essential stats from active to the left. The far-left tile
by business rule: those campaigns that have the specified timeframe. campaign. Clicking on a campaign name takes moves to the far-right
had at least 10 actions in the last 6 months. users to the Campaign Overview page. position of the top row.
Campaign Rank is determined by summing the page performance and the alert performance.
The display shows the rank in the current timeframe and the rank in the prior timeframe.
14

Home Page Contents
higher visual priority lower visual priority
1
Knowledge Base
2
How to Add Documents
3
Mission and Vision
The primary focus of the Extranet's home page is the list of categories that Posting instructions appear on the You can contribute to any page by clicking on the The home page includes links to organizational mission and vision. It could
\"Switch to Edit Mode\" link at the top.
constitute the knowledge base. It is through this list that users access all of the home page to facilitate community If you do not see this link and would like to contribute, look like this:
knowledge resources. The list could look like this: participation. please contact your system admini strator.
\"...to develop physical fitness, demonstrate courage, experience joy ...\"
for more information,
Athletes and Athlete Health Information Technology check the user guide
TB TB
our mission + our vision + message from our CEO
Coaches, Skills, and Sports Training Organizational Development
D D
Competitions and Sports Rules Outreach and Recruitment
Event Planning Public Relations and Communications Recently Added
Families and Schools Research
Finance and Operations
Fundraising
Stories of Special Olympics
Strategic Planning
The home page includes a link to items recently added to the knowledge base. Essentials
Governance and Boards Volunteers
The small \"essentials\" area includes essential tools from the knowledge base
3-5 links to topics or documents Branding Guidelines
The knowledge categories will include Best Practices, FAQs, the Glossary, the
Dictionary, and Testimonials. In the future the collaborative applications like the
Language Selection within the knowledge categories. It
could look like this:
Volunteer Registration Form
Budget Template
Sports Guides (Winter, Summer)
bulletin board and expert directory will be accessed through the knowledge base. With Programs all over the world, Special
language - langage - : Coaching Guides
Olympics needs an extranet that appears in
multiple languages. The home page will have English
a language selection menu, which might look
Special Olympics Around the World like this: Applications
The home page will include an area that highlights information specific to The home page includes a menu of
particular regions, includes messages from the Regional Manager Directors. Announcements Special Olympics applications. The
applications
applications menu could look like this: Program Development System go
Announcements are internal messages, directed toward the field from Regions
and HQ. The home page shows the three latest announcements with a link to
Messages from the Regional Managing Directors
Regional Calendars more, looking possibly like this:
Regional and Program Profiles
Regional News, Announcements, and Accomplishments
Special Olympics launches multi-lingual extranet to address needs of Programs
Contribute your best practices to our new kn owledge management system Switch to Edit Mode
Quarterly reports due to regional managing directo rs by April 7, 2003
more... So long as the user has security privileges, the system will
expose a link allowing him to enter the edit mode. switch to edit mode
Navigation on Every Page
Certain items appear throughout the site. A global \"navigation bar\" includes five
items on the home page: Contacts, Around the World, Knowledge Base, User
Guide, and Search. On internal pages, there is always a link to \"home.\" Global
items could be rendered:
User Guide + Contacts + Around the World + Knowledge Base + Search: go
items italicized must appear above the fold
The layout and design depicted herein represents Dan Brown
7 March 2002 Tisani Consulting, LLC
dan.brown@tisani.com
content priorities only and should not be construed
as actual layout and design. Final product may home page contents Special Olympics/
Version 1.1
6400 Goldsboro Rd.
Bethesda, MD 20817
vary. Extranet
15

Priority
Elements Home Page Contents
higher visual priority lower visual priority
1
Knowledge Base
2
How to Add Documents
3
Mission and Vision
The primary focus of the Extranet's home page is the list of categories that Posting instructions appear on the You can contribute to any page by clicking on the The home page includes links to organizational mission and vision. It could
\"Switch to Edit Mode\" link at the top.
constitute the knowledge base. It is through this list that users access all of the home page to facilitate community If you do not see this link and would like to contribute, look like this:
knowledge resources. The list could look like this: participation. please contact your system admini strator.
\"...to develop physical fitness, demonstrate courage, experience joy ...\"
for more information,
Athletes and Athlete Health Information Technology check the user guide
TB TB
our mission + our vision + message from our CEO
Coaches, Skills, and Sports Training Organizational Development
D D
Competitions and Sports Rules Outreach and Recruitment
Event Planning Public Relations and Communications Recently Added
Families and Schools Research
Finance and Operations
Fundraising
Stories of Special Olympics
Strategic Planning
The home page includes a link to items recently added to the knowledge base. Essentials
Governance and Boards Volunteers
The small \"essentials\" area includes essential tools from the knowledge base
3-5 links to topics or documents Branding Guidelines
The knowledge categories will include Best Practices, FAQs, the Glossary, the
Dictionary, and Testimonials. In the future the collaborative applications like the
Language Selection within the knowledge categories. It
could look like this:
Volunteer Registration Form
Budget Template
Sports Guides (Winter, Summer)
bulletin board and expert directory will be accessed through the knowledge base. With Programs all over the world, Special
language - langage - : Coaching Guides
Olympics needs an extranet that appears in
multiple languages. The home page will have English
a language selection menu, which might look
Special Olympics Around the World like this: Applications
The home page will include an area that highlights information specific to The home page includes a menu of
particular regions, includes messages from the Regional Manager Directors. Announcements Special Olympics applications. The
applications
applications menu could look like this: Program Development System go
Announcements are internal messages, directed toward the field from Regions
and HQ. The home page shows the three latest announcements with a link to
Messages from the Regional Managing Directors
Regional Calendars more, looking possibly like this:
Regional and Program Profiles
Regional News, Announcements, and Accomplishments
Special Olympics launches multi-lingual extranet to address needs of Programs
Contribute your best practices to our new kn owledge management system Switch to Edit Mode
Quarterly reports due to regional managing directo rs by April 7, 2003
more... So long as the user has security privileges, the system will
expose a link allowing him to enter the edit mode. switch to edit mode
Navigation on Every Page
Certain items appear throughout the site. A global \"navigation bar\" includes five
items on the home page: Contacts, Around the World, Knowledge Base, User
Guide, and Search. On internal pages, there is always a link to \"home.\" Global
items could be rendered:
User Guide + Contacts + Around the World + Knowledge Base + Search: go
items italicized must appear above the fold
The layout and design depicted herein represents Dan Brown
7 March 2002 Tisani Consulting, LLC
dan.brown@tisani.com
content priorities only and should not be construed
as actual layout and design. Final product may home page contents Special Olympics/
Version 1.1
6400 Goldsboro Rd.
Bethesda, MD 20817
vary. Extranet
16

List Template
1 XXXXXX > XXXXXX > XXXXXX
• The LIST TEMPLATE provides a page structure for
2 3 XXX | XXX | XXX displaying lists of objects--campaigns, pages, or alerts.
4 • Each campaign has lists dedicated to pages and alerts.
XXXXXXXXX XXX | XXX | XXX
• Each campaign also has a \"watchlist\", rendered in the same
5 XXXXXXXXX XXX | XXX | XXX
template, that combines both pages and alerts.
XXXXXXXXX XXX | XXX | XXX
XXXXXXXXX XXX | XXX | XXX • Users may add pages and alerts to the watchlist, though a
XXXXXXXXX XXX | XXX | XXX campaign's watchlist is shared by all users of the system.
XXXXXXXXX XXX | XXX | XXX
XXXXXXXXX XXX | XXX | XXX
XXXXXXXXX XXX | XXX | XXX
List of Campaigns for a Client List of Pages in a Campaign List of Alerts in a Campaign Use
1. Context [Client name] [Client name] [Campaign name] [Client name] [Campaign name] [C
2. Tab Set Active By Label By Host All By Visits By Date By Label All By Date By Label All NO
3. Commands Compare Export Label Compare Export Label Compare Export Label C
4. Tab Options
By Label Filter by label: select label... By Date Show pages launched on: mm/dd/yyyy By Date Show alerts launched on: mm/dd/yyyy
NO
By Host Filter by host: select host... By Label Filter by label: select label... By Label Filter by label: select label...
5. List Entry [Name of Campaign] watch list alerts list page list [launch date] [Name of Page] add to/remove from watchlist [launch date] [Name of Alert] add to/remove from watchlist
[page title] [alert title] O
[list of labels] [list of labels]
17

List Template
1 XXXXXX > XXXXXX > XXXXXX • The LIST TEMPLATE provides a page structure for
2 3 XXX | XXX | XXX displaying lists of objects--campaigns, pages, or alerts.
4 • Each campaign has lists dedicated to pages and alerts.
XXXXXXXXX XXX | XXX | XXX
• Each campaign also has a \"watchlist\", rendered in the s
5 XXXXXXXXX XXX | XXX | XXX
template, that combines both pages and alerts.
XXXXXXXXX XXX | XXX | XXX
XXXXXXXXX XXX | XXX | XXX • Users may add pages and alerts to the watchlist, thoug
XXXXXXXXX XXX | XXX | XXX campaign's watchlist is shared by all users of the system
XXXXXXXXX XXX | XXX | XXX
XXXXXXXXX XXX | XXX | XXX
XXXXXXXXX XXX | XXX | XXX
List of Campaigns for a Client List of Pages in a Campaign
1. Context [Client name] [Client name] [Campaign name]
2. Tab Set Active By Label By Host All By Visits By Date By Label All
3. Commands Compare Export Label Compare Export Label
4. Tab Options
By Label Filter by label: select label... By Date Show pages launched on: mm/dd/yyyy
By Host Filter by host: select host... By Label Filter by label: select label...
5. List Entry [Name of Campaign] watch list alerts list page list [launch date] [Name of Page] add to/remove from watchl
[page title]
18
[list of labels]

List Template
1 XXXXXX > XXXXXX > XXXXXX
• The LIST TEMPLATE provides a page structure for
Priority
2 3 XXX | XXX | XXX displaying lists of objects--campaigns, pages, or alerts.
4 • Each campaign has lists dedicated to pages and alerts.
XXXXXXXXX XXX | XXX | XXX
• Each campaign also has a \"watchlist\", rendered in the same
5 XXXXXXXXX XXX | XXX | XXX
template, that combines both pages and alerts.
XXXXXXXXX XXX | XXX | XXX
XXXXXXXXX XXX | XXX | XXX • Users may add pages and alerts to the watchlist, though a
XXXXXXXXX XXX | XXX | XXX campaign's watchlist is shared by all users of the system.
XXXXXXXXX XXX | XXX | XXX
XXXXXXXXX XXX | XXX | XXX
XXXXXXXXX XXX | XXX | XXX
List of Campaigns for a Client List of Pages in a Campaign List of Alerts in a Campaign User-De ned Watchlist for Campaign
1. Context [Client name] [Client name] [Campaign name] [Client name] [Campaign name] [Client name] Watchlist
2. Tab Set Active By Label By Host All By Visits By Date By Label All By Date By Label All NONE
3. Commands Compare Export Label Compare Export Label Compare Export Label Compare Export Label
4. Tab Options
By Label Filter by label: select label... By Date Show pages launched on: mm/dd/yyyy By Date Show alerts launched on: mm/dd/yyyy
NONE
By Host Filter by host: select host... By Label Filter by label: select label... By Label Filter by label: select label...
5. List Entry [Name of Campaign] watch list alerts list page list [launch date] [Name of Page] add to/remove from watchlist [launch date] [Name of Alert] add to/remove from watchlist [launch date] [Name of Item] remove from watchlist
[page title] [alert title] OR [item title]
[list of labels] [list of labels] [list of labels]
Elements client:
project:
document:
Grassroots Enterprises
Reports Module Redesign
Speci cation
prepared by:
date:
version:
Dan Brown
Thu Feb 22 2007
1.0 Page 4 of 5
19

List Template
1 XXXXXX > XXXXXX > XXXXXX
• The LIST TEMPLATE provides a page structure for
Priority
2 3 XXX | XXX | XXX displaying lists of objects--campaigns, pages, or alerts.
4 • Each campaign has lists dedicated to pages and alerts.
XXXXXXXXX XXX | XXX | XXX
• Each campaign also has a \"watchlist\", rendered in the same
5 XXXXXXXXX XXX | XXX | XXX
template, that combines both pages and alerts.
XXXXXXXXX XXX | XXX | XXX
XXXXXXXXX XXX | XXX | XXX • Users may add pages and alerts to the watchlist, though a
XXXXXXXXX XXX | XXX | XXX campaign's watchlist is shared by all users of the system.
XXXXXXXXX XXX | XXX | XXX
XXXXXXXXX XXX | XXX | XXX
XXXXXXXXX XXX | XXX | XXX
List of Campaigns for a Client List of Pages in a Campaign List of Alerts in a Campaign User-De ned Watchlist for Campaign
1. Context [Client name] [Client name] [Campaign name] [Client name] [Campaign name] [Client name] Watchlist
2. Tab Set Active By Label By Host All By Visits By Date By Label All By Date By Label All NONE
Variety
3. Commands Compare Export Label Compare Export Label Compare Export Label Compare Export Label
4. Tab Options
By Label Filter by label: select label... By Date Show pages launched on: mm/dd/yyyy By Date Show alerts launched on: mm/dd/yyyy
NONE
By Host Filter by host: select host... By Label Filter by label: select label... By Label Filter by label: select label...
5. List Entry [Name of Campaign] watch list alerts list page list [launch date] [Name of Page] add to/remove from watchlist [launch date] [Name of Alert] add to/remove from watchlist [launch date] [Name of Item] remove from watchlist
[page title] [alert title] OR [item title]
[list of labels] [list of labels] [list of labels]
Elements client:
project:
document:
Grassroots Enterprises
Reports Module Redesign
Speci cation
prepared by:
date:
version:
Dan Brown
Thu Feb 22 2007
1.0 Page 4 of 5
20

• Unclear
• Incomplete
• Inappropriate
21

• Unclear
Complex ideas vs. Context-sensitive audience
• Incomplete
Product conception vs. Required detail
• Inappropriate
Perceived need vs. Actual need
22

3. Strategies for Success
Or, things you could try (success not guaranteed)

• Personas
• Site Maps
• Wireframes
24

• Unclear
Not how we’re used to looking at audience.
• Incomplete
Can’t represent range of people’s needs.
• Inappropriate
Not useful design tool.
25

An Alternative:
Representing User
Behaviors as Scales
26

Suspendisse id velit vitae ligula
consectetuer adipiscing elit.
volutpat condimentum.
Morbi commodo, ipsum sed
Project Name // User Research pharetra gravida, orci magna IMMERSION Aliquam erat volutpat. Sed quis
velit. Nulla facilisi. Nulla libero.
User Pro le and Sample Personas rhoncus neque, id pulvinar odio
Vivamus pharetra posuere.
lorem non turpis.
Dimensions of a Our Users
Lorem ipsum dolor sit amet,
Suspendisse id velit vitae ligula Quisque facilisis erat a dui.
consectetuer adipiscing elit.
Nam consecer. condimentum.
volutpat Sed aliquam,
Morbi commodo, ipsum sed
pharetra gravida, orci magna IMMERSION Aliquam erat volutpat. Sed quis Nam malesuada ornare dolor.
rhoncus neque, id pulvinar odio nunc egetVivamus pharetra posuere.
euismod, lectus nunc
velit. Nulla facilisi. Nulla libero.
Cras gravida, diam sit amet
LOYALTY
lorem non turpis.
ullamcorper orci, fermentum
Quisque facilisis erat a dui. rhoncus ornare, erat elit
Nam consecer. Sed aliquam, bibendum malesuada ornare dolor.
Nam enim nibh eget
nunc eget euismod, lectus nunc
Cras gravida, diam sit amet consectetuer erat, id egestas
ullamcorper orci, fermentum LOYALTY ipsum. Donec porttitor ligula .
rhoncus ornare, erat elit
bibendum enim nibh eget
ipsum. Donec porttitor ligula .
consectetuer erat, id egestas pede nibh eget odio.
pede nibh eget odio.
Nullam egestas feugiat felis.
Aliquam iaculis. Fusce et ipsum
et nulla tristique facilisis. Donec
Integer adipiscing semper
Nullam egestas feugiat felis.
eget sem sit amet ligula viverra ENVIRONMENT Aliquam iaculis. Fusce et ipsum
ligula. Nunc molestie, nisl sit
gravida.
amet cursus convallis, sapien
Integer adipiscing semper
et nulla tristique facilisis. Donec
lectus pretium metus,
eget sem sit amet ligula viverra
ENVIRONMENT ligula. Nunc molestie, nisl sit
Quisque aliquet, quam
Proin at eros non eros
elementum condntum feugiat, amet cursus convallis, sapien
adipiscing mollis. Donec
BREADTH gravida. tellus odio consectetuer wisi,
semper turpis sed diam. Sed
consequat ligula nec tortor.
vel nonummy sem neque in elit. lectus pretium metus,
Curabitur eleifend wisi iaculis.
Integer adipiscing semper
Curabitur eleifend wisi iaculis
ligula. Nunc molestie, nisl sit
ipsum. Pelleque habitant morbi
amet cursus convallis, sapien COMMITMENT tristique senectus et netus et Quisque aliquet, quam
lectus pretium metus, vitae Proin at eros non eros
malesuada fames ac turpis.
pretium enim wisi id lectus. elementum condntum feugiat,
adipiscing mollis. Donec
Sample Personas semper turpis sed diam. Sed BREADTH tellus odio consectetuer wisi,
Questions for User Research vel nonummy sem neque in elit.
consequat eros non eros adipiscingtortor.
• Proin at ligula nec mollis.
The Working Mom
• Nulla facilisi. In vel sem. Morbi id
Donec semper turpis sed diam. Curabitur eleifend wisi iaculis.
• Proin at eros non eros adipiscing mollis.
urna in diam dignissim feugiat.
Donec semper turpis sed diam.
• Proin molestie tortor eu velit.
Aliquam erat volutpat. • Proin at eros non eros adipiscing mollis.
• Nullam ultrices, diam tempus The Busy Manager Donec semper turpis sed diam.
vulputate egestas, eros pede varius
leo, sed imperdiet lectus est ornare IntegerProin atsemper turpis sed diam. mollis.
•
adipiscing semper
eros non eros adipiscing
Curabitur eleifend wisi iaculis
Donec
• Lorem ipsum dolor sit amet, • Nulla facilisi. In vel sem. Morbi id • Proin at eros non eros adipiscing mollis.
consectetuer adipiscing elit. urna in diam dignissim feugiat.
ligula. Nunc molestie, nisl sit
Donec semper turpis sed diam.
• Proin molestie tortor eu velit.
• Proin at eros non eros adipiscing mollis. ipsum. Pelleque habitant morbi
amet cursus convallis,mollis. sapien COMMITMENT
Aliquam erat volutpat.
The \"Sick of Her Day-Job\" Donec semper turpis sed diam.
• Nullam ultrices, diam tempus
vulputate egestas, eros pede varius • Proin at eros non eros adipiscing
tristique senectus et netus et
lectus pretium eros adipiscing mollis.
leo, sed imperdiet lectus est ornare
metus, vitae
Donec semper turpis sed diam.
• Nulla facilisi. In vel sem. Morbi id
urna in diam dignissim feugiat.
• Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
• Proin at eros non
Donec semper turpis sed diam. malesuada fames ac turpis.
• Proin molestie tortor eu velit.
Aliquam erat volutpat.
pretium enim wisi id lectus.
• Proin at eros non eros adipiscing mollis.
Donec semper turpis sed diam.
• Nullam ultrices, diam tempus
vulputate egestas, eros pede varius • Proin at eros non eros adipiscing mollis.
leo, sed imperdiet lectus est ornare Donec semper turpis sed diam.
• Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
prepared by:
date:
Dan Brown
[DATE] Sample Personas
Questions for User Research
version: 1.0
The Working Mom
• Proin at eros non eros adipiscing mollis.
Donec semper turpis sed diam.
• Nulla facilisi. In vel sem. Morbi id
• Proin at eros non eros adipiscing mollis.
27
urna in diam dignissim feugiat.
Donec semper turpis sed diam.

• Unclear
Too many boxes make it difficult to read.
• Incomplete
Can’t represent every page on the site.
• Inappropriate
Not an accurate picture of experience.
28

An Alternative:
Structures at a Higher
Level of Abstraction
29

is
program associated coach
with
is
associated which
coaches
with supports
is
family supported athlete plays sport
by
Degrees of Special Olympics
are connected through has friend featured
participates competed
who became in
in in
volunteer
who leads
initiative sporting who helped
sponsor
local event fund
who encouraged who helps who then which which
friend to become with helped with initiated contacted
volunteer fundraising
event
30

Bidding Events include Training, Mock Auction, Live Auction.
Events inherit most properties from the main auction object.
RESULTS
ROUNDS
ITEMS
BIDDING
EVENT
EVENT
EVENT
RESULTS
BIDDERS
USER POOL
ITEM
MASTER
LIST
AUCTION
CONTACTS
BIDDERS
MASTER
LIST
ITEM
DEFINITION
APPLICATION
EVENT
EVENT
SCHEDULE
AUCTION EVENT
QUALIFYING
RULES
BIDDING SUPPORTING
TECH BIDDERS
BIDDERS
MATERIALS
PROCESSING
BIDDERS
GUIDE
PUBLIC
NOTICES TRAINING
MATERIALS
Auction Manager Redesign Version: 0.1 31
Last
Initial Concept & Wireframes Prepared by: Dan Bro

• Unclear
Doesn’t effectively depict behaviors.
• Incomplete
Can’t represent every view of the site.
• Inappropriate
Too “page-oriented”.
32

An Alternative:
Modularization
33

34

component
35

component
36

view
component
37

view
component
1.0 Page title
2
3
1
1 xxxxxxxxxxxxx 2 xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
4 5 xxxxxxxxxxxxx xxxxxxxxxxxxx
3 xxxxxxxxxxxxx 4 xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
6 5 xxxxxxxxxxxxx 6 xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
38

view
component
1.0 Page title
2
3
1
1 xxxxxxxxxxxxx 2 xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
4 5 xxxxxxxxxxxxx xxxxxxxxxxxxx
3 xxxxxxxxxxxxx A. 4Basic Flow
xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
6 5 xxxxxxxxxxxxx 6 xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
39

view
component
P01 Component Name
xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxx xx
xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx
1.0 Page title
xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxx xxxxxxxx
2
3
xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx 1 xxxxxxxxxxxxx 2 xxxxxxxxxxxxx
xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx
1
xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxx 4 xxxxxxxxxxxxxxxxx
5 xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx 3 xxxxxxxxxxxxx A. 4Basic Flow
xxxxxxxxxxxxx
xxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
6 5 xxxxxxxxxxxxx 6 xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
40

view
component
desi
doc gn
ume
ntat
ion
P01 Component Name
xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxx xx
xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx
1.0 Page title
xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxx xxxxxxxx
2
3
xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx
1
1
s
xxxxxxxxxxxxx
xxxxxxxxxxxxx
2 xxxxxxxxxxxxx
xxxxxxxxxxxxx
xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxx 4 xxxxxxxxxxxxxxxxx
5 xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx 3 xxxxxxxxxxxxx A. 4Basic Flow
xxxxxxxxxxxxx
xxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
6 5 xxxxxxxxxxxxx 6 xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxx
41

Thanks!
email: dan@eightshapes.com
visit: www.eightshapes.com
book: www.communicatingdesign.com