Final Major Project Proposal

Document
James Willock
james.willock@gmail.com
Table of contents
Abstract 3

Project Goals 5

User Experience 6
Audience 6

Scenarios 6

Competitive Analysis 7

Blackboard 7

iStudiez Pro 7

Institution web sites 8

Critical analysis 9
Introduction 9

Research sources 9

Project Content 10
Content 10

Application dashboard 10

iPhone application 11

Marketing site 11

Functional requirements 11

Development 11

End-user 11

Project Structure 13

Appendix 15
Reference and research material 15

Development schedule 15
Abstract
During my studies in full-time education, I often wished for a solution to keep all my study
planning and material in one central, network-attached location. This would allow me to
organise information like timetables, hand-in dates, documents, student notices and so on
from one location. The application would also extend these features to become a fully-
fledged productivity and planning tool for the student, complete with calendar-based to-do
functionality, file-sharing, etc.

The application would provide two “versions” to the user, both contained within the same
code-base. A personal edition would contain all the above features, and an institution edition
which extends these features into a more network-orientated application. Tutors could push
information that students would input their selves on the åpersonal edition. Further
interaction, either student-tutor or student-student could be achieved via direct messaging or
simple message boards or shout-walls. Calendar data could also be exported and imported
to different applications such as iCal or Google Calendar.

As I envisaged this product, it would take the form of a dashboard-esque interface, with
customisable widgets for each section of information being contained within. The dashboard
can be customised to display whichever widgets the user requires access to, and widgets
can be customised in their display or position within the dashboard. Further customisation of
the dashboard interface could be achieved by developing a number of “skins” which the user
could choose from at will.

Since students spend much of their time away from a computer but network-attached via
mobile phones, the application should provide alternative means to push or access content
on these devices. An iPhone-centric version of the application, designed for the iPhone/iPod
Touch Safari browser, would allow the user to access all the features of the desktop-browser
version. Additionally, there is scope to plug an SMS API into the application, and have
important information such as timetable changes and notices to mobile phones via SMS text
messaging.

In order to supplement the learning experience, the application should be deployed with
several technologies that have not been present in the learning environment. SSL should be
used to provide secure, encrypted traffic between the user and the web application. OpenID
should be researched as a potential replacement to traditional log-in methods. The
dashboard interface will be created using a Javascript framework such as jQuery or
MooTools. This will allow advanced user-interface techniques such as drag-dropping, live
data updates without refresh, etc. Additionally, coding for the iPhone - whether natively via
the SDK, or as a web application for Mobile Safari - will require research and extensive
testing.
Project Goals

Ultimately, I would like to produce a professional, usable and accessible web application
which could realistically be deployed in an education environment as a supplement to
students.

The application must conform to the standard guidelines for modern sites:

- Accessible to WAI guidelines.

- Conform to web standards such as xHTML, CSS, DOM, etc.

- Usable, proven with usability testing throughout the design and development process.

- Containing applicable and relevant functionality for the target audience.

- Ability to be accessed from mobile user agents, such as Mobile Safari.

I would also like to achieve some personal goals throughout the project:

- Researching, developing and deploying new technologies onto a live platform.

- Work directly with the target user audience to improve the user experience of the project.

- Improve written and marketing skills to produce concise and relevant documentation.
 User Experience

Audience
The application I intend to develop is specifically targeted at users and institutions in higher or
further education. Therefore, the primary user audience will be students aged 18 and above.
Since some focus of the project will be on plugging the application into existing social
networks and technologies, the primary target audience will also be comfortable web and
mobile users.

With this in mind, I will consider the sort of web sites users in my target audience use
regularly, and try to keep these in mind whilst developing the user experience. Sites such as
Facebook will be particularly useful when developing the interface for the application.

Scenarios
Since the application will be self-contained on a single “dashboard”, the user experience is
more about utilising certain interface elements, rather than traditional web site navigation.

For example, a user that wished to double-check their timetable for the day on the desktop
browser application would log in, then immediately be presented with all the relevant
information. Since the application is self-contained on one page, the user does not need to
navigate, merely check the correct informational element.

Another user who wished to check their assignments on the go could launch the application
on their iPhone or other mobile device, then tab to the correct sub-page to view the required
information. Since the available screen resolution on a mobile device is inherently smaller
than the desktop browser, the site must be logically separated into sub-pages to prevent
information overload. This also improves load times on mobile devices which may be slow to
render pages or load over data networks.

Finally, the application can interface with a user not currently connected to the application, via
SMS or Facebook. The application will be able to push important messages, such as
timetable cancellations, to the user via SMS to their mobile devices. Additionally, the
application can push certain information to a user’s Facebook profile via Facebook connect,
such as assignment hand-in dates, etc.
Competitive Analysis
Presenting the information I propose on the web is not an entirely new idea. There are many
solutions available to students for electronic planning of their studies. Some universities
pioneer their own web-based publishing of information on institution web sites. There are
also third-party developed systems, called “virtual learning environments” which provide
planning and learning resources, which can scale to thousands of students. Recently,
several iPhone applications have been released on the App Store which can provide
supplementary planning and learning resources to students.

Blackboard
Termed a “virtual learning environment” by its developers,
Blackboard has been deployed across many institutions in the
US and United Kingdom. Its basic premise is to provide
information about course content, live communication, quizzes
and mail to supplement the learning environment.

Blackboard is not a direct competitor to the planned project, as its primary focus is to create
an online learning environment which can supplement or replace the traditional environment.

Criticisms of the system from students are varied. Blackboard is considered verbose and
unfocussed, often slow and many users complain about its user interface. These are
complaints common amongst other applications of its nature, such as Moodle or Clarioline,
and it is therefore important to keep these criticisms in mind during development.

iStudiez Pro
A recent iPhone application, iStudiez is a mobile application
designed to aid students in their daily planning. Its main
interface displays a “smart today” page informing the user of
their classes and tasks for the day. The application also features
a calendar, assignment planning and an integrated calendar.

iStudiez is much more of a direct competitor since it deals

directly with many of the features I wish to implement in my
project, without many of the fallbacks of software such as
Blackboard. However, being purely a mobile application, it can
only be accessed from one device. Additionally, it has no direct link to the institution,
meaning the user is solely responsible for keeping it up to date.

Institution web sites

Some educational establishments take it upon their selves
to publish information on their own web sites. The New
Media courses at the Hull School of Art and Design run a
web site which publishes time tables, module information
and learning materials for students at the college.

Sites such as this - especially useful ones - are rare, since

they require specialist skills to either build or keep up-to-date. Though they are invaluable to
students, they still require maintenance, and students will often need to be reminded to keep
checking the site. Since they are purely informational and not interactive, there is no way for
such sites to “push” information to students automatically via SMS or email.
Critical analysis

Introduction
In order to develop a complete, fully functioning and usable application, I must consider the
roles of usability, accessibility, information architecture and relevancy in the project. I must
research sources on these subjects in order to adhere to proposed guidelines and standards.

Additionally, I should use well-established applications as a guide to developing features and

a strong user interface. Facebook is a particularly good example of a site that can be of use
during development, as design and development decisions they make affect hundreds of
millions of users worldwide, and lessons they have learnt can be applied here.

In developing an application as proposed, I am hopefully filling a niche that is not currently

dominated by one lone solution. By combining elements from enterprise-class software like
Blackboard, small-scale mobile applications like iStudiez and social networks like Facebook, I
can hopefully provide a focussed, complete solution to students without requiring existing
infrastructure.

Research sources
Steve Krug’s “Don’t Make Me Think” is an excellent resource
for avoiding and solving usability problems on the web.
Recently, there is an increasing trend for pouring more
attention on usability and the user interface in general, as
poor usage of either can easily result in a failed project when
users fail to gel with the proposed application or site.

I will also consult:

- Professional iPhone and iPod touch Programming. Richard

Wagner. Wrox 2008.

- Web Accessibility: Web Standards and Regulatory Compliance. Various, friendsofed, 2008.

- Web Standard Creativity. Various, friendsofed, 2008.

 Project Content

Content
Architecturally, the proposed application’s structure will be very simple and straightforward to
increase user-friendliness and usability. I feel it will be highly important to avoid any feeling of
“bloat ware” within the application.

Application dashboard
The dashboard is the general user interface which the student will interact with on a day-to-
day basis. All the functional aspects of the application are contained within the dashboard,
and where it is necessary to present information outside of the dashboard, Lightbox-esque
in-screen pop-ups will be deployed to streamline the interface and reduce page-loads.

When the user lands on the dashboard landing page (which will be the same for all users of
the institution), they are prompted to log in. After they have finished using the application,
they can log out and be returned to the log in prompt.

The dashboard will contain the following informational/interactive contents:

- Interactive timetable, with current day highlight and any timetable alerts/notices.

- Getting-things-done-esque interactive planner, for noting assignment hand in dates, with

countdown to given dates and periodic warnings.

- Notepad for quick note-taking and future reference. It may be possible to push these notes
to either email or SMS.

- Dropbox-esque upload feature, for quick dropping of documents and other files for later
access. This is to replicate usb-device functionality.

- Site/institution news feed, for notices and alerts to students. These can be pushed by email
or SMS.

Additionally, I will be working with the Facebook Connect developer API to allow certain
informational elements to be published on a user’s Facebook profile. This will both improve
the user experience (in a world where Facebook is as important as email to many internet
users), and increase interest in the application.
iPhone application
A mobile version of the application will be produced specifically for Mobile Safari, which the
user can add as an icon on their home screen. This version will be functionally identical, but
be specifically optimized for viewing on the iPhone or iPod touch screen.

Marketing site
Additionally, a site must be developed to inform potential students and institutions of what
the software is, how it functions, its requirements and generally market it on the web. This
will contain walk-throughs, screenshots, screencasts and potentially video interviews with
users of the software. I will also mirror the project blog in order to provide an insight to users
of the development process.

Functional requirements
Development
I will develop the project using a multitude of tools and applications. These will include:

- Coda (Mac OS X), for PHP scripting, and front-end scripting such as xHTML, CSS and
Javascript.

- Photoshop CS4 (Mac OS X, Windows), for creating graphics for the project.

- Querious (Mac OS X), for designing and maintaining the SQL database the application will
feed from.

- Screenflow (Mac OS X), for developing screencasts for the marketing web site.

The site will be developed on a Linux based server running Apache, MySQL and PHP. The
server will also run a properly certified SSL connection for end-user security.

End-user
The end user will require:

- A modern web browser with working internet connection, such as:

- Firefox 3.5.

- Safari 4.

- Google Chrome.
- A screen resolution of 1024x768 pixels or higher.

- An iPhone or iPod touch with an internet connection for the Mobile Safari version of the
application.

- A mobile phone to receive SMS alerts and notices from the application.

- An email address to receive email alerts and notices from the application.

- A Facebook profile to use the Facebook Connect features of the site.

Project Structure

Architectural Blueprints
The application itself is based on a simple one-screen structure wherein all of the functionality
is built, so no real navigational structure exists to the actual application. However, the
marketing site that accompanies and promotes the application will likely need a simple one-
level architecture.

Home

Screencast About Sign up

Global and Local Navigation

A site usually uses global and local navigation – the global navigation being displayed on
every page in a common area for simple navigational tasks, and local navigation being page
or area specific. However, given the inherent simplicity of the architecture in my application,
this is not a major concern for the site.
Visual Design
Design Sketches
Please see attached hand-drawn mock ups and sketches.
Appendix

Reference and research material

Websites:

- PHP Documentation (http://uk.php.net/)

- Sitepoint (http://sitepoint.com)

Publications:

- Professional iPhone and iPod touch Programming. Richard Wagner. Wrox 2008.

- Web Accessibility: Web Standards and Regulatory Compliance. Various, friendsofed,

2008.

- Web Standard Creativity. Various, friendsofed, 2008.

Software and technology:

- xHTML

- CSS

- Javascript / AJAX

- MySQL

- PHP

- Coda (Mac OS X)

- Adobe Master Suite (OS X)

Development schedule
Month Decided tasks
September - Develop ideas for project,
discuss with staff.

October - Draft and complete proposal

document
- Finalise ideas for project

November - Finalise visual design for project

- Begin to develop low-level
functionality for project

December -

January

· Add more sources

· Launch initial version of Trakr to get

feedback from users

· Start work on interactive timeline and

desktop application

February

· Continue work on interactive timeline

and desktop application

· Refine web site in response to user

feedback

March

· Launch interactive timeline and

desktop application to get feedback
from users

· Work on evaluation document

April

· Refine interactive timeline and

desktop application

· Continue work on evaluation

document

May
· Hand in evaluation document and
project