Beyond Wireframes from Voices That Matter (Oct 2007)

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

Slide 2: October 1 ? 995 2

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

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

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

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

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

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

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

Slide 10: ? 2. How Documents Fail Or, mistakes we make

Slide 11: • Unclear • Incomplete • Inappropriate 11

Slide 12: An Example: Abstracted Wireframes for Reporting Engine of CMS 12

Slide 13: 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

Slide 14: 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

Slide 15: 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

Slide 16: 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