Web Application Design – Practical Design
The information below describes a potential web application for a healthy exercise business, along with
a number of design tasks.
Requirements
goParks is a not for profit organisation offering healthy exercise options to all. goParks provides a
web
application that allows people to make outdoor exercise part of their daily lives by finding nearby
places
to enjoy and sharing them with others. The core functionality that goParks offers is the ability to
find
and filter parks that meets an individual’s exercise needs. These could include range from families
with
small children, to exercise enthusiasts or people interested in an entertaining walk.
Once a potentially suitable location has been found, goParks will provide more detailed map-based
information about that location. This will include points of interest such as historical or wildlife
features,
events and competitions that may be happening, gym or play equipment, refreshment/toilet facilities
and suggested routes around the park. In addition, basic transport information will be shown for each
location, including opening times, public transport information, car parking facilities and possible
journey times from visitors’ current location. All this information can be saved by the user to read
later,
whether or not they have an internet connection.
Once physically at the chosen location, registered visitors of goParks with an appropriate network
connection can monitor their current location within a park. This enables them to track their progress
around the park. In addition, they can share their location via their social media accounts with
friends,
making it easier to meet up. Finally, registered users can share details of their visit with other
applications to enable them to calculate the amount and difficulty of the exercise undertaken.
User Experience
Filtering and identifying a park to visit starts with the user selecting a location from either a map
or list
of all available locations. If a specific park has been selected, then information about that location
will
be displayed. If a more general location has been chosen then a list of available parks is shown. This
list
of parks can be filtered, before or after selection, based on the facilities the user is interested in.
Once
an individual park has been selected, transport information can be accessed and it can be saved for
later
use. Users with mobile devices and registered goParks accounts can then log and track their location at
their chosen park on arrival.
Design Tasks
To complete this assignment, you need to complete each of the following design tasks. Each task has an
equal weighting and the criteria for awarding marks are shown for each task separately.
Task 1: User Interaction Design with State charts
Create a state transition diagram to model the basic states that the system goes through during a
users’
visit to the app and potentially a park itself. The diagram should conform to a recognisable
diagramming
notation such as a UML state machine or state transition diagram.
Marks will be awarded for:
o the appropriateness of states modelled [2 marks]
0 the appropriateness of transitions between states [4 marks]
0 complexity and appropriate use of the chosen modelling notation, [4 marks]
e.g. to show events, actions, guards/conditions, start/end states etc
WAD A – 2015/16
Task 2: Page Design Wirefmme
Create two separate low fidelity layouts or wireframe models for the goParks web application:
a) one for the presentation and filtering of available locations; and
b) one for the display of, and interaction with, the detailed park information.
Each wireframe should be annotated to include a description of:
o the main content area for displaying information relevant to the page’s purpose
0 navigation mechanisms and controls for the functionality described above
The navigation options or systems should be based on appropriate use of information architecture
concepts, e.g. navigation and labelling, and should be sufficiently detailed to show the applications
of
these ideas. For example, if a global navigation area is included in the wireframe, the annotation
should
indicate what the main options might be. Local controls should be appropriate to the information being
displayed / manipulated.
In addition, you should provide a short commentary (max 200 words) describing the rationale behind
your design and how it conforms to three design heuristics of your choice. The heuristics should be
clearly identified and come from either the course material or from a published and correctly cited
source.
Marks will be awarded for:
o the selection and layout of appropriate page regions [3 marks]
0 the design of the navigation systems [4 marks]
0 the relevance and detail of the commentary [3 marks]
Task 3: Structural Mark-up using HTML
Create a static HTML page for presenting and filtering available locations that contains the
information
specified by the wireframe design from Task 2a. You are free to use any version of HTML or XHTML you
wish, but you should provide a very short (100 words max) justification for your choice and its impact
on
the applications use. Where content might typically be generated by client-side scripts, you should
substitute static html to mimic dynamically generated data. You may also include elements to support
the use of a style sheet for Task 4 below.
Marks will be awarded for:
o the detail and relevance of the information displayed in the page [2 marks]
0 the appropriateness of the mark-up chosen [4 marks]
0 the accessibility of the markup used [2 marks]
0 the quality of justification for your chosen markup language [2 marks]
Task 4: Presentation Design with CSS
Create a CSS stylesheet to work with your structural HTML from Task 3 in order to produce a realisation
of your design from Task 2.
Marks will be awarded for:
o the use of CSS for the basic styling of individual elements [3 marks]
0 the use of CSS in laying out the page regions [3 marks]
a the organization of styles [2 marks]
0 ability to adapt to different screen sizes [2 marks]