Post on 26-Mar-2015
Information Architecture
Erika Lewis, James Wetherill, Paul Coyle, Vivien Lau
IDIA 630.085 Information Architecture
Dr. Nancy Kaplan
University of Baltimore, Spring 2009
Agenda
1. Overview
2. Business Goals
3. Current HPPBU Website
4. Strategy
i. Content Inventory
ii. Description
iii. Concept Model
iv. Mental Model
5. User Personas
6. New Design: Sitemap
7. Wireframes
8. Page Flow Comparison
9. Recommendations
10.Questions and Answers
3
1. Overview
• SAIC’s product is information:
employee development is critical.
need identified during bi-annual internal poll
• SAIC’s intranet contains development resources
these are scattered and not well-organized
time constraints on their use
• Objective – identify resources, and place them in context
encourage employee development
Build community
increase employee retention.
4
2. Business Goals
Challenge – create an information architecture that will:
Increase the capabilities of the HPPBU employee development website
Allow employees to maximize their use of the resources
Reflects SAIC’s commitment to employee development
5
3. Current HPPBU Home Page
6
4. Strategy - Content Inventory
7
4. Strategy Continued
The main features of the proposed information architecture:
• Reorganization of important links
Information within the business units area available for
customization
Focusing the users attention on the 4 main areas most
utilized on the SAIC site
• Consistency of terminology, design and navigation with
Quicklinks visible within a single page fold
• Collapsible menus have been used
8
4. Strategy – Concept Model
4. Strategy – Mental Model
Authors Selects
Sends
Collaborates
Learns About
Selects
Communicates
SocialNetworking
Recommends for
Rates for
9
10
AgeBetween 22 - 30
OccupationJunior Software Engineer
Education4-yr College
Computing and Web ExperienceExpert
Interest/ ActivitiesDaily Blog, Twitter, iPhone, Training Programs, Corporate Intranet
5. User Personas I
11
AgeBetween 50 - 65
OccupationSenior Project Manager
EducationMaster Degree
Computing and Web ExperienceBeginner/ Intermediate
Interest/ ActivitiesPhone, for “getting things done” that do not require a computer.; a strong interest in adoption of any tool which can make her business unit more productive
5. User Personas II
12
AgeBetween 30 - 45
OccupationBusiness Unit Manager
EducationMaster Degree
Computing and Web ExperienceIntermediate/ Expert
Interest/ ActivitiesOffice Events, Documents that are relevant to the current project.
5. User Personas III
13
6. New Design - Sitemap
14
7. Wireframes
User wants…
• an integrated, consistent interface
• view the summary of regularly performed tasks
• monitor information related to the job
• a hub to access various organization related
resources/data
• to personalize content
Sources: Human Factors Internal – The Science and Art of Effective Web and Application Design Class Material
15
7. Wireframes Continued
Structure and Navigation:
• Show the logical default state of the application
• Have primary tasks that are prominent
• Support frequency of use
• Be efficient. Support doing the task quickly or accurately
• Match the user’s metal model
• It behaves as the user expects
Sources: Human Factors Internal – The Science and Art of Effective Web and Application Design Class Material
7. Wireframes - High Level Concept
1
2
5
3
4
6
16
1 Branding/ Message
2 HPPBU’s Global
Navigation
3 Landing Page
Content
4 Quick Links
5 HPPBU Sub
Navigation
6 Feedback
7. Wireframes – HPPBU Home Page
17
1 Enable Access to the
Homepage1
2 Create Positive 1st
Impression
1. Tag line 2. Banner
3 Present All Major
Options on the
Homepage
2
2
4 Moderate White
Space
5 List of Contents
5
4
Sources: Bailey, R.W. 2000, from http://www.webusability.com; Chaparro B. S. 2009. from http://psychology.wichita.edu/surl/usabilitynews/111/eyetracking.asp; Nielsen, J. 2001, from http://www.useit.com/alertbox; Human Factors International Class Material
3
18
7. Wireframes – HPPBU Home Page – Mouse Over Quick Links
19
7. Wireframes – 2nd Level Page
20
7. Wireframes – 3rd Level Page
1 Breadcrumb
Navigation1
Sources: Bailey, B. (2003). from http://www.webusability.com/article_website_breadcrumbs_8_2003.htm
21
7. HPPBU Wireframes – Navigation
1 Global/ Primary
Navigation Menus in the
Left Panel
1
22
7. HPPBU Wireframes – Page Fold
Keep All
Important
Information
Above the
Page Fold
Sources: Human Factors Internal – The Science and Art of Effective Web and Application Design class material
8. Page Flow Comparison – Download Medical Claims Form
Current Page Flow New Design
1. Start: HPPBU Homepage 1. Start: HPPBU Homepage
2. Select Department 2. Select Human Resources (Under Forms/ Documents)
3. Select Human Resources 3. Select Medical Claims Form
4. Select Forms 4. Finish: Select PDF to download
5. Select SAIC Forms Library
6. Browse Options: A to Z, Topic, or Department
7. Select a Letter
8. Select Medical Claims Form
9. Finish: Select PDF to download
Total: 9 Steps Total: 4 Steps
23
24
8. Page Flow Comparison – Download SAIC University Course Catalog
Current Page Flow New Design
1. Start: HPPBU Homepage 1. Start: HPPBU Homepage
2. Select Employee Department 2. Select SAIC University (Forms/ Documents)
3. Select Training and Education 3. Select Course Catalog
4. Select SAIC University 4. Select Download Course Catalog
5. Select Course Catalog 5. Finish: Select PDF to download
6. Select Downloadable Course Catalog
7. Finish: Select PDF to download
Total: 7 Steps Total: 5 Steps
25
9. Recommendations
Training and Feedback:
• The need for an employee development web site was
identified through a bi-annual survey. Smaller scale interim
surveys of the user population should be conducted to
evaluate the acceptance of the employee development web
site, identifying opportunities for improvement.
• Establish a systematic program of site traffic analysis to
track how users are navigating through the site and identify
the resources that are most heavily used.
26
9. Recommendations Continued
Community Building
• Branding and Value of business unit
• Feedback
• Social Networking Applications
27
9. Recommendations Continued
User Centered Design
• Keep the global navigation menus in the left panel
• Enable access to the homepage
• Creative positive 1st impression
• Present all major options on the homepage
• User “Icons” to help user scan quickly, short phrases, and
sentences, & small readable paragraphs.
• Moderate white space
• List of Contents
• Use breadcrumb navigation on the third level page.
28
9. Recommendations Continued
• Users can only rate or tag specific pages within the
intranet.
• Make the employee profile interactive.
• Provide incentives such gifts or other bonuses to utilize
the site during and after work time.
Questions?