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