Deliverable D - Detailed Design
Purpose
The purpose of this document is to display the Business and Technical Requirements that are being used to document the design process of OrangeMusic.com.
Project Description and Scope
- Orange Music School (OMS) is a not-for profit organization that provides musical instruction and training to local, national and international students. OrangeMusic.com is a website that will allow students and faculty to achieve their musical goals both via online classes and sessions as well as registering for classes that are geographically located at a school. The scope of OrangeMusic.com is for anyone that wants to be a professional musician, serve in local churches or communities musically, or just learn an instrument for their own leisure.
Detailed Design
Overview of Application Changes
- DD 2.1.1 (Reference TR 4.1.1) Users will be able to browse course descriptions.
- DD 2.1.2 (Reference TR 4.1.3) Users will be able to register and pay for courses.
- DD 2.1.3 (Reference TR 4.1.9) Students will be able to create accounts to manage all transactions.
- DD 2.1.4 (Reference TR 4.1.10) Students will be able to sign on to their accounts with an email and password.
- DD 2.1.5 (Reference TR 4.1.11) Students will be able to access their current schedule and course history.
Significant Algorithms
- OrangeMusic.com will use an MVC architecture. In addition, it will use the facade and factory method patterns as a single point of entry to the services within each package. Finally, the mediator pattern will be employed in enrollment to prevent dependencies between student and course. The following package and class diagrams display the main functionality:
- Class Diagram (click for expanded view)

- Package Diagram (click for expanded view)

Classes
- Student: Data object for student attributes
- Address: Data object for student address
- Payment: Data object to store student payments
- StudentManager: Facade responsible for signing on, creating students, and making payments
- Course: Data object for course attributes
- CourseOffering: Specific instance of a course at a particular time with a particular instructor
- Instructor: Data object for instructor attributes
- CourseManager: Facade responsible for listing the current course schedule
- CourseEnrollment: Data object tying together a particular offering with a particular student
- EnrollmentManager: Facade responsible for adding/dropping students and listing enrollments
- DD 2.2.1.1 Class name: StudentManager (Reference to TR 4.1.9)
- DD 2.2.1.2 Package name: orangemusic.student
- DD 2.2.1.3 Method: CreateAccount
- DD 2.2.1.4 Purpose: Validate email and password and create a student account. Students will be able to register for courses. This feature will be implemented in our web and mobile site.
- DD 2.2.1.5 Input parameters Email, Password, Name, Address
- DD 2.2.1.6 Return type: boolean (display error message on screen)
- DD 2.2.1.7 Details:
Get account data from web form
Var EmailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/
If not Email matches EmailExp
Throw error message "Email Invalid"
Endif
If not Email is unique
Throw error message "Email already exists"
Endif
If not Password is 10 characters in length and contains at least one number
Throw error message "Password Invalid"
Endif
BEGIN WORK
Increment last student ID
Create row in student table using new student ID
Create row in address table and link to student
If error
ROLLBACK
Return false
Else
COMMIT
- DD 2.2.2.1 Class name: EnrollmentManager (Reference to TR 4.1.3)
- DD 2.2.2.2 Package name: orangemusic.enrollment
- DD 2.2.2.3 Method: AddStudent
- DD 2.2.2.4 Purpose: Registered students will be able to enroll in a course offering. This feature will be implemented in our web and mobile site.
- DD 2.2.2.5 Input parameters: CourseOffering, Student
- DD 2.2.2.6 Return type: boolean (display complete transaction on screen)
- DD 2.2.2.7 Details:
- DD 2.2.3.1 Class name: StudentManager (Reference to TR 4.1.3)
- DD 2.2.3.2 Package name: orangemusic.student
- DD 2.2.3.3 Method: MakePayment
- DD 2.2.3.4 Purpose: Make payment on student account using a credit card. This feature will be implemented in our web and mobile site.
- DD 2.2.3.5 Input parameters Student, CreditCardNumber, Amount
- DD 2.2.3.6 Return type: boolean (display error message on screen)
- DD 2.2.3.7 Details:
Data Structures (Data Models and Tables)
Tables & ER Diagrams
- DD 3.3.1 (Reference TR 7.1.1.) Tables for OrangeMusic.com, including Entity-Relationship Diagram and DDL. All tables will be used for our web and mobile interface
- ER Diagram (click for expanded view)

DDL (Data Definition Language) for all tables
DROP TABLE Address;
DROP TABLE Course;
DROP TABLE CourseEnrollment;
DROP TABLE CourseOffering;
DROP TABLE Instructor;
DROP TABLE Payment;
DROP TABLE Student;
CREATE TABLE Address (
AddressID Integer NOT NULL,
StudentID Integer NOT NULL,
Street Text(50),
City Text(50),
State Text(2),
PostalCode Text(20),
Country Text(50)
);
CREATE TABLE Course (
CourseID Integer NOT NULL,
Name Text(50) NOT NULL,
Description Memo
);
CREATE TABLE CourseEnrollment (
StudentID Integer NOT NULL,
CourseOfferingID Integer NOT NULL,
EnrollmentDate DateTime NOT NULL
);
CREATE TABLE CourseOffering (
CourseOfferingID Integer NOT NULL,
CourseID Integer NOT NULL,
InstructorID Integer NOT NULL,
Year Integer NOT NULL,
Term Integer NOT NULL,
Classroom Text(50),
Fee Currency NOT NULL,
MaxStudents Integer NOT NULL
);
CREATE TABLE Instructor (
InstructorID Integer NOT NULL,
Name Text(50) NOT NULL
);
CREATE TABLE Payment (
PaymentID Integer NOT NULL,
StudentID Integer NOT NULL,
Amount Currency NOT NULL
);
CREATE TABLE Student (
StudentID Integer NOT NULL,
EmailAddress Text(50) NOT NULL,
Password Text(20) NOT NULL,
Name Text(50) NOT NULL,
AmountDue Currency NOT NULL
);
ALTER TABLE Address ADD CONSTRAINT PK_Address PRIMARY KEY (AddressID);
ALTER TABLE Course ADD CONSTRAINT PK_Course PRIMARY KEY (CourseID);
ALTER TABLE CourseEnrollment ADD CONSTRAINT PK_CourseEnrollment
PRIMARY KEY (StudentID, CourseOfferingID);
ALTER TABLE CourseOffering ADD CONSTRAINT PK_CourseOffering
PRIMARY KEY (CourseOfferingID);
ALTER TABLE Instructor ADD CONSTRAINT PK_Instructor PRIMARY KEY (InstructorID);
ALTER TABLE Payment ADD CONSTRAINT PK_Payment PRIMARY KEY (PaymentID);
ALTER TABLE Student ADD CONSTRAINT PK_Student PRIMARY KEY (StudentID);
ALTER TABLE Student ADD CONSTRAINT UQ_Student_EmailAddress UNIQUE (EmailAddress);
ALTER TABLE Address ADD CONSTRAINT FK_Address_Student FOREIGN KEY (StudentID)
REFERENCES Student (StudentID);
ALTER TABLE CourseEnrollment ADD CONSTRAINT FK_CourseEnrollment_Student
FOREIGN KEY (StudentID) REFERENCES Student (StudentID);
ALTER TABLE CourseEnrollment ADD CONSTRAINT FK_CourseEnrollment_CourseOffering
FOREIGN KEY (CourseOfferingID) REFERENCES CourseOffering (CourseOfferingID);
ALTER TABLE CourseOffering ADD CONSTRAINT FK_CourseOffering_Course
FOREIGN KEY (CourseID) REFERENCES Course (CourseID);
ALTER TABLE CourseOffering ADD CONSTRAINT FK_CourseOffering_Instructor
FOREIGN KEY (InstructorID) REFERENCES Instructor (InstructorID);
ALTER TABLE Payment ADD CONSTRAINT FK_Payment_Student
FOREIGN KEY (StudentID) REFERENCES Student (StudentID);
Screen Layouts
Interface Design
- Medium fidelity prototype of OrangeMusicSchool.com
(click for expanded view)

- Screen layout of m.OrangeMusicSchool.com (Logo is designed for real client - Logos School of Music by Nicole Adachi)
(click for expanded view)

- This is an official www.OrangeMusicSchool.com interface design
(click for expanded view)

- Web interface will coded using XHTML 1.0 STRICT. This standard is based on W3C
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- The Mobile site will be coded using XHTML MP 1.0
- <?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
- Content style will be formatted using cascading stylesheets
A:link { color: #330000; }
A:visited { color: #330000; }
A:active { color: #330000; }
A:hover { color: #993300; }
td { font-family: batang, arial, sans-serif; font-size: 10pt}
.orange1 {
font-family: batang, arial, sans-serif;
font-size: 10pt;
color: #993300;
font-weight:bold; }
.orange2 {
font-family: batang, arial, sans-serif;
font-size: 10pt;
color: #993300; }
.gray1 {
font-family: batang, arial, sans-serif;
font-size: 8pt;
color: #CCCCCC; }
.gray1 {
font-family: batang, arial, sans-serif;
font-size: 8pt;
color: #999999; }
- www.orangemusic.com navigational page:
Medium fidelity Interface Design
(click for expanded view)

- Navigational schemes
- The final navigational schemes of orangemusic.com
- Left Navigation:
- About | Programs | Course Schedule | Event Calendar | Faculty | Contact | Student Sign On | Faculty Sign On
- Left Navigation Prototype
(click for expanded view)

- Bottom Navigation
- About | Programs | Course Schedule | Event Calendar | Faculty | Contact | Student Sign On | Faculty Sign On
- Mobile Phone Navigation
-
- Programs
- Course Schedule
- Upcoming Events
- Contact Us
- Information Architecture
(click for expanded view)

Page Content Information
- orangeMusic.com HomePage: This page will be available online only; the mobile page will be something similar.
- There will be a logo on the left upper side. Across from it will be a search capability tool and log on. The rest of the page will contain a menu to other links, a flash/graphics section, calendar, and important news events icons, or advertisements.
- The navigation menu which will be on the left side will contain the following: About, Programs, Course Calendar, Event Calendar, Faculty, Contact, Studen Sign On, Faculty Sign On
- The ad spaces will change frequently and it will show our sponsors
- About. This page will be available online only, and it will give a brief description of our history.
- Mission statement - This page will give the mission statement and can be accessed from either about menu, or about us page.
- Community Partnerships - will give a list and description of our sponsors, and a link to become a sponsor.
- Press Information - Gives the information about our media contact and past news features and information.
- Programs - This page is available online only and gives an overview of our programs. This page will have links to more specific programs, to other information partaking to this.
- Beginner - This page will have the info to all the beginner's programs. It will also include links surveys, some basic music level placement tests and other info that would be related to beginner's level
- Intermediate - This page is targeted to non-beginners who would like to continue their studies. It will contain info about different programs, and different paths where a musician can go.
- Advanced - This page is intended for students that will like to become professionals. It will contain step by step information on how to achieve this goal.
- Course Schedule - This page will show the courses though for the next quarter. It will show all the new courses for the next quarter, and will contain a link to Search Courses.
- Search Courses - This will be a link where a search can be done on more specific criteria. E.g. Time, days, class name, professor. IT will contain a link to Course Registration
- Course Registration - This is the page where a student signs up for classes. It contains profile info, classes that he is registering for, and tuition.
- Event Calendar - Available online and mobile
- This page will display all the events related to school. (Except for the classes). E.g. Concerts, recitals, faculty events, fund-raisers.
- Faculty - Available online and mobile
- This contains Faculty profile and class history
- Contact - Available online and mobile
- This page will contain the contact to different departments.
- Student Sign On - Available online and mobile
- This page is designed for current students to check their class/event schedule, assignments, submit assignments and see tuition
- Faculty Sign On - Available online and mobile
- This page is designed for current faculty to update their profile, schedules, submit hours, assign homework.
Testing Considerations
Identify any special test cases for your site. Certain designs may have significant impact in a particular area (e.g. heavy transaction volume may require Performance Testing, particularly complex logic requiring rigorous integration testing) which may create unique testing recommendations.
Usability Testing
- The following scenarios will be tested for the web site.
- Create student account (Reference DD 2.2.1)
- Enroll into course (Reference DD 2.2.2)
- Make a payment (Reference DD 2.2.3)
- Fill out contact form (Reference DD 2.1.6)
- Faculty login (DD 3.1.11)
- Results will be used to inform future design decisions. Changes made to the web and mobile web interface will be modified based on usability result.
Performance Testing
- The following tests will be performed on the web site.
- Load test on 0-200 concurrent users will use the system from 11:00pm-6:00am
- Load test on 200-750 concurrent users will use the system from 7:00am-3:30pm
- Load test on 1,000-2,500 users will use the system from 3:30pm-11:00PM
- Test on failover servers with 2,500 concurrent users during peak hours from 3:30pm-11:00PM
- Results will be used to inform future design decisions. Changes made to the web and mobile web interface will be modified based on usability result.
Approvals
Participant | Role | Approval Date |
James Smith | Project Sponsor | 2008-10-16 |
Mary Johnson | Technical Specialist, Orange Music | 2008-10-19 |
John Williams | PR Manager, Orange Music | 2008-10-19 |
Michael Taylor | General Manager, Orange Music | 2008-10-19 |
Robert Wilson | Chief Strategist, Orange Music | 2008-10-19 |
Team Contributions
Stelu Aioanei
Lucas Gatling
- Usability Testing, Performance Testing
JJ Sandvig
- Significant Algorithms, Data Structures
Nicole Adachi
- Interface Design, Navigational schemes, Information Architecture
Tom O'Malley
- Developed and Posted Web Deliverable Page, Approvals
Roland Landry
- Purpose, Project Description and Scope, Overview of Application Changes