Usability Study

AAU Student Self Service Web Application

Design Documentation

July 14, 2008 CANM 606

Design Team:

Melissa McLean | Pablo Reyes | Rutu Upadhyaya

Table of Contents

Introduction........................................................................................................................1 Design Process..................................................................................................................1 Summary of Requirements Analysis Methodology........................................................................................................................................ 2 Target Audience & Platform Specification....................................................................................... 3 Overall Web Site Objectives............................................................................................................... 4

Summary of Design Specifications Information Architecture.................................................................................................................... 5 User Task Analysis.............................................................................................................................. 6 Proposed Design A Screen Shots..................................................................................................... 7 Proposed Design B Screen Shots.................................................................................................... 8

Summary of Usability Testing Methodology........................................................................................................................................ 9 User Testing Results for Design A...................................................................................................10 Design Specifications for Design A.................................................................................................11 User Testing Results for Design B..................................................................................................16 Design Specifications for Design B................................................................................................ 17

Conclusion........................................................................................................................25 End Notes.........................................................................................................................26

Design Documentation : AAU Student Self Service Web Application

The AAU Student Self Service web site is a tool accessed by all registered students of Academy of Art University to perform administrative tasks to their student account including registering for classes, updating student profile, keeping up to date with Financial Aid and tuition payments.

The contents of this document illustrate our proposed solutions for the design and development of the AAU Student Self Service web site. The process by which these solutions were developed are briefly summarized in the following pages.

“

The most successful web sites are those that not only respond to user feedback, but actively seek it out.

- Jennifer Fleming (1)

“

INTRODUCTION

Full documentation of the development process can be provided by request.

DESIGN Process Requirements Analysis Documentation of the web site’s target audience and target platforms, defining as well user goals and needs.

Competitive Analysis A comparison of similar existing web sites to gain an understanding of their strengths, weaknesses, opportunities and threats to keep in mind during the development of the AAU Student Self Service web site.

Information Architecture Mapping out the structure and flow of the AAU Student Self Service web site.

Page Schematics Basic layout of page components to ensure all necessary elements would be accommodated in the design.

HTML Prototypes Laying out a mock web site to illustrate layout and functionality of various components of the web site.

User Testing Observing users complete 5 common tasks and taking note of problem areas in the design for further refinement.

Final Design Proposal Reiteration of the prototype given feedback gathered during the user testing stage of the design cycle.

McLean | Reyes | Upadhyaya

Design Documentation : AAU Student Self Service Web Application

REQUIREMENTS ANALYSIS

“

“

This section presents the summary of results of the Requirements Analysis to identify target user requirements for the AAU student self service web application.

..... The answer lies with your site’s users.

Methodology

- Jennifer Fleming (1)

One-on-One Interviews Structured discussions with 6 randomly selected students were conducted with the aim of determining how frequently the students used the self service web application, what their goals were that lead them to use the application as well as what kind of hardware and software they used to access the application. 3 interviews were selected to create user scenarios based on their responses.

Online Survey Interviewing 6 users was not enough to gain representative information about our users, so we setup an online survey to broaden our scope of findings. The survey addressed three areas of interest: demographics of user, prioritization of user requirements, and use of particular hardware and software.

General Research To augment our findings through interviews and surveys, we also researched web sources for student demographics as well as contacted Bill Cash, the Director of Institutional Research for the Academy of Art University.

Stakeholder, Situation, Need, & Feature (SSNiF) Analysis In order to better understand user needs and what features should be developed in a web application to meet these user needs, we also developed a SSNiF Analysis which described possible scenarios users could find themselves faced with and answered how these needs would best be met.

“

If you ignore some stakeholders, someday they’re going to walk in and play their trump card, and an otherwise careful design will be shot full of holes.

McLean | Reyes | Upadhyaya

“

- Usability for the web

Design Documentation : AAU Student Self Service Web Application

REQUIREMENTS ANALYSIS (cont.)

Target Audience Specification The Target audience will be all on-site and online students currently enrolled in the school; between the ages of 17-75.

Every student is required to use the student self service web site to sign an online enrollment agreement. Our interviews confirmed that the current web application speed is slow and is very difficult to navigate.

On average, a student will use this web site between 2-3 times per month, predominately to check grades and view class schedule.

Graduate / Under Graduate 24% Graduate

76% Undergrad

Target Platform Specification

Results are based on interviews, online survey and research.

Platform Computer Operating System Browsers

Specification PC and Mac Windows – XP & Vista Mac – Leopard & Tiger IE 6, IE 7, Firefox, Safari

Graphics card Screen resolution Internet connection Plug ins

512 MB and higher 1024 x 768 or higher DSL, Cable, wireless and T1 Java SE6

Online / On-site Students 26% Online

74% On-site

Full time / Part time Students 36% Part Time

Stakeholders and Their Needs

Students To be able to accomplish all registration, financial and profile updating goals.

Financial Aid Office The ability to review a student’s payment plan and post outstanding payment amounts.

Registrar Office The ability to set up a student’s profile account and to see a student’s progress and access to the student’s transcript information.

Advisors To better be able to advise a student on what courses to take.

Instructors To be able to post grades for student review.

McLean | Reyes | Upadhyaya

64% Full Time

Domestic / International Students 19% International

81% Domestic

Design Documentation : AAU Student Self Service Web Application

REQUIREMENTS ANALYSIS (cont.)

Overall Web Site Objectives

To provide students with an administrative web portal where they have direct access to their personal and academic account and can make modifications to this account when and where it suites them. Also, to relieve the school’s financial burden of hiring a staff to otherwise provide this required service to the students.

• A coherent structure that requires little learning time and immune to user error (especially when handling a student’s finances).

• User must be able to access all high-level administrative features in 3 clicks or less.

• User must be able to access all main information categories via a main navigation system consistently found on every page within application.

• The web application must perform optimally for 95% of users and sufficiently for 100% of users.

• 75% of users must rate the system as being very responsive, 95% reasonably responsive.

• 95% of users must rate the content as being relevant and informative.

• 90% of users must rate the system as being easy to use.

• System efficiency and usefulness should be rated higher than the attractiveness of the application, although 75% of users should rate it as being visually appealing.

• First time users will be able to find the desired feature within two minutes of visiting the web site; expert users or users who have used the site five or more times, should be able to find a desired feature within 30 seconds.

• Users will be able to search the web applications’ features with ease.

McLean | Reyes | Upadhyaya

Design Documentation : AAU Student Self Service Web Application

DESIGN SPECIFICATION Information Architecture

McLean | Reyes | Upadhyaya

Design Documentation : AAU Student Self Service Web Application

DESIGN SPECIFICATION (cont.)

Main Task Flows 1

2

3

4

5

Additional Web Site Features • View Course Catalog • View Degree Outlines • View Class Schedule • Make Appointment with Advisor • View Grades • Request Transcript • Transfer Credits • Apply for Graduation • Setup Installment Plan • FAFSA Online • View My Financial Aid • NSLDA Student Access • View / Edit Profile

McLean | Reyes | Upadhyaya

• Access to Student Email Account • Editable Student Calendar • Academy of Art Faculty Contacts Book • Student Public Profile - Upload Student Portfolio - Student Bio / Artist Statement Page - Student Blog • Library Account - View Personal Library Information - Links to Online Library Catalog & Archives • Career Center - Access to Job Postings - Post Resume / Links to Web Portfolio or Public Profile Page - Career Guidance • AAU Store and Supplies

Design Documentation : AAU Student Self Service Web Application

DESIGN SPECIFICATION: Design A Key Page Screen Shots

McLean | Reyes | Upadhyaya

Design Documentation : AAU Student Self Service Web Application

DESIGN SPECIFICATION: Design B Key Page Screen Shots

McLean | Reyes | Upadhyaya

Design Documentation : AAU Student Self Service Web Application

USABILITY TESTING In order to subjectively evaluate the usability of our designs, we developed an HTML prototype featuring 5 common tasks the user would be required to perform. The success of the proposed design would be determined by comparing user feedback to the site’s defined usability objectives (listed on page 6 of this document).

This section describes the testing process, information about the test users, user recommendations and our observations and how these findings were incorporated into our final design proposal.

Two designs were developed and tested: • Design A focuses on a flexible interface which can be customized by the user to best fit their needs and usage patterns. • Design B focuses on the development of a comprehensive, static interface that allows the user access to all available features, but without overwhelming the user with too many options and keeping the task at hand in focus.

Methodology

For the usability testing, eight participants matching the user profiles, spent 30 minutes each to test the site by completing five common tasks based on real-world user scenarios. During this time, participants: 1. Performed each task on the site while thinking aloud 2. Completed a user background questionnaire 3. Answered questions about overall site impressions 4. Rated the design given various criteria 5. Completed an icon recognition form The only method of recording observations was by the facilitator and observer taking down notes. We did not use any video or sound recording for this user testing session.

Tasks Used for Testing

1. Logging into AAU Student Self Service web site 2. View and email grades 3. Make a payment 4. Enroll in classes 5. Add an event to the calendar

McLean | Reyes | Upadhyaya

Design Documentation : AAU Student Self Service Web Application

USABILITY TESTING: Design A User Assessment of Design B Easy to use

1

2

3

4

5

6

7

Hard to use

Attractive

1

2

3

4

5

6

7

Unattractive

Useful

1

2

3

4

5

6

7

Waste of time

Efficient

1

2

3

4

5

6

7

Tedious

Well Organized

1

2

3

4

5

6

7

Haphazard

Valuable Information

1

2

3

4

5

6

7

No information

Indicates 90% or greater of the response

Summary of User Testing

The users testing result indicated that the site had 2 critical, 1 medium and 1 minor issue.

Critical issues where mainly for those users who were not familiar with the use of widgets, and the second critical issue stated that the information displayed on the content pages was unclear, specially those in the enroll for classes task.

The issues labeled as medium were relevant to the navigation in the content pages, specifically the next and previous buttons.

And finally the minor problem was the confusion of some users with the labels of some buttons.

In order to fix these issues the following corrections where made.

To view this prototype online, visit: http://www.puerta121.com/myAcademy/ Please keep in mind, this site is not intended to be fully functional and not all links are active.

McLean | Reyes | Upadhyaya

10

Design Documentation : AAU Student Self Service Web Application

DESIGN Specifications: Design A 1

Home Page: Persistent Navigation, containing search box and help features throughout the whole site.

2

Fixed boxes: Profile, Academics and Finances boxes. These cannot be removed.

3

Non-Fixed boxes, customizable area where users are able to locate different features of the website.

4

Settings and FAQ links, persistent throughout the entire website.

5

Add content button, whenever an application or feature is required, users can find them following this link.

McLean | Reyes | Upadhyaya

11

Design Documentation : AAU Student Self Service Web Application

DESIGN Specifications: Design A 1

2 3

Add Content Menu: Add content menu, lists all the available features to the users, tickets show those that have been added and an “add” button allows users to incorporate more boxes. This feature was changed from it´s original version, making it smaller in size in order for it to remain visible and within the “fold” and also, making the close button more accessible.

Upper right corner of boxes indicates whether the box is: Ffixed, or Customizable.

McLean | Reyes | Upadhyaya

12

Design Documentation : AAU Student Self Service Web Application

DESIGN Specifications: Design A 1

Content Layout: Sidebar for Interaction page, throughout the site, this area serves as a guide where the steps to compete a task are listed.

2

Main content area, one issue was the clarity of the information displayed in this area, in order to facilitate the task for the users simple colors where used, also keeping the content to the minimum required was necessary and subdued colors where used.

3

Closing button to go back to homepage. Constant location through the whole site, also supported by close buttons included in some tasks.

4

Navigation and buttons throughout the site where made more consistent, a standard close, previous and next button that repeats in every task.

McLean | Reyes | Upadhyaya

13

Design Documentation : AAU Student Self Service Web Application

DESIGN Specifications: Design A 1

Frequently Asked Questions: Specific search box for FAQ topics regarding the use, functions and all subjects regarding the My Academy website.

2

Topics ins FAQ, user click to display questions of each area of the web site.

3

Navigation to access other help areas and setup page.

McLean | Reyes | Upadhyaya

14

Design Documentation : AAU Student Self Service Web Application

DESIGN Specifications: Design B Color Usage: Swatch:

Color Code:

Usage:

#666666

Used in the site header

#E11E26

Used in AAU logo

#227362

Used for highlight and headers

#FFFFFF

Used in Add Content Menu Background

#333333

Used in text

#EEEEEE

Color available for widget customization

#BCD6D5

Color available for widget customization

#B1C3CF

Color available for widget customization

#F3E0C0

Color available for widget customization

#D5B6BB

Color available for widget customization

#EFF5F5

Color available for widget customization

Font Usage: Font:

Usage:

Georgia

Used for Main Header

Verdana

Used for the rest of the site

McLean | Reyes | Upadhyaya

15

Design Documentation : AAU Student Self Service Web Application

USABILITY TESTING: Design B User Assessment of Design B Easy to use

1

2

3

4

5

6

7

Hard to use

Attractive

1

2

3

4

5

6

7

Unattractive

Useful

1

2

3

4

5

6

7

Waste of time

Efficient

1

2

3

4

5

6

7

Tedious

Well Organized

1

2

3

4

5

6

7

Haphazard

Valuable Information

1

2

3

4

5

6

7

No information

Indicates 90% or greater of the response

Summary of User Testing

The user testing brought to light 2 critical, 4 medium, and 5 minor errors in this design option. All critical issues have been resolved in this proposed design as well as three of the four medium level issues. Only three of the five minor problems were addressed, the other two were considered preferential statement by a single user and the other the cohesiveness of the design would have suffered in accommodating the change.

The two critical issue addressed in this redesign was: first, the development of a designated Home page rather then opening up the landing page of the first tab, and second, addressing the recognizability of the icons.

The following pages illustrate the layout and functionality of the design solution in its final proposed state.

To view this prototype online, visit: http://www.mserif.us/myAcademy/ Please keep in mind, this site is not intended to be fully functional and not all links are active.

McLean | Reyes | Upadhyaya

16

Design Documentation : AAU Student Self Service Web Application

DESIGN Specifications: Design B 1

2

Home Page: A designated home page begins by stating the purpose and capabilities of the site and displays a list of all top and second level links, providing the user a clear scope of the web site.

The icon navigation bar has been expanded to display a link title, addressing the potential issue of the user not recognizing an icon’s image or purpose and clearly establishes the association that the icons are buttons.

2

1

McLean | Reyes | Upadhyaya

17

Design Documentation : AAU Student Self Service Web Application

DESIGN Specifications: Design B 1

Icon Portal Page: Another measure taken to assure that icons are recognizable is the inclusion of an Icon Portal page which can be accessed by all pages of the site by clicking the red triangle at the top of the icon navigation bar.

2

Each icon is clearly defined with a link title as well as additional text below the link title that describes the relevant features associated with an icon.

3

Originally, the cyan elements in the icons to the right were red, but users commented that this was distracting them from the main task at hand. To add visual interest to the layout and to emphasize the main focus of this page, the larger icons in the main content area use the red instead of the cyan.

1 2

3

McLean | Reyes | Upadhyaya

18

Design Documentation : AAU Student Self Service Web Application

DESIGN Specifications: Design B 1

Page Anatomy: Page Header which links back to the Home page

7

Sub Navigation list relevant to page tasks

2

Search Field, Help documentation and Log out

8

Main content header

3

Main Navigation

9

Main content

4

Icon Navigation

10 Link back to main AAU site

5

Button to view Icon Portal page

11 Privacy Policy and link to Web Master

6

Breadcrumb trail with link back to Home page

1 2 3 5

6 8 7

10

McLean | Reyes | Upadhyaya

4

9

11

19

Design Documentation : AAU Student Self Service Web Application

DESIGN Specifications: Design B 1

Page Anatomy: Task Process Bar

6

Plain text field

2

Style of completed task step (links to step)

7

Check box

3

Style of current task step

8

Required field notation

4

Style of incomplete task steps

9

Progress buttons

5

Drop down field

10 Contact information for further assistance

1 5

2

3 6

4

7 8 9 9

McLean | Reyes | Upadhyaya

20

Design Documentation : AAU Student Self Service Web Application

DESIGN Specifications: Design B 1

Tab States: An active tab is defined by a white background without a dividing line separating it from the content space of the page and the tab title highlighted in red.

2

When a user rolls over a tab, it turns a lighter shade of grey (30% black) with white text.

3

A tab’s normal state is a dark grey (70% black) with white text.

1

1

2

3

Icon States: An active icon is defined by a dark grey background (70% black).

2

When a user rolls over an icon, the background turns to a medium grey (30% black) and an element of the icon turns red for additional highlighting. If an icon has a cyan element as part of its graphic, the cyan will turn red.

3

An icon’s normal state is to be on a light grey (15% black) background that is common to all other icons.

1

2

McLean | Reyes | Upadhyaya

3

21

Design Documentation : AAU Student Self Service Web Application

DESIGN Specifications: Design B Sample Error Page: Errors caused by missing user input or invalid input types should be detected on the client-side before the page is processed on the server-side to assure speedy response time. Errors should be stated on the conflicting page, highlighting clearly any offending field(s) and as simply as possible instructions to the user on how to fix the error.

McLean | Reyes | Upadhyaya

22

Design Documentation : AAU Student Self Service Web Application

DESIGN Specifications: Design B Sample Confirmation Page: Confirmation pages should feature a print button for student records and a button that will take the user to a logical landing page (in this instance, the button takes the user back to the “My Finances� page).

McLean | Reyes | Upadhyaya

23

Design Documentation : AAU Student Self Service Web Application

DESIGN Specifications: Design B Color Usage: Swatch:

Color Code:

Usage:

#E11E26

Use very sparingly, AAU logo, error indications, active page title

#000000

Main body text, header and footer background color

#666666

Normal state for tabs, line elements and borders

#999999

Icon and tab rollover state, secondary text and bread crumb links

#E7E7E8

Field background, icon panel background

#24A4CB

Text links and icon accent color

#256A81

Main accent color, header text and progress buttons

Font Usage: Font:

Usage:

Adobe Garamond Pro

“my ACADEMY” header and tab titles The word “my” should be lowercase and italicized

Helvetica Roman

Body text, secondary test, bread crumb text

Helvetica Medium

Secondary links, form categories, text on buttons (all caps)

Helvetica Bold

Page headers (all caps)

McLean | Reyes | Upadhyaya

24

Design Documentation : AAU Student Self Service Web Application

CONCLUSION “Make usability part of everything you do...

Living within these eleven words is the most important message any web designer should follow. That is that web sites are constructed for people. And not just any kind of people but a vast array of cultures, lives, experiences and ways of looking at the world.

This variety of users are nearly impossible to narrow in on in order to make everyone content and happy. Its at this point that a method focuses in on usability and the way users interact with the design such as the Pervasive Usability Process became the ideal way not only to work for the user, but with them.

As a first and vital part of this process the project focused on finding out who the site is for, and based on that data established goals to complete through the following steps. It was during this stage of the development where the actual contact with the users was ideal in the way that no assumptions were needed and every decision could be made with little margin of error. Thus the design process was focused in the way the information was to be displayed and finally how the site would look at the end.

Even though this is a secure path to follow it is not error free, subjectiveness as a vital part of the human nature could make the design team make choices that were not necessarily those of the users. For this reason, user testing and constant thought of their needs became vital to further narrow the possibilities of not completing the established goals. ...Make it a lifestyle� (4). The end of this sentence best describes the process of creating a web site and how to ensure quality in every product made.

McLean | Reyes | Upadhyaya

25

Design Documentation : AAU Student Self Service Web Application

END NOTES 1. Jennifer Fleming; http://www.ahref.com/guides/design/199806/0615jef.html 2. Wikipedia - http://en.wikipedia.org/wiki/User_(computing) 3. Jakob Nielsen - http://www.useit.com/alertbox/20000319.html 4. Usability For the Web. Brink, Gergle and Wood. p.14.

McLean | Reyes | Upadhyaya

26