The document contains a proposal for an eGroceries website that caters to elderly, senior, and disabled users. It includes a strategy overview, site map, and wireframes. The strategy improves on a competitor's design with an ambiguous organization scheme, more icons for navigation, and advanced search capabilities. Summaries of the information architecture include organization, navigation, labeling, and search systems. Wireframes show desktop and mobile views of the home page, interior pages, and an advanced search page.

1. 4
Dezirae N. Brown, Information Architect I
November 19, 2015
PROPOSAL FOR EGROCERIES WEBSITE
DESIGN
An e-commerce company
This report contains the information architecture design strategy
overview, sitemap diagram, wireframes for web browser display,
wireframes for smartphone display, and advanced search wireframe.

2. 2
IA DESIGN STRATEGY OVERVIEW
The information architecture design strategy for eGroceries caters to its three primary user
groups of elderly, senior citizen, and disabled persons under the Americans With
Disabilities Act (ADA). eGroceries’ design strategy improves upon the design strategy
implemented for one of its competitors, Whole Foods Market (WFM). These improvements
will be referenced throughout this overview. The following information architecture
systems will be discussed in this overview: organization systems, labeling systems,
navigation systems, and search systems.
Organization Systems
Organization systems facilitate the presentation of information to the user in a variety of
ways. For eGroceries, an ambiguous organization scheme should be implemented. This
organization scheme divides information into categories that subjectively disregards exact
definition. This scheme supports associative learning by means of the serendipitous mode of
information seeking by grouping items in intellectually meaningful ways. More specifically,
a hybrid organization scheme that combines a task-oriented scheme and topical scheme
should be utilized to highlight high-priority tasks sought by our user groups. Illustrations
and documentation of this scheme are displayed on page 4 of the Website Sitemap Diagram
and page 6 of the Website Wireframes for Web Browser Display. eGroceries should
primarily have a top-down approach organization structure for users to readily identify
content areas in a hierarchy. Illustrations and documentation of this structure is located on
page 4 of the Website Sitemap Diagram. The “Advanced Search” and “Start Shopping” web
pages are the only sections that will utilize a bottom-up approach which will pull from
metadata of grocery products. An illustration of the bottom-up approach is displayed on
page 9 of the Advanced Search Wireframe.
Navigation Systems
Navigation systems help users move through the content. The global navigation system,
which contains a header and footer, will appear on every web page. The local navigation
system will vary in form based on the content of a web page. Illustrations and
documentation of these systems are displayed on pages 5, 6, and 7 of Website Wireframes
for Web Browser Display. These illustrations also highlight how the sitemap is used as a
supplemental navigation system in the footer as a complimentary way of finding content
and completing tasks. Each web page will display both path and location breadcrumbs just
below the global navigation header. An illustration of breadcrumbs is located on page 7 of
Website Wireframes for Web Browser Display. In contrast, Whole Foods Market only
embedded path breadcrumbs on select web page domains.
Labeling Systems
Labeling systems describe categories, options, and links in language that is meaningful to
users. eGroceries should have a higher ratio of iconic labels to cater to our primary user

3. 3
groups. Simple visuals in place of text can facilitate navigation and accommodate various
learning disabilities. Illustrations and documentation of iconic labeling is displayed on
pages 5, 6, and 7 of Website Wireframes for Web Browser Display. Whole Foods Market’s
website was highly text-based. Icons and images were only used for grocery products, recipe
ratings, searching icons and drop down menus. Succinct headings should be placed at the
top-center of each central page area consistent in font style, size, and color. When
necessary, a hierarchical relationship between headings should be established. An
illustration of headings labeling is located on page 7 of the Destination Page Wireframe.
This illustration also highlights common navigational systems labels i.e. Search, Contact,
About, Home, etc. These must labels must remain consistent on each web page to help the
user build a sense of familiarity. Contextual link labels should be used minimally and
restricted to the policies, tech support, and Special Diets Blog sections of the website. WFM
incorporates numerous contextual links within single blog posts and their “Store
Departments” section. Index term labels will primarily be used within the “Start Shopping”
web page to facilitate grocery shopping by food type, brand, pack size, and expiration date.
Illustrations and documentation of index term labels is located on page 5 of Website
Wireframes for Web Browser Display.
Search Systems
Search systems allow users to search the content. The search utility is a part of the global
navigation. For our specific user groups it is important to have this feature in plain sight.
An illustration of search zones, filters, and fielded searching is located on page 9 of
Advanced Search Wireframe. When using advanced search, results will be presented in a
grid-like structure with images of the product in groups of 10 and sort by price, brand, and
expiration date to prevent overwhelming the user in case their query is vague. Only
representational content components such as title of product, price, brand, weight, and
expiration date will be displayed in results. Other buttons that will be displayed for each
results include “Add to Wish List” and Add to Shopping Cart.” In contrast to Whole Foods
Market, all the content on eGroceries’ website will be searchable through the search and
advanced search utilities. WFM only allowed advanced searching for food products and
recipes.

4. 4
WEBSITE SITEMAP DIAGRAM WITH LEGEND

5. 5
WEBSITE WIREFRAMES FOR WEB BROWSER DISPLAY, WITH ANNOTATIONS
Navigation Wireframe
All numbered areas
comprise global navigation,
present on each website
page.
This area includes these
primary utilities: Search,
Advanced Search, and Login.
The same background images
will also appear here in this
header. Once members log in,
a Shopping Cart utility will
appear on the right side of the
Login utility and Login will
change to Logout.
Site ID Logo will function as a
link to the home page. Tagline
may be place here if desired.
This area contains primary
navigation sections for the
site. These labels represent
half of the Level 1 site
taxonomy.
This area is the central page
area that will portray different
content.
This area is the Footer. It shall
contain these 3 items with
contextual links, copyright
information, sitemap, and
policy on privacy and
confidentiality.
1
1
2
3
2
3
4
4
5
5

6. 6
Home Page Wireframe
Every label button on this
website will have a roll-
over menu and a voice
activator. The voice
activator will only be heard
once button is clicked. This
is for the benefit of our
target audience, those
elderly or disabled
according to ADA.
Central page area that
contains an intro statement
about eGroceries, and
interactive labels with
images that represent the
other half of Level 1 site
taxonomy, unique to the
homepage.
These 5 local navigation
links in the central page area
will revert to a vertical menu
on the left side for other site
pages. These buttons will
portray collapse-expand of
secondary levels only.
Search utility will default to
all areas of the site. A
magnifying glass will be
used as the icon. Advanced
Search utility will have
several filters for facilitation.
1
1
2
3
3
2

7. 7
Destination Page Wireframe
WEBSITE WIREFRAMES FOR SMARTPHONE DISPLAY
Wireframe of lower-level
page for a specific event.
Breadcrumbs. These will
appear on every site page
below the Site ID Logo on
the left-hand side. This
reminds the user where they
are in the site hierarchy.
Underlined terms represent
contextual links.
You are here indicator.
Lighter shading should be
done for the last tab clicked
that led to displayed
content.
Local navigation. This
should always be situated
on the left-hand side of the
site page under the
breadcrumb.
Page name should always
be centered at the top within
the central page area.
Primary navigation buttons
will portray collapse-expand
of secondary levels only.
Date must be shown as
specials will change.
1
1
3
2 2
4
3
5
6
4
5
6

8. 8
WEBSITE WIREFRAMES FOR SMARTPHONE DISPLAY, WITH ANNOTATIONS
Home Page
1
2
1
The footer is only visible
when the user scrolls all
the way down to the
bottom of the page. All the
same footer contents in the
previous wireframes will
be visible with contextual
links.
This icon represents the
primary navigation sections
of the home page. When
selected, a rollover menu
will appear listing the same
sections in the previous
Home Page Wireframe.
On right hand side of the
global navigation header, a
search icon of a magnifying
glass will be present. The
login icon of a person will
only be visible when mobile
devices are in landscape
view.
The local navigation will be
the same on the home page
with the exception that there
will be no text labels under
the images, just the images
themselves for this
responsive design.
3
1
2
3

9. 9
ADVANCED SEARCH WIREFRAME