From Card Sort to Redesigned Intranet Site: A Success Story
•Descargar como PPT, PDF•
6 recomendaciones•2,417 vistas
The document describes how Measured Progress redesigned their intranet site based on card sorting sessions with employees. Card sorting helped uncover employees' mental models of site organization and common groupings. This informed recommendations for a new navigational hierarchy of 7 primary categories that were 3-4 levels deep. The redesigned site unified two previous sites and improved findability based on employee feedback. Employees reported that the new site made navigation and finding information much easier.
Recomendados
Recomendados
Más contenido relacionado
Similar a From Card Sort to Redesigned Intranet Site: A Success Story
Similar a From Card Sort to Redesigned Intranet Site: A Success Story (20)
Último
Último (20)
From Card Sort to Redesigned Intranet Site: A Success Story
- 1. From Card Sort to Redesigned Intranet: A Success Story Elke Oberg, Electronic Marketing Coordinator, Measured Progress Bob Thomas, Manager of User Experience, Liberty Mutual Katelyn Thompson, Usability Analyst, Staples June 9, 2010
- 2. Scope, Objectives, and Goals Measured Progress, a not-for- profit located in Dover, NH, is a leading developer of educational testing and assessment programs Company Mission “Our mission is to improve teaching and learning by providing customized assessment products and educational services.” Objective Make it easier for Measured Progress employees to find information on the intranet, i.e., to “lead with the need.”
- 3. Home HR Policies & Procedures The goal was to unite the separate Insite and HR Policies and Procedures sites, each created with different software applications. Participants commented they would like to use Search and Site Map features. These were available only on the home page.
- 4. InService InForm “You’d think the [Accident and Injury Report] form is under InForm.” InService > HR > Policy Guide > General Administration > Operational Policies > Safety > Accident Reporting and Investigation Plan > [Text… Scroll Down Page] … Accident Report Form (7 clicks) “A person could bleed to death before the form is even located!”
- 5. Original Navigational Hierarchy Insite: HR Policies and Procedures: broad and shallow narrow and deep Job Request Form: Safety Form: InForm > Job Request Forms > Form (2 clicks) InService > HR > Policy Guide > General Administration > Operational Policies > Safety > Accident Reporting and Investigation Plan > [Text] … Accident Report Form (7 clicks)
- 6. Original Navigational Hierarchy I always disliked the confusing, supposedly clever navigation scheme on the old site. It was a guessing game to find content. I never remembered what was where and always had to start the hunt all over. —Mary, Measured Progress Employee
- 7. Card Sorts “Card sorting is excellent for situations where you want the users’ mental model to drive the information architecture of the product.” —Courage & Baxter (2005), “Understanding Your Users” “Open sorts are used for discovery. Closed sorts are used for validation.” —Rosenfeld & Morville (2006), “Information Architecture for the World Wide Web”
- 8. Card Sorts Users Recruited users who had used the intranet site for a long time, as well as new hires Methodology Open card sort Analysis More information to sift through with open card sorts Dendrograms to see common groupings
- 9. Methodology for the Card Sort Created and ran an open card sort with 15 Measured Progress employees, including follow-up interviews Analyzed quantitative and qualitative data Made recommendations for a new navigational hierarchy and structure
- 10. # Card name Open Card Sort 1 2 3 Corporate Graphics Floor Plans Facilities and Locations 4 Contacts 5 Employee Directory 6 Corporate Travel 7 Glossary and Acronyms 8 Mission and Philosophy 9 Safety 10 Reimbursement 11 Payroll 12 Purchasing and Requisitions 13 Workplace Policies 14 Hiring and Employment 15 Benefits 16 Work Schedules 17 Personnel Records 18 Shipping and Distribution 19 Printing and Copying 20 Helpdesk 21 Forms 22 Computer and Networks 23 Corporate Marketing and Branding 24 Information Technology 25 Phone and Conferencing 26 Contracts 27 Wellness Programs 28 Diversity 29 In/Out Board 30 News and Announcements 31 Photo Gallery 32 Corporate Events 33 Department Sites 34 For New Employees 35 Workplace Conduct 36 Recognition and Accomplishments
- 11. Participant Demographics All 15 participants had experience using Insite. Participants from 9 different departments 4 men and 11 women P# Gender Department Used Insite? Hours Per Week Web Browser for Insite? What Do You Do on a Computer? 0-5 6-10 IE Firefox Word processing Emailing Web Browsing 1 F Testing Services Y x x x x x 2 F Human Resources Y x x x x 3 M Client Services Y x x x x x 4 F Human Resources Y x x x x x 5 F Testing Services Y x x x x x 6 F Office of Technology Y x x x x x 7 F Finance Y x x x x x 8 M Testing Services Y x x x x x 9 F Client Services Y x x x x x 10 F Operational Services Y x x x x x 11 M Scoring Y x x x x x 12 F Process Coordination Y x x x x x 13 F Marketing Y x x x x x 14 F Client Services Y x x x x x 15 M Marketing Y x x x x x
- 12. Sample Open Card Sort Results: Major Navigation Categories WHAT I WANT TO USE Home page Contracts Forms WHAT I WANT TO REFER TO Department sites Employee directory Working at Measured Progress Helpdesk
- 13. Analysis of Results We began to see trends after five card sorts on the first day. Main categories among first five participants
- 14. Analysis of Results We started with 106 original categories from all 15 participants, and applied consistent naming conventions. Standardized categories derived from original categories
- 15. Analysis of Results Second, we combined similar standardized categories and arrived at a total of 13 standardized categories. Final list of 13 standardized categories 0.67
- 16. Dendrograph (Tree Diagram) Trying to see how frequently participants put two cards together in the same group
- 17. Analysis of Results Mapping the dendrogram groupings to primary and secondary navigation areas
- 18. Analysis of Results “Mental image the user forms to understand how software works and how to operate it” —Arnowitz et al (2007), “Effective Prototyping for Software Makers” In the case of Insite, many participants in our card sorts could not express a mental model of the website beyond the use of “In” headings. But many did express their mental model of the ideal Measured Progress intranet: “There’s stuff there that people need to do their jobs. They need a reference library for working at the company . . . a big bookshelf of benefits and other [information].”
- 19. Analysis of Results Use a navigation hierarchy of medium depth and breadth Use a primary navigation hierarchy of no more than 8 or 9 categories Go 3 or 4 levels deep Put search at the top of every page Put site map link on every page
- 20. Recommendations
- 21. Design of the New Site
- 22. Where I Didn’t Listen to Bob Three-column design on second-level pages Third-level sub-navigation Home on main navigation bar Search at top right of page
- 23. Employees’ Reactions . . . terrific and very user-friendly. And it’s easy on the eyes! —Denise . . . navigation makes so much more sense. If I need to look at an HR policy or find the manager of a particular contract, it’s just a couple of clicks away. You can view company newsletters from 2001, as well as articles about what the future might hold for our industry—it’s all there. —Laura . . . now they are grouped and organized in a logical way. Another great improvement is the search feature. If I need to find anything, I can type it in! —Heather Being able to find what I need through multiple channel makes Insite easy to use. —Paul
- 25. The Human Resources Section
- 26. The Human Resources Section
- 27. The New Help Section
- 28. The New Help Section
- 29. What We Kept Quick access to the Employee Directory, the section employees use the most Corporate colors Anything that humanizes the user experience: Photo of the week Kids’ art Photo gallery
- 31. Conclusions Card sort was a success because: We involved key stakeholders from the start who clearly saw the benefits of the corporate intranet and wanted to improve the site for employees. We recruited participants from all areas of the company. We were able to understand employees’ mental models (“a reference library,” “a bookshelf”). We discovered how employees wanted items grouped together and what labels made the most sense to them. The bottom line: Measured Progress employees created the IA for their intranet.
- 32. Conclusions Redesign of the site was a success because: We chose simplicity over cuteness (the “In” metaphor). We unified two separate sites (Insite, HR Policies and Procedures) that were created with two different applications. We built out a navigational hierarchy that replaced a broad and shallow architecture (10 categories, 1-2 levels deep) with an architecture of medium depth and breadth (7 categories, 3-4 levels deep). The bottom line: Employees can find what they need easily and quickly.
- 33. Thank You Questions? Elke Oberg, Electronic Marketing Coordinator, Measured Progress oberg.elke@measuredprogress.org Bob Thomas, Manager of User Experience, Liberty Mutual robertl.thomas@libertymutual.com
Notas del editor
- A case study: describing how we moved an intranet that wasn’t working for its employees into a successful website
- Measured Progress is a not-for-profit educational testing and assessment company. The company bids on contracts with different states in the U.S. to write tests and assessments that meet legislative requirements of No Child Left Behind Act: to develop academic standards in reading and math. So they work on such projects as MCAS in Massachusetts. They’re located in Dover N.H. have 400 employees – so a lot of internal people who need to access contracts, tests, and other documents for their different projects Objectives: lead with the need, to figure out how current employees want their information organized and what should be emphasized first Goals as stated by Pat Ross, Communications Manager at Measured Progress Redesign Insite, focusing on the navigation and organization (overall IA) Make the site usable: especially when it comes to finding things Make the site attractive and understandable to employees
- Insite was: Launched in July 2004 2 parts to the site, both built with diff. software ON LEFT Search box is only on home page Site map is only on home page Everything is yellow is NOT clickable What’s emphasized the most is the photo, not the info ON RIGHT Built with diff. software than page on left Built on Windows Explorermodel: can only open and close one subdirectory at a time So employees have to use trial and error methods to find info
- Insite mainly relies on bulleted lists. It lacks any secondary or third level navigation. So one employee and I were looking for the Accident & Injury Report form, because she’s responsible for filling them out at the company We had to go down 7 levels of the hierarchy to find the form: She finally said: “ A person could bleed to death before the form is even located!” So people need to use the site but it’s very difficult for them to find what they’re looking for
- Insite is broad and shallow 10 primary navigation categories, 1-2 levels deep No secondary or 3 rd level navigation HR Policies Procedures is narrow & deep 3 primary navigation categories (mission, general administration, HR) 4-8 levels deep Insite Job Request Form: InForm > Job Request Forms > Form (2 clicks) Policies and Procedures Safety Form: InService > HR > Policy Guide > General Administration > Operational Policies > Safety > Accident Reporting and Investigation Plan > [Text] … Accident Report Form (7 clicks)
- Mental model: the supposedly clever navigation scheme was the use of “In” to describe everything: Insite (the name of the site), InGeneral, InService, InForm, InPerson, and so on Take into account different types of users: employees like Mary who had tried to find documents on Insite but had either given up looking for them, or would like so many employees, call up Elke and ask where she should go on the site new hires who had to find things through trial and error
- A card sort seemed the best solution b/c we had 2 sites that needed to be unified, both that had grown too small for the additional information that kept getting added year in and year out, an IA that wasn’t working, …and we wanted to discover how employees – the principal users of the site – wanted their information organized We chose a open card sort b/c we wanted participants to tell us how they wanted the main categories of the site named (as opposed to us naming the categories for them)
- Users: we had users in house We recruited people who were very familiar with and frustrated with the site, as well as new employees who could compare Insite to their intranet at their previous company Recruited employees, b/c they were familiar with the language and terms used in education Analysis: you have more information to sort though with open card sorts b/c besides what we think of as the menu options in the navigation, you also have the names of the main navigation categories, and participants use different names to express the same concept (Our Company, About Us, About Our Company, and so on) tree diagram to see how frequently our participants put cards together in the same groups
- HOW WE CONDUCTED IT Create and run an open card sort with 15 MP employees, including follow-up interviews Jakob Nielsen and Tom Tullis recommend 15 participants in a card sort for the best results Analyze quantitative and qualitative data quantitative: Donna Maurer’s (UX expert in IA; written a book about card sorting): used her spreadsheet to organize the categories and generate correlation statistics IBM’s EZCalc to generate dendrographs Make recommendations for a new navigational hierarchy and structure
- Met with design team to determine the most important categories: which was based on analysis of the main categories of the website and what employees needed to get their jobs done We had 1 hour with each employee, including pre- and post-task interviews, so we also wanted to limit the # of cards; optimum numbers are between 30 and 75 PHYSICAL INSTEAD OF ONLINE CARD SORT We wrote the name of each of the main items on an index card. Shuffle the cards and give the deck to the participant. Have each participant read through all the cards and ask any questions about terms they don’t understand. Have participants sort the cards into piles, placing items that belong together in the same pile. Participants can make as many or as few piles as they want; some piles can be big, others small. Participants can use blank cards to write names of items they believe are missing. At the end, have participants write labels for each of the piles. OPEN CARD SORT with 36 cards Participants are creating IA and organization of the website for you
- 3 criteria in order or priority Participants who were familiar with the website (no learning curve; know the nomenclature) Recruit people from as many diff. Depts. as possible Get an equal number of men and women (came up short but was the least important of our 3 main criteria)
- Actionable items: info you need to access WHAT I WANT TO USE Home Page Contracts Forms Reference material: background info WHAT I WANT TO REFER TO Department Sites Employee Directory Working at Measured Progress Helpdesk
- Card sort over 5 days We began to see trends after the first day of testing (5 participants) Users were grouping categories in similar groups but with different names
- After all 15 card sorts were completed, we standardized the main categories. We gave categories “with similar names or concepts a consistent name” and combined “groups where participants used the same basic concept but a slightly different label.” —Maurer (2007), “Instructions for Use: Card Sort Analysis Spreadsheet” Then you standardize the categories by finding patterns in the labels people use: Facility Info/Where/Facilities/Logistics So you bubble up the info to provide a label that can apply to similar groupings, like HR Facilities and Locations: standardized category for 4 different labels
- Example: “Facilities & Locations.” 8 participants used this category. They put 23 cards into the “Facilities & Location” category (an average of ~3 cards per participant), and used 6 unique cards. It has an agreement number of 0.48. This means that about half - 48% - of participants put the same 3 cards in this category. Higher agreement numbers are better and let you know that more participants used this category.
- Used EZCalc and USort to generate dendrographs. Beta product from IBM that’s no longer supported. But wanted something I could use quickly and that was free. In this case, we had 36 cards per participant and it worked. (I just did another card sort with 74 cards and the program crashed). The green threshold line (30%) indicates lower thresholds (users were more likely to pair any two cards together): Like corporate travel and reimbursement; shipping and distribution, and printing and copying while the pink threshold line (70%) indicates higher thresholds (users were less likely to pair them together): like For New Employees and other groupings: see HR Policies So you’re trying to look at how frequently users put two cards together in the same group. Take the results with a grain of salt but the items seem to group together Most important take-away: participants wanted to divide the HR Policies from the HR Procedures. They were really interested in the Policies having to do with payback and pay outs: payroll, purchasing and requisitions, corporate travel, reimbursement Wanted that separated out from HR Policies: wellness programs, diversity, safety, work schedules, personnel records, etc. THIS MAKES SENSE: what forms you need to get your job done vs. what documentation you need to reference
- 9 major categories, which allows for scalability Can put new pages under at least one of the major categories
- ALSO RELIED ON QUALITATIVE DATA (USER COMMENTS) Example: many users of Amazon.com have probably formed a mental model of a department store; this is a case where conceptual and mental models match. QUALITATIVE DATA Mental model in the current IA of Insite: metaphor of including “In” at the front of each of the labels – InGeneral, InService, InPerson – a fabricated language metaphor that didn’t help users in their wayfinding NEW: they saw it as a reference library, with a big bookshelf of benefits and other information. This mental model helped us drive the new IA of the site
- Participants wanted easier access to information using primary, secondary, and third-level navigation Participants wanted a consistent navigational structure, i.e., one that didn’t change. (Search, Site Map) Participants wanted “HR Policies and Procedures” broken into two separate categories: HR Forms (such as “Corporate Travel,” “Payroll,” “Requisitions”) HR Policies (such as “Diversity,” “Safety,” “Workplace Conduct”) HR Forms: reimbursement info requiring action HR Policies: reference material requiring comprehension or application Use a navigation hierarchy of medium depth and breadth Use a primary navigation hierarchy of no more than 8 or 9 categories Go 3 or 4 levels deep As recommended in the Polar Bear book on Information Architecture (Rosenfield and Morville)
- A SECOND LEVEL PAGE Place the Insite logo in the upper left Add Measured Progress branding at the top: “It’s all about student learning. Period.” Add a Home category in the menu bar Add a menu bar with 8 categories: “Home,” “News & Events,” “Forms,” “Contracts,” “Departments,” “HR,” “Helpdesk,” “About Us” Add a “Search” box, which is attached to the menu bar Add “Contact Us” and “Site Map” links in the upper right Add a “Search Employee Directory” box, with a link to the “Employee Directory” Add a “Quick Links” box, which acts as a “Favorites” area Add secondary navigation on the left-hand side of the page, in this case HR Forms (such as “Benefits” and “Corporate Travel”) Add sub-menus for the secondary navigation, in this case HR Policies and Programs (such as “Compensation” and “Diversity”) Add new information and display it in the main area of the page, including updated “HR Forms” and “HR Policies and Programs” sections
- Main navigation bar at the top of each page Sub-navigation options Quick links on home page and in the footer Expanded navigational hierarchy: before 5 main categories, now 7 categories Designed wider: before 760 pixels, now 920 pixels
- Three-column design on second-level pages Third-level sub-navigation Home on main navigation bar Search at top right of page
- We implemented a page for each department, so each department feels represented Employees can find what each department does Departments can post information they want to post
- Formerly known as the Policy Guide run by separate software different look and feel different search engine and its own website. HR can still update the section on their own.
- Formerly known as the Policy Guide run by separate software, with a different look and feel, a different search engine and its own website. HR can still update the section on their own.
- The Help section is new and is organized by issues.
- Screenshot of highest level, with folder structure in the CMS, and that it’s a mirror of the navigation Content editors can find things quickly in the CMS. The hierarchy translated to the editing level. What it can do in regards to users Generates the side bar automatically
- ITERATIVE PROCESS The main issue with Insite: employees couldn’t find information, and couldn’t complete their work, because the site provides only first-level navigation. It’s missing secondary and contextual embedded navigation (Favorites). So this puts the burden on employees to find their own way thru the website (trial and error) The open card sort allowed users to group items together and create the labels they wanted – in a way that fit their mental model of a reference library…. And it allowed them to show how they wanted to navigate the website. Analysis showed that employees wanted simple, straightforward ways to get to information. MP: clearly sees benefits of their corporate intranet and wants to improve the site for its employees, putting users first BOTTOM LINE: this card sort enabled MP employees to create the IA for the site