Title of the Project
Authors - Students' names
ICT & Digital Media LAb - Winter Semester 2015-16
Introduction - General Description ......................................................................................... 2
Planning Phase.......................................................................................................................... 2
Mission of the Web Site .................................................................................................................................... 2
Targeted User Populations ............................................................................................................................... 2
Personas .............................................................................................................................................................. 4
Usability Plan ......................................................................................................................................................... 5
Required Resources ........................................................................................................................................ 5
Time Schedule .................................................................................................................................................. 6
Data Gathering Activities and Methods .................................................................................................. 0
Design ........................................................................................................................................ 1
Designing the Content - Information Architecture ................................................................................. 1
Evaluation .................................................................................................................................. 3
Appendix A. User Requirements Analysis Phase ................................................................... 4
Questionnaires ...................................................................................................................................................... 4
Interviews ................................................................................................................................................................ 4
Appendix B. The Design Phase................................................................................................ 4
Introduction - General Description
General Description of the application. What, why, existing solutions, innovative ideas, level of
user interaction, why there isa need for User Centered Design, Category of the web site
(Informational, E-commerce, Entertainment, Community, Intranet)
Planning Phase
Mission of the Web Site
A short statement will help to clarify the overall organizational goal of the web site.
It is depended from the type of the web site: informational, e-commerce, entertainment,
community, intranet.
“Company X will develop a Web Site to advertise our products, with the goal of increased
sales”
“Community group Y will develop a Web Site to keep our community members informed,
with the hope that the attendance at community meetings will increase”
“ Organization Z will develop a Web site to increase awareness about the need for recycling
in our community”
A good mission statement is short, easy to measure, and relates the web site to the
organizational mission and goals. The mission statements can be used to evaluate the Web
site after a year or two, to determine if the site is really supporting the organization as
defined in the mission statement. Define the success criteria: page visits, products sold,
satisfied customers, public recognition,…
Targeted User Populations
A web site could be targeted to different user groups : A University Site: current students,
potential students, parents/siblings, faculty and staff members.
Identify Well Define Groups, if there exist:
Under 14
65 and older
Sensory disabilities
Motor impairments
Low level computer experience
User Profiles:
Define User Groups:
General demographic information:
Domain knowledge and previous
knowledge:
User computing experience:
User computing environment:
A web site could be targeted to different user groups
age, gender, education, job, language
e.g. adults know about banking, accounts, etc but
children not, which is terminology of the users?
low, medium, high
browser, screen size, mobile devices, network speed
Personas
A persona is a fictional person who represents a major user group for your site.
Personas help you identify major user groups of your Web site. You select the characteristics
that are most representative of those groups and turn them into a persona.
Capture user characteristics
Not real people, but synthesised from real user characteristics
Should not be idealised
Bring them to life with a name, characteristics, goals, personal background
Develop multiple personas (about 3-5 personas, usually one per user group)
Usability Plan
Required Resources
Software
Special
Labs
People
Other
Resources
Time Schedule
Task List and related Deadlines
Task Nr.
Task Name
Duration
Start
Finish
1
Requirement Analysis Phase
....
....
....
1.1
Data Gathering Questionnaire
....
...
....
...
1.2
Data Gathering - Focus group
...
...
...
...
1.3
Construction of the Scenarios,
Use Cases, HTA, Activity
Diagrams
...
...
...
...
2
Design Phase
....
...
....
2.1
Information Architecture
2.1.1
Card Sorting
2.2
Visual Design
2.2.1
Developing prototypes
3
3.1
Evaluation
Questionaires
......
Predecessors
User Requirements Analysis
In this part of the document we are going to perform the user requirements analysis. First of
all, we are going to mention and describe the data gathering activities and methods. Then,
we will explain supported content, information and data. Finally, we are going to describe the
functionality of the web application using a Hierarchical Task Analysis Diagram.
Data Gathering Activities and Methods
We will use the following activities to gather data from the users:
Questionnaires
Questionnaires are generally easy to implement and
will allow the most feedback in a specified period of
time. An online questionnaire can be created and
easily distributed via facebook or other networking
service. Short questionnaires can also be made and
distributed directly to target users (e.g. handed out in
classrooms at schools). We’re going to use Survey
Monkey to gather the data from our users.
Focus Group
A focus group is a form of qualitative research in
which a group of people are asked about their
perceptions, opinions, beliefs, and attitudes towards a
product, service, concept, advertisement,
idea, or packaging. Questions are asked in an
interactive group setting where participants are free
to talk with other group members.
Performing Data Gathering
Questionnaires
For our questionnaire we chose an online survey tool, either Survey Monkey or Google
Forms. We developed a survey with open-ended and closed questions for 20 potential users
of the website to gather information (an example of a questionnaire about an e-commerce
site selling customized bicycles follows):
1. Gender:
Male
Female
2. Age Group:
Under 15
15-24
25-34
35-44
45-54
55+
3. How often do you ride bikes?
Daily
2-3 times per week
Weekly
2-3 times per month
Monthly
Once in a blue moon...
Never
4. What is the purpose for riding your bike?
Commuting
Leisure
Sports
Racing
Other
5. What type of bike(s) do you own?
Mountain
Road
Cruiser
Hybrid
BMX
Other
None
6. Would you be interested in buying a customized bike?
Yes
No
7. How much would you be willing to spend on a customized bike?
$1,000-$1,999
$2,000-$2,999
$3,000-$3,999
$4,000-$4,999
$5,000-$10,000
$10,000+
I refuse to spend more than $1000 on a bike.
8. How would you prefer to build a customized bike?
Just design the look of the frame (template provided)
Design the look and choose parts (just frame provided)
I am confused by this question.
Other
9. When designing the frame of a bike (the look), what type of templates would you
like to have available? (school emblems, sports team logos, city logos,
name/monogram, photos, etc.)
10. What type of information would you like to see from the website regarding the
progress of the bike construction? (just a start/end date, alerts for each step in the
construction, photos during manufacturing, etc.)
INSERT RESULTS
Supported Content, Information and Data
The website will allow the users an innovative way to design, create, and purchase
customized bicycles.
The user should be able to select existing models or choose to create a customized bike. The
process of buying the bike will include:
1. choosing a bicycle frame type
2. having the user design the look of the bike (users can design using a tool similar to
Photoshop implemented on the website and can draw or use design templates
provided and upload it to their bike order)
3. having the option to add additional features to the bike
4. purchasing the bike (a payment method will be implemented)
Functionality of the Application (Hierarchical Task Analysis Diagram)
The following is an example using Hierarchical Task Analysis. It may be applied to other
purchases. The user goal is Buying a Customized Bike and the subtasks and sub-subtasks are:
1 Select Bike Type
2 Select Fit
2.1 Select Gender
2.2 Enter Measurements
3 Calculate Frame Size
4 Design Frame
4.1 Use the Drawing Tool
4.2 Choose From the Templates
5 Upload a Design
6 Choose Bike Parts
7 Shopping Cart
8 Payment Info
8.1 Choose Payment Type
8.2 Enter Payment Info
8.3 Enter Billing Info
9 Confirmation
Scenario
Jamie (25) is a bicycle enthusiast living in Paso Robles, California. He graduated from
California Polytechnic State University with a degree in Viticulture and works at the Eberle
Winery. On his spare time, he enjoys biking along the central coast of California and through
mountain bike trails in the nearby city of San Luis Obispo. Last month, Jamie found a flier
advertising a cycling race in San Luis Obispo, and he decided to join the competition.
Although Jamie already owns two mountain bikes, they are a bit old (bikes he had ridden and
worked on while studying in college). Since graduation, he has been saving up for a new bike
and currently has $4500 to spend on a customized bike which will really help in the
upcoming competition. After researching some local bicycle shops, Jamie learns about JS
Customs and decides to visit their new, interactive website. He chooses the type of frame he
would like to start with and gets to work designing how he wants the bike to look. He uses
the website’s paint option to draw on the frame he has chosen and adds a Cal Poly school
emblem to the frame. As he is drawing, he opens the assistance box on the website and chats
with a store representative. He asks the store representative how long the bike will take to
build (to make sure it will be ready by the competition date). The representative replies that it
usually takes 8 weeks to make the design and deliver the bike, but there is an option to pick
up the bicycle from one of the store branches. The representative also tells Jamie that after
placing his order, he can find a link in the confirmation e-mail that will allow him to keep
track of the work progress on his bicycle. After Jamie is happy with how his bike will look, he
confirms the design, fills out his payment and contact information, and waits for a
confirmation e-mail from the website. After two weeks, Jamie checks on his bike and is able
to see pictures of his bike in different manufacturing stages. He checks on it frequently and
finds that the bike is finally ready after the 7th week.
Design
Designing the Content - Information Architecture
The task of Information Architecture (IA) is to organize and label web sites, intranets, online
communities and software to support usability and findability.
Content Structure and Labeling
You have to make the Content Grouping and Labeling using the Card Sorting method. Keep
in mind that content can be organized in different ways, e.g :
1.
2.
3.
4.
5.
6.
Date
Alphabetical
Geography
Topic
Hierarchy (read more about this type of organization from the lecture slides,etc.)
Combination
Good IA allows access to information in many ways.
Labeling is not easy – it is as complex as structure and navigation. Good labels (a) Are
understandable by the reader (b) Are consistent within the site and (c) Clearly describe where
you are going next.
Which of these guidelines are satisfied by your final content organization, labeling and
navigation? (answer this question after the end of your Information Architecture task).
Perform Card Sorting.
Represent the results of the card sorting by attaching a site map of your application, e.g.
Users' responses from the application of the Card Sorting Method can be included in the
corresponding Appendix of this document.
Defining Navigation
Moving around in the physical world is different to the online world – no real spatial clues.
Navigation allows you to move around in a site, and provides a lot of the contextual clues
Keep in mind that every page of a site should let you know:
1. Where am I
2. What’s here
3. Where can I go now
4. Where have I been
People don’t always work from the home page – they get to a page from a link or from a
search
Additionally, you have to define the following Navigation issues:
1. Location
a. Where should the links be placed on the page?
2. Representing current location
3. Representing location in the site
Attach a skeleton of your interface giving emphasis only to the navigational part, an example
follows:
Prototypes - Presentation
1. Screenshots of the main screens of the web site
Evaluation
Evaluation of the functional prototypes using:
1. Questionnaires (WAMMI) or
2. Think Aloud Protocol
Findings of the evaluation process
Redesign (screenshots with the major changes)
Appendix A. User Requirements Analysis Phase
Questionnaires
Interviews
(any information used during the User Requirements Analysis Phase and the Data Gathering
Techniques).
Appendix B. The Design Phase
Card Sorting Results