Information Architecture

Design Report

2015

LÁPIZ WEBSITE JHOSELINN PEREZ

1 | P a g e

Table of Contents 1. Executive Summary ........................................................................................................................ 3

2. Overview of Website Information Environment .............................................................................. 3

2.1. Website Business/Organizational Context .................................................................................. 3

2.2. Website Content....................................................................................................................... 4

2.2.1. Primary Type of Content ............................................................................................... 4

2.2.2. Subject Matter .............................................................................................................. 4

2.2.3. Document/Resource Type .............................................................................................. 4

2.2.4. Digital File Types............................................................................................................ 4

2.3. Website Users and User Model.................................................................................................. 4

2.4. User Personas........................................................................................................................... 5

3. Information Architecture Research Plan Overview of Website ......................................................... 6

3.1. Context Research...................................................................................................................... 6

3.1.1. Stakeholder Interviews .................................................................................................. 6

3.2. Content Research..................................................................................................................... 6

3.2.1. Content Inventory ......................................................................................................... 6

3.3. User Research .......................................................................................................................... 7

3.3.1. Card Sorting .................................................................................................................. 7

3.3.2. User Usability Testing .................................................................................................... 7

4. Competitive/Domain Analysis ........................................................................................................ 8

4.1. Website Organization Systems .................................................................................................. 8

4.2. Website Labeling Systems ...................................................................................................... 10

4.3. Website Navigation Systems and Conventions.......................................................................... 11

4.4. Website Search Functionality.................................................................................................. 12

5. Information Architecture Design Overview of Website .................................................................. 13

5.1. Website Organization Systems ................................................................................................ 13

5.2. Website Labeling Systems ...................................................................................................... 13

5.3. Website Navigation Systems and Conventions.......................................................................... 13

5.4. Website Search Functionality.................................................................................................. 14

2 | P a g e

5.5. Website Sitemap Diagram with Legend .................................................................................... 14

5.6. Website Wireframes for Web Browser Display, with Annotations .............................................. 15

5.6.1. Home Page.................................................................................................................. 15

5.6.2. Navigation Page........................................................................................................... 16

5.6.3. Destination Page ......................................................................................................... 17

5.7. Website Wireframes for Smartphone Browser Display, with Annotations .................................. 18

5.7.1. Portrait Orientation ..................................................................................................... 18

5.7.2. Landscape Orientation ................................................................................................. 18

3 | P a g e

1. Executive Summary

This report consists of details related to the development of the LÁPIZ website.

The second section is an overview of the website information environment. This includes an

explanation of what the website is meant to accomplish, details about the components that will make

up the website, what kind of users will make use of the website and what information they will be

seeking when visiting www.lapiz.org.

The third section is an overview of the research that was executed to help determine the information

architecture of the website. This consists of explanations of different methods and how they contribute

to the success of the development of the website information architecture strategy and design.

The fourth section consists of a domain analysis conducted on www.vdlf.org, a competitor website. This

is an evaluation of their organization, labeling, navigation and search systems. Through assessments, we

have learned what conventions to avoid and which to adopt in order to create a more fluid design for

the LÁPIZ website.

The fifth and final section of this report is an overview of the information architecture design of the

website. This includes the organization, labeling, navigation and search systems built into the LÁPIZ

website, as well as an annotated sitemap and different wireframes to visualize what the site will look

like in different display formats.

2. Overview of Website Information Environment

2.1 Website Business/Organizational Context

Client Organization: LÁPIZ | Client Website: www.lapiz.org

LÁPIZ (Spanish for “pencil”) strives to bring Latinos into the mainstream of American political

and socio-economic life through programs that provide better educational opportunities and

encourage participation in all aspects of society. LÁPIZ combines activism, educational outreach,

and litigation strategies to achieve positive socio-economic change for Latinos of all legal

statuses across the United States.

The purpose of www.lapiz.org is to facilitate access to resources beneficial to the Latino

community, such as scholarships, legal assistance, know-your-rights information and so on.

Additionally, the website aims to keep the community updated wi th information regarding

legislative changes that affect Latinos in the U.S. and information about LÁPIZ itself, such as

membership, fundraising drives and events open to the public.

4 | P a g e

2.2. Website Content

2.2.1. Primary Type of Content

Users come to the LÁPIZ website to obtain information about the organization itself-

how to join, fundraising, events, and educational programs offered. Users also go to the

organization website to become informed about the legal climate in the United States

and how it affects the Latino community. Additionally, users come to www.lapiz.org to

find resources that help them integrate into the American mainstream, such as

scholarships and know-your-rights tips. Services a user would seek out include legal

assistance and perks that come with a LÁPIZ membership, which could be obtained

through the website.

2.2.2. Subject Matter

The content of the LÁPIZ website is about assistance in a wide-range of issues for the

Latino community living in the United States, with a focus on education, as well as

content regarding the organization itself. A sample of keywords that characterize some

of the content found at www.lapiz.org are as follows: legal help, scholarships, laws,

rights, education, programs, college, rights, resources, membership, donate, events,

immigration, government, eligibility, FAFSA.

2.2.3. Document/Resource Types

Forms that constitute the primary website content are informational web pages, event

descriptions, video files, image files, litigation briefings, news articles, registration

forms, and transaction pages for donations/fundraising. Informational web pages

predominate the website content, as they contain the most important content that

users go to find (i.e. resource information, scholarships, etc.).

2.2.4. Digital File Types

The file types that constitute the content of the www.lapiz.org are as follows: HTML

webpages, PDF documents, JPEG images, PNG images, and MP4 files.

2.3. Website Users and User Model

Primary User Groups

LÁPIZ members

Prospective LÁPIZ members

Current high school students & parents

Current college students & parents

Prospective college students & parents

New Latino immigrants

5 | P a g e

Secondary User Groups

LÁPIZ staff

Grant providers

Donors

Latinos considering immigrating to the United States

Complementary User Groups

Activists

Members of the press

High school counselors

School financial aid offices

Potential Client User Groups

Legal permanent residents

Undocumented immigrants

Latinos with any civil legal issues

Non-Latino User Groups

Community members/allies

People interested in Latino issues

Non-Latino immigrants

2.4. User Personas

6 | P a g e

3. Information Architecture Research Plan Overview of Website

3.1. Context Research

3.1.1. Stakeholder Interviews

This research method involves engaging senior executives and management in an

interview setting in order to gain valuable insight about the state of the existing

information environment. Additionally, interviewees are asked to share their thoughts

on the future of the organization as a whole and its website; this information gives the

development team a framework to create a design that is compatible with this overall

vision.

3.2. Content Research

3.2.1. Content Inventory

This research method involves listing every single page within the website in a

document, usually a spreadsheet. The researcher is to include elaborate information

pertaining to each page, such as topics/keywords, link information, notes, and so on. In

terms of developing IA strategy and design, this process allows us to thoroughly describe

the available content on the website and where it can be found.

7 | P a g e

3.3. User Research

3.3.1. Card Sorting

This research method involves asking a user to sort a stack of cards into different piles

that make sense to them and label the piles with sticky notes, all while thinking out loud.

The cards are numbered and are all labeled with different categories, subcategories, and

content pertaining specifically to the business website. The researcher takes notes

during this process, then records the user-created labels and the information sorted into

each pile. This method gives us insight into users’ mental models, which allow us to

understand how users group and sort information and as such affects the website

strategy and design processes.

3.3.2. User Usability Testing

This research method involves conducting a test in which the researcher observes a

participant, who is a real life user, while they navigate the website and complete a list of

pre-determined tasks. The test begins with explaining how the test works to the user,

then asking the user questions about themselves in order to form an idea of what their

technical literacy is like. The user then navigates around the home page while informing

the researcher about their feelings in regards to the understandability and the page as a

whole. After a user navigates the home page, they are to perform a series of tasks while

thinking out loud; during this pivotal portion of the test, the researcher must carefully

watch and document the user’s reactions and thoughts. Once the tasks are completed,

the researcher must question the user about anything that happened to them while

taking the test in order to get a fuller picture of the user’s experience while engaging

with the website. These probing questions complete the test, after which the user is

both compensated and thanked for their time.

In order to maximize the usability of the LÁPIZ website, User Usability Testing must be

conducted before redesign begins, while redesign is occurring, and once prototypes of

the website redesign are available before launching. In terms of developing IA strategy

and design, this process allows us to determine real problems with site usability, which

is imperative to success, and make recommendations for improvements are deemed fit.

8 | P a g e

4. Competitive/Domain Analysis

Website: Voces de la Frontera | www.vdlf.org

4.1. Website Organization Systems

Primary top-down hierarchical organization structure also functions as the primary navigation of the site and is a mix based on Tasks (“Get Informed”, “Join Us”, “Contact Us”) and Topics (“Campaigns”, “Workers’ Center”, “About Us”, “May Day”); this is an ambiguous scheme. See Figure 1 (page 9|18) for hierarchical diagram of Voces de la Frontera’s site taxonomy.

Website includes a sitemap which can only be accessed by conducting a search f or the word “sitemap”. Sitemap does not match taxonomy that users encounter when browsing through the site.

Website is not database-driven. No signs of an advanced search function or the similar to support the ability to search and/or browse a database of content items.

Assessment of site top-down taxonomic organization Positives

o Amount of categories to select from is relatively small, makes usability less stressful for user.

o Breadcrumbs to show the user where they are within taxonomy. o Bright red color of the category fields and the stark white contrast of text makes is easy

for website user to find the primary taxonomy. Negatives

o Arrangement of overall organizational scheme within taxonomy is not logical. (Example: “About Us” not directly next to “Home”)

o “May Day” is its own category in the taxonomy, yet it is a yearly campaign so it should be a sub-category under “Campaigns”.

9 | P a g e

Figure 1● Hierarchical diagram of VDLF site’s primary taxonomy

10 | P a g e

4.2. Website Labeling Systems

Types of labeling systems present in site Contextual links embedded in “Upcoming Events” section of home page and in some

articles under the “Campaign” category of the navigation system. Headings are used as a pre-cursor to paragraphs of information and to separate

different widgets on the website. Navigation system choices at top of screen on home page and in lower right side of

“About Us” page. Index terms are used only for news articles/press releases posted to site . Icons are used to link Tasks within website and also to connect site users to affiliated

external websites.

Consistency within labeling systems

Aside from icons, all other types of labeling systems are consistent within their own styles; for instance, the headings and the text in the navigation system is all uppercase and lacking punctuation and the index terms and contextual text all follow conventional grammar/spelling rules.

There is no consistency in terms of presentation amongst the icons, as both sets differ from each other in terms of color, grouping, fonts and whitespace. There is consistency in the presentation of the navigation system, as every category is represented as white text in a red rectangle, all closely grouped together with no whitespace between the categories. There is also general consistency amongst the headings, the contextual text and the index terms.

There is no consistency in terms of syntax amongst any of the labeling systems, as some of the labels are noun-based and some are verb-based.

There is a general sense of consistency in terms of granularity, comprehensiveness and audience within the use of each labeling system, as they all are specific enough to understand what information they will lead the site user to, there is a dismal amount of noticeable gaps in the lists, and it is easy to decipher who the labels are intended for (i.e. “Membership” icon intended for a person interested in becoming a member or learning about the process).

User problems with labeling systems

The dark purple color used for the contextual links is too difficult to distinguish from the dark grey color used for paragraph text itself, which could make it hard for a website user to understand that they are able to click on the links.

Though for the most part granularity is consistent amongst all the labeling systems, it is slightly less consistent within the navigation system, as categories such as “May Day” do not lead a user to find information about how to be involved with the annual rally or where and when it would be- instead the user is routed to a donor recognition page.

There is no clear directory for where a user can find the index terms visible in the site, thus creating a usability issue because the user is not aware that they are even able to

11 | P a g e

use index terms nor that they exist unless they are already familiar with labeling systems and can find them in their non-descriptive placement.

4.3. Website Navigation Systems and Conventions

Presence of Different Navigation Systems Embedded

o Global navigation is present in website. o Local navigation is present in website. o Contextual navigation is present in website.

Supplemental o A sitemap is present in website, but user must use search function to find it. o Site Indexes not present in website. o Guides not present in website. o Search function is present in website.

Elements of Global Navigation in Site

Home page- Site ID/Logo (goes to home page when user clicks on it) Primary navigation (also known as “sections”) is the same as the first/top

level of the site taxonomy. Utility navigation at bottom of all pages in website (only 2 language options,

for the purpose of translating to intended viewer populations) Home button Footer navigation (“Contact Us” is the only active link, routes user to the

same “Contact Us” page visible in the primary navigation. On other pages-

Page names are prominent on every page but do not match navigation link as they do not link to anything, instead they are just static text.

“You are here” indicator is evident in the slight color change that shows user their current location in primary navigation

Breadcrumbs are also a part of the global navigation system in other pages of the website.

Local navigation, for the most part, coheres with the secondary and lower levels of the site taxonomy. The exceptions are the local navigation in the “About Us” and the “Join Us” pages.

Site includes all but one of the navigation conventions as explained by Steve Krug for home pages and lower-level pages. Site ID/Logo, primary navigation, utility navigation, search function, footer navigation, local navigation, “you are here” indicator and breadcrumbs are all present in the site. Page names that are prominent and frame the content are visible in all pages of the site; however they do not link to anything and as such they are the only element missing from the site that does not fall in line with Krug’s navigation conventions.

12 | P a g e

Assessment of site navigation systems Positives

o Breadcrumbs start off with “You are here:” which helps the user immediately understand the purpose of the breadcrumbs.

o Utility navigation gives users ability to easily translate page content into a language they are most familiar with, making website more usable for a variety of users.

o Site ID/Logo is large and clearly defined, allowing users to find it with ease. Negatives

o Local navigation can cause understandability issues for users as it is not always consistent with the primary site taxonomy.

o Footer navigation is not clearly defined, can cause findability issues as the user has no way to differentiate between what is an active link and what is just static text.

o “You are here” indicator dark red color is too similar to the red color already used in primary navigation, which could cause understandability issues for users with weak eyesight.

o Search box is placed at the middle-right side of the page, causing findability issues for the user as it is not immediately visible, instead a user must scroll down to look for the search box.

o Sitemap is difficult to locate and it overwhelms the user by providing excessive information (including “test” pages, in some instances), causing both findability and usability issues.

4.4. Website Search Functionality

The search capability of the Voces de la Frontera website is included in the global navigation present on every page of the site. It is presented consistently, always on the right side of the webpage, near the middle of the screen. Simple search is presented to the users under the “Search” heading as an input search box with a loupe icon encased within the box itself. There is no explicit “search” button, but the text “Search…” is present in the box.

The site does not allow limiting searches to specific sub-sites or search zones, nor does it include any advanced search functionality.

Search results are presented to users as a series of any content that includes the keywords typed in by the user into the search box. The results are sorted in order from newest content to oldest, by date (it is not clear whether it is date in which content was created or published); additionally, users do not have the option to change the sort order. The search results do not include any aspects of the integration of search and browse, nor do they include the ability to further refine initial search results. The search results include no descriptive components, but do include some representational components: title, date, and a snippet of the content’s text.

Assessment of site search systems Positives

o Search box is very simple and the text present in the box allows user to immediately understand the function of the box.

o The “Search” heading above the search box helps the user locate it on the webpage.

13 | P a g e

Negatives o Search box is placed at the middle-right side of the page, causing findability issues

for the user as it is not immediately visible, instead a user must scroll down to look for the search box.

o Users are not able to refine or sort search results, causing findability issues because the content they seek is buried in pages of results that are sometimes not even remotely related to what a user is seeking.

5. Information Architecture Design Overview of Website

*NOTE: Figures 1-3 in section 5.6.*

5.1. Website Organization Systems

Per the site map on page 3, information on the LÁPIZ website is organized and grouped together

by content type or call to action- for instance, membership information is under “Get Involved”

while the LÁPIZ Event Calendar is under the “Events” category. Content on each webpage is

separated into different areas through the use of lines to create different column-like areas

(Figures 1-3), whitespace, borders (Figure 2) or headings (Figure 3).

5.2. Website Labeling Systems

The labels used for the primary navigation menu categories are 1-3 word phrases that either

relate directly to the content, such as “Resources” or are action-based such as “Get Involved”.

As evidenced by Figure 2-3, every section has its own heading and every area within a section is

also labeled. Minor changes were made to labeling for the smartphone displays. The LÁPIZ

website is improving upon the Information Architecture systems of VDLF in labeling through the

use of consistent, logical labels that are visible multiple times on a page in order to clearly define

content boundaries.

5.3. Website Navigation Systems and Conventions

Like the competitor, the primary navigation bar of the LÁPIZ website is near the top of the pages

(see Figures 1-3) and there are “breadcrumbs” that helps a user have a sense of location within

the website at all times; unlike the competitor, the LÁPIZ website uses clear, contrasting color

for the page indicator so that user never has to think about what page they are on. Additionally,

the LÁPIZ website includes a local navigation sidebar menu with dropdown sub-menus on the

left side of the screen for every category page under the primary navigation bar. The VDLF

website does not clearly distinguish between what is clickable and what is not (utility links at the

bottom exactly resemble other static text on page); however, the utility links on the LÁPIZ

website are a bright blue color and are underlined so that the user immediately knows they are

clickable.

14 | P a g e

5.4. Website Search Functionality

The search function is a part of the global navigation of the LÁPIZ website. The search function

has been expanded to include an “advanced search” option, which allows a user to further

narrow their search query. As evident in Figures 1-3, the search box consistently appears in the

upper right corner of the web pages; this improves upon the placement of the search box on the

VDLF (competitor) website as this box is immediately visible, making it very easy for any user to

find.

5.5. Website Sitemap Diagram with Legend

15 | P a g e

5.6. Website Wireframes for Web Browser Display, with Annotations

5.6.1. Home Page

Figure 1- Wireframe of LÁPIZ Homepage

16 | P a g e

5.6.2. Navigation Page

Figure 2- Wireframe of Resources Navigation Page

17 | P a g e

5.6.3. Destination Page

Figure 3- Wireframe of DREAM Act Destination Page

18 | P a g e

5.7. Website Wireframes for Smartphone Browser Display, with Annotations

5.7.1. Portrait Orientation

Figure 4- Wireframe of Smartphone Screen

5.7.2. Landscape Orientation

Figure 5- Wireframe of Smartphone Screen II