2014

Alison Davidson

Website Design Dublin ©

3/24/2014

Wusteman Gadget’s IA Report

1

Executive Summary

This report provides the blueprint and wireframes and outlines the navigation, organisation,

and labelling for Website Design Dublin’s (WDD) Wusteman Gadget’s project. Wusteman

Gadget’s is a new ecommerce company that sells unique and interesting gadgets with a view to

expand into social networking on their website.

Our overall design approach was to personalise the website for the ‘Browser’, one of the

five ecommerce shopper types, because we felt that the user personas in our Personas &

Scenarios document meet this description. We chose a hybrid organisational structure that

begins at audience level and becomes task-based further down the hierarchy. Although we

used a hierarchical blueprint, all of the major task-based levels use hypertext to allow for

expansion. Our overriding purpose for navigation design was to keep space available for gadget

images, which we will do by using dropdown menus, simple vocabulary, and keeping

information on its own page rather than disseminated throughout.

Labels are to be kept consistent through use of a Glossary and language should be simple,

descriptive, and familiar to the users identified in the User Profiles document.

Key Recommendations

Overall structure is a hybrid model of task and audience-based.

This site will use a horizontal navigation bar with dropdown menus.

Mass dropdown menu from ‘Shop’ will contain a search bar within it to facilitate

usability and save space.

Once past the home page a breadcrumbs feature will appear to anticipate browser

back button timeout issues.

A hybrid of icons and words will be used; an icon should never be without a label.

All labels will be approachable, concise, and self-evident.

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

Figures ................................................................................................................................... 2

Tables .................................................................................................................................... 2

Blueprint ................................................................................................................................. 2

Wireframes ............................................................................................................................. 3

Organisation Structure ............................................................................................................ 5

Navigation Systems ................................................................................................................ 7

Labelling Systems .................................................................................................................. 9

2

Figures

Figure 1: Wusteman Gadget’s Site Blueprint

Figure 2: Wusteman Gadget’s Home

Figure 3: Wusteman Gadget’s Shop

Figure 4: Wusteman Gadget’s Social with Site Index

Figure 5: Hub & Spoke: Shop Categories

Figure 6: Amazon’s Mass Menu

Tables

Table 1: Labels

Blueprint

Figure 1: Wusteman Gadget’s Site Blueprint

3

Wireframes

Figure 2: Wusteman Gadget’s Home

4

Figure 3: Wusteman Gadget’s Shop

Figure 4: Wusteman Gadget’s Social with Site Index

5

Organisation Structure

Wusteman Gadget’s is a start up with big plans, it’s important to focus on their current needs

but also to lay the groundwork for future expansion. The organisational structure we’ve

planned out includes a ‘Social’ half of the site with discussion forums and a messaging/chat

function that will not be implemented until later. The organisational design of the ‘Shop’ is

influenced by a combination of large ecommerce sites such as Amazon and by small product

design sites such as Houzz and Dornob.

Recommendations

Overall structure is a hybrid model of task and audience-based.

Second level will be directed by audience, i.e. visitors who’d like to shop or

socialise.

Third level will be sorted into tasks, e.g. managing orders or filtering discussion

threads by popularity.

Second levels:

‘Shop’ = uses the database model with hypertext to allow for ease of product

addition, database growth, and room for new categories. See Figure 4 for

the hub & spoke model.

‘Social’ = contains discussion forum, uses hypertext according to filters.

Messaging/chat function design will be sortable by controlled labels much

like Google’s current email design.

Help = hypertext based, linked at each level to page specific help, but able to

navigate once in main Help Centre, e.g. accessing ‘Help’ from ‘Manage

Orders’ will bring user directly to the ‘Ordering’ help files.

6

Figure 5: Shop Categories

7

Navigation Systems

Wusteman Gadget’s requires space for attractive photos of their products so navigation will

make frequent use of mass, interactive dropdown menus pioneered by Amazon1 (Figure 6:

Amazon).

Recommendations

This site will use a horizontal navigation bar with dropdown menus.

Home page is centred, horizontal navigation bar of second level menu that moves to

the top when a page is selected. This will aid in marketing of Wusteman Gadget’s as

a recognizable brand.

The title ‘Wusteman Gadget’s’ will act as a link to the main Home webpage.

The third and fourth level menu will appear when user hovers over second level, e.g.

hovering over ‘Shop’ will open menu with ‘Manage Orders’ etc. This mass dropdown

model made famous by Amazon was chosen because the site has few top levels and

room is needed for visual content.

Mass dropdown menu from ‘Shop’ will contain a search bar within it to facilitate

usability and save space.

Once past the home page a breadcrumbs feature will appear to anticipate browser

back button timeout issues2.

Site map at bottom left that opens up like a reverse, mass dropdown menu. Feature

is placed at bottom left because this is where the ‘About’ pages are commonly

located in large gadget sites such as Houzz and Dornob.

Main Help centre at top right of screen because this is where Help is accessed in

Microsoft Word, used by the majority of computer-literate users.

1 Mobile site will instead be based upon popular image-based apps such as Pinterest. 2 Feature will not be present in the mobile version.

8

Figure 5: Amazon’s Mass Menu

9

Labelling Systems

Wusteman Gadget’s will have a diverse audience in terms of internet literacy, so we should

keep vocabulary simple and descriptive.

Recommendations

A hybrid of icons and words will be used; an icon should never be without a label.

All labels will be approachable, concise, and self-evident.

One exception is using a magnifying glass for the search option. Users respond

better to the icon in combination with a text box (the text box may be removed

for mobile-versions of the website to save space). See this NNGroup article:

http://www.nngroup.com/articles/magnifying-glass-icon/

Labels should be descriptive and focus on the user’s task.

All vocabulary should be used consistently throughout the website; for this purpose we

have included a Glossary below.

Font should be from the sans serif family because it’s more accessible for print-disabled

users, such as Dyslexics, and will reduce the interaction cost.

Glossary

Browse Common usage, describes action

Contact Us ‘Us’ is more approachable, projects image of company as friendly and open. Also a Commonly used term.

Help Describes user’s need

Help Centre Conceptualises page as central hub with all help files accessible from one place.

Home Approachable, common usage

Search Common usage, describes action desired

Shop Not only describes the action, but is also a metaphor for a physical shop.

Social Taking a risk with this word, but we want the user to associate the options in this part of the website with social networks such as Facebook and Twitter.

10

Shop Categories

Design A little vague for users who aren’t familiar with the world of design, but is used effectively by both Houzz and Dornob.

Games Simple and descriptive.

Kid’s Shorter than ‘Children’ for space-saving reasons. Will have some overlap via hypertext with ‘Games’.

Kitchen Simple and descriptive. We decided to use ‘Kitchen’ instead of ‘House’ or ‘Home’ firstly, so as to not have two meanings for the word ‘Home’ and secondly, because most gadgets are for the kitchen or else are usable outside the home.

Office Simple and descriptive.

Sporty We decided ‘Sporty’ was more accessible than ‘Sports’ because it includes gadgets for the sports fan as well as for the playing of sports themselves.