MS801 Web Design & Development

Galway Arts Festival

Final report

DANIELLE AHERNE 16232332

ABDULMAJEED ALSHEHRI 16231020

SARNEEK TIWARI 16231899

MS801 Web Design & Development Planning Report 1

Table of Contents
Introduction ............................................................................................................................................ 4
User Analysis ........................................................................................................................................... 4
Target Audience .................................................................................................................................. 4
User Expectations and Needs ............................................................................................................. 4
Approach ................................................................................................................................................. 5
Brainstorming...................................................................................................................................... 5
Paper Prototype .................................................................................................................................. 5
Storyboard Diagram ................................................................................................................................ 6
Project Management .............................................................................................................................. 7
Overview of Project Stages ................................................................................................................. 7
User Analysis ................................................................................................................................... 7
Conceptual Design .......................................................................................................................... 8
Implementation .............................................................................................................................. 8
Website Design ....................................................................................................................................... 9
Components ........................................................................................................................................ 9
Layout................................................................................................................................................ 11
Navigation ..................................................................................................................................... 15
Basket Glyph icon & Shopping Cart .............................................................................................. 17
Colour Scheme .............................................................................................................................. 18
Fonts & Formats ............................................................................................................................ 19
Computer Literacy......................................................................................................................... 20
Logo ....................................................................................................................................................... 21
Image Editing ........................................................................................................................................ 22
Step 1: Brightness/Contrast Adjustment .......................................................................................... 22
Step 2: Adjust Levels ......................................................................................................................... 23
Step 3: Image resizing and sharpening ............................................................................................. 23
For example: ................................................................................................................................. 24
Editing with Dreamweaver CC 2017 ................................................................................................. 25
Banner Blindness............................................................................................................................... 26
Software ................................................................................................................................................ 26
Language / Code ........................................................................................................................... 26

MS801 Web Design & Development Planning Report 2

Functional Features .............................................................................................................................. 27
Screen Reader ............................................................................................................................... 27
Usability ................................................................................................................................................ 28
Scenario presented to user ............................................................................................................... 28
Heuristic Evaluation .......................................................................................................................... 30
Summary ............................................................................................................................................... 33
Team Task ............................................................................................................................................. 33
Bibliography .......................................................................................................................................... 52
Appendices............................................................................................................................................ 34
Appendix 1 ........................................................................................................................................ 34
Crediting ........................................................................................................................................ 34
Appendix 2 ........................................................................................................................................ 36
Scripting ........................................................................................................................................ 36
Events 2017 (1) ............................................................................................................................. 36
Event 1 (1.1 page) ......................................................................................................................... 38
“Visit” (3.0 page) ........................................................................................................................... 40
Appendix 3 ........................................................................................................................................ 42
Desktop Testing............................................................................................................................. 42
Tablet Device Testing .................................................................................................................... 45
Smartphone Testing ...................................................................................................................... 46
Appendix 4 ........................................................................................................................................ 47
Preliminary Interface Design ......................................................................................................... 48

MS801 Web Design & Development Planning Report 3

Introduction
Festivals in Galway take place right throughout the year from St. Patrick's Day in March to the
Comedy Festival in October. These festivals include many themed events within the categories
of theatre, music, literature and comedy. The identified aim of this project is to promote the
Galway Art Festival, and so this will be the focus of the project. Since Human Computer
Interaction (HCI) has moved beyond simply designing for desktop use, the website will also
allow the user to access the website through multiple devices such as laptop, the smartphone,
as well as tablet i.e. with a view to responsive design and a screen reader option will make the
website more accessible for users with a visual impairment.

User Analysis

Target Audience
The Galway Art Festival has many events and associated activities which cater for different
age groups. However, the promotional website of Galway Arts Festival aims to target the age
group from 18-35 who have an interest in ‘The Arts’ such as; music, theatre, art, etc. Many of
the ticketed events available are targeted this age demographic. The aim of the website is to
attract a local audience i.e. Galway community, as well as a national audience travelling from
all parts of Ireland and for that reason we have also provided a page with tourist relevant
information on the website.

User Expectations and Needs

A contextual inquiry was undertaken by interview with an annual attendee of the Galway Arts
Festival and a persona was drawn up on the user identifying user goals. Since the aim for the
site is to promote events taking place, communication of these events, as well as their details,
venue, times, etc. and their availability, including the ability to buy tickets online needs to be
clearly indicated and the navigation through the website needs uncomplicated and consistent.

MS801 Web Design & Development Planning Report 4

Approach

Brainstorming
The team brainstormed by coming together to put ideas on paper and thereafter created a low
fidelity paper prototype to formalize the initial design concepts . Firstly, the user’s functional
requirements were defined; e.g. searching for a event, viewing event details and purchasing
tickets.

Then the website was designed in a sharp and engaging format to appeal to our target audience
but with a very clear navigational framework to make the website as user friendly and seamless
to use as possible.

Paper Prototype
Paper prototyping is a very effect low fidelity method of getting initial ideas of design on paper.
It is in essence a very basic throwaway prototype and it enables developer to brainstorm their
ideas without specific design restraints. Alteration can be easily made to a layout based on the
feedback provided (Zeng, L., 2009). A sample of these is in Appendix 4

This was one of the initial tasks undertaken by the development team to get a broad
understanding of what the website would look like based on user needs and further define all
the user requirements for further developing the design of the website.

MS801 Web Design & Development Planning Report 5

Storyboard Diagram

Figure 1.0: Storyboard

The figure above contains a storyboard diagram of the navigation through our pages on the site.
The main pages of the menu bar are labelled (1,2,3,4) and the pages which are navigated
According to labelled see above i.e. 1.1 ,2.1 ,3.1, etc.).

MS801 Web Design & Development Planning Report 6

Project Management
Evolutionary Prototyping was agreed upon as the method for the developing this website.
Prototyping is an excellent method to ensure your project stakeholder is satisfied with your
product. The users can be actively involved when using this method which is very important
for a project involving website building [6]. By using Evolutionary Prototyping specifically,
the end product is a working model of your website and so this can give the developers a clear
indication to show if they have met the user’s needs for the website. If the website fails to
function as conceptualised by the user, this can provide timely feedback to the developers [7].
This methodology requires the developers to check errors and deal with them as they develop
the system with is the potential risk when undertaking a project doing this. Time management
will have to be strictly enforced to ensure the team can produce the end product within the set
deadline. The prototyping can be iterative and so if the stakeholder is not happy with the test
prototype, it can be refined to produce the final product.

Figure 1- Evolutionary Prototyping

Overview of Project Stages

User Analysis
User analysis was the primary focus for the team: the target audience and market were clearly
identified. Based on this information the team brainstormed to gather ideas of how we could
meet these user requirements. Roles, responsibilities and associated schedules were put in place
to guide the team and to initialize time management. Policy and security issues were addressed
at the start so that guidelines would be followed through the prototyping.

Quality assurance and testing took place through the prototyping to check for errors and
defects. The stakeholder was consistently involved in the design and implementation, as was
communicated with regularly to review risks.

MS801 Web Design & Development Planning Report 7

Conceptual Design
The team collated information from a collaborative brainstorming and conceptualised a design
using paper prototypes. This low fidelity prototyping allows the team to be creative and allow
a free flow of ideas. Storyboards and Interface Design by using website wire framing helped
to concrete our conceptual design of the website. The Interface design screens were presented
to the stakeholder and any partially complete requirements were identified at this stage.

Implementation
The team refined their design based on changes to initial requirements. At the first stage of
implementation when system design is formed the quality assurer will create tests and will be
responsible for debugging the system throughout. As this project was undertaken and guided
by an evolutionary prototyping methodology. Testing will take place throughout and not at the
end of the development.

Testing
Testing is an essential when creating a responsive website. Testing took place throughout the
project as the prototype was developed. The website was accessed in different browsers and
updated accordingly. Multiple Device Resolutions were tested testing using the online quirk
tools website [25]. This allowed us to verify the website in resolutions for multiple types of
phone, tablets and monitor screens to verify content images and banner images responded
correctly with the adjusted screen view.

In the case failure of an image loading, all images have an alt tag so if the image does not load
the user knows what the image was supposed to represent. We also verify the resolution of
content was maintained when undertaking the device platform testing.

The code for the main components of the website, like the navigation bar are repeated on every
page and we needed to test to make sure no pages were missed when a change was required.
We develop a plan for testing all of the website content on each page to make sure it was
consistent and had not been broken by any updates made to the code.

Refining
After the prototype of the website was successfully created, we ensured that it was fully
functional with no errors or defects, and then it was presented to the stakeholder. The website
was intensely tested to ensure complete functionality before producing the final version of the
fully functional prototype.

Completion
The final product fully met the requirements set out by the stakeholder and the user experience
was highly rated.

MS801 Web Design & Development Planning Report 8

Timeline

Period
Project Plan # Days 24 25 26 27 28 29 30 31 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
Project start 1
Planning and project proposal 9
Analysis and design 8
Development and Coding
14
Testing
Documentation 1
Poject Endna Final project 1

Actual date
Paln date

Website Design
The website was designed with the target audience in mind. Utilising good website design from
consulting well established guidelines such as Jakob Nielsen’s Designing Web Usability: The
Practice of Simplicity, 1999, [1] and IBM’s visual design layout principles [2], contributed to
the design of the website being, clear, concise and attractive to the key end user group. The use
of bright and vibrant images reinforces this and resonates with the ethos of the Arts Festival
itself.

In order to achieve a finite definition of the market audience requirements, contextual inquiry
was used when interviewing a regular Galway Arts Festival attendee and prospective end user.
This provides a key insight into understanding what the user’s expectations are in relation to
the website and how the home page should be designed. This information gave direction to
highlight the upcoming events for 2017 on the homepage. In defining the pages required within
the site other user needs were considered.

These included an ‘About us’ page to give a background into what the Galway Arts Festival, a
‘Visit’ page which provides useful tourist information and promotes local Galway businesses
and finally a ‘Find us’ page which provides travel information and contact information for the
box office and the festival itself. Standard website features including a search facility, shopping
cart and checkout were also included.

Components

Page template
It is important to maintain a consistent layout of web pages of a website but websites usually
have an average of 5-10 page templates [4]. Of the 12 pages were created, the website has 5
different templates which are slightly different in layout but with a standard navigation
template on each page to ensure the user is not disorientated.
MS801 Web Design & Development Planning Report 9
 Figure 2- Page template

Meta Tags
Meta tags were used in order to make the website Search Engine Optimization compatible
and visible to search engines to direct as much internet traffic to the website as possible.

MS801 Web Design & Development Planning Report 10

 Figure 3 - Meta Tags

Layout
The following principles were followed for the design of the website:

● Orientation
All webpages are automatically be displayed in the orientation of portrait (set by the
media query) and breakpoints delineate the points at which the user’s view will
change according to the device i.e. (usually at 320px and 480px), tablet (768px and
1024px) and desktop (above 1024px) [1];

Figure 4 -Smart Phone

MS801 Web Design & Development Planning Report 11

 Figure 5 - Desktop View

Figure 6 -Tablet View

● Balance:
All the elements on each web page are symmetrically balanced and have conformal
alignment.

MS801 Web Design & Development Planning Report 12

 Figure 7- web page is balanced

MS801 Web Design & Development Planning Report 13

 Figure 8 - web page is balanced

● Rhythm:
The webpage adhere to the same rhythm in layout. We have chosen flowing rhythm
directing the user to view left hand side until bottom of the page and then view right
hand side until bottom of the page;

Figure 9 - Flowing Rhythm

● Proportion:
MS801 Web Design & Development Planning Report 14
 Images are displayed as placeholder links and are present across slide shows in the
banner. Each of these will be sized uniformly according to each other taking into
account where they will be located on the page. The margins and padding will be
adjusted accordingly also for each feature;
● Dominance:
Elements in the foreground, middle ground and background will be identifiable on each
page where appropriate to draw the user’s attention to the most important features.

Navigation
The website has been designed so that the user can access any of the webpages from a single
click. The only exception is the Order confirmation page as of course a succession of web
page clicks needs to be followed to process an order.

Navigation bar
For the navigation bar we implemented Bootstrap's navbar template. We incorporated UI
Design when developing this feature as the nav bar, setting it to static (so it stays at the top of
the page as the user scrolls) ensuring that the navigation links are always easily accessible this
insures ease of navigation for the user as well as efficiency of use which ultimately contributes
to a positive user experience. We utilised this feature based on the available bootstrap navbar
static example code [15].

Glyph icon Hamburger Navigation

When the resolution is reducing, on a mobile device for example, the built in Bootstrap navbar
is designed to collapse and make a hamburger styled icon visible. This makes the menu bar
compact for a mobile screen resolution but still easily accessible for the end user. We developed
this feature based on openly available bootstrap navbar functionality and glyph icon [26].

Dropdown
There is a dropdown option on the navbar which makes more links accessible to the end user.
The dropdown allowed for extra links to be included in the navbar but prevented the it from
becoming too cluttered. The drop down is segmented into three parts to make it easier to read
by grouping content pages like current events together.

Call to Action Buttons

Social media Call to Action buttons were included on the navigation menu bar to direct the
user to follow us on the links (Facebook, Twitter, Instagram, etc.). We chose these links as they
are popular with the age of our target market. On each ‘Event’ page, there will be a ‘Book
Tickets’ and 'Checkout' call to action buttons in orange to make this stand out and urge the user
to click. On the order confirmation page, no items are added to the basket and the using default
Bootstrap style, the checkout button is disabled and cannot be clicked (as there are no items to
checkout).

MS801 Web Design & Development Planning Report 15

Textual Links
Textual links were included at the bottom of the web pages in the footer. These will include:
terms and conditions, privacy & cookies policy). After researching other pages found online of
similar theme, we deduced that it would be important to include these in our pages. Textual
links have also been included in the paragraph text of the event panels and on the find us page
for email links.

The links were identified as suggested by Nielson’s guidelines [3], but using a different colour
and “>>” indicators to also make the links more visually symbolic and easily identifiable so
that it will make it clear to the user that these are clickable. Link rollovers occur when a user
hovers over a link it changes colour. The current page selected by the user is highlighted to
ensure clarity. Links were created for social media (they are hard coded to the root website
pages for demo purposes e.g. www.facebook.com)

Image Placeholder Links

Image Placeholder links were displayed in the Homepage - “Events 2017”. Each event has a
placeholder image defined by use of panels which when clicked on will direct the user to a
page detailing information on this event. We used bootstrap container example tutorials [16]
and bootstrap grid, breakpoint code examples [17][18], to help us understand and implement
these layouts in our website [19].

MS801 Web Design & Development Planning Report 16

 Figure 10 - Image Placeholder Links

Basket Glyph icon & Shopping Cart

We used the basket glyph icon as an easy to use way for the user to see their purchases and
change the quantity of their selection conveniently. Selecting this icon will bring up their

MS801 Web Design & Development Planning Report 17

shopping cart selection and enable the user to proceed to payment. This feature was selected as
part of UI design and it is hoped this will greatly improve user experience on the site.

This feature was intensively researched, through tutorials and blog provided the team to
decipher what code would work particularly to get the quantity to change, we used Java Script
to complete this function [20]-[24] (see crediting and reference for detail). Although this was
not essential to include this for the purposes of this project we felt it gives a better picture of
the design thought process that went into usability and UI Design for the end user.

A bootstrap badge was used to identify to the user when ticket was selected. Glyph icons and
badges were used for the purpose of controlling sizing as these elements will never pixelates
and it is better practise than using images which are not as predictable when creating a
resolution responsive website. We have hard coded one product into the shopping cart for the
purposes of this demo.

Figure 11- Basket Glyph icon

Colour Scheme
The background, middle ground and foreground colour schemes differ slightly between pages
according to the layout of each page. For the most part, the images reflect the colour necessary

MS801 Web Design & Development Planning Report 18

to stand out, and so these needed to be carefully considered when presented in the background.
The font colour of content is set to a dark colour throughout the web site to aid readability.

The colour scheme is consistent across all the webpages so as to ensure it is legible, easy to
navigate and thus not disorientating for the end user. For the detailed pages on evening events
images with a dark colour scheme were selected to conceptually represent a ‘night out’ feel to
the page. There is substantial contrast between dark and light colours on each page to convey
the vibrancy of the festival itself and reinforce the engagement with the target audience.

Figure 12 - Colour Scheme for the home page

Figure 13 - Colour Scheme for the event details

MS801 Web Design & Development Planning Report 19

Fonts & Formats
The font type has been set to belong to the family of sans serif. This is a commonly used font
type for website which is considered to be easy to read [8], particularly for the visually impaired
as the characters are more easily recognisable [9].

The website was tested to ensure readability was consistent across all platforms. Media queries
were used in the CSS to enable elements of the pages to adapt when viewing the site using
different devices. A minimum font size of 16 pixels was advised by many guidelines [9] [10].

Computer Literacy
It is anticipated that the website target audience will be highly familiar with internet usage but
even so, we have designed the website to in-keeping with current webpage dominant design in
relation to the page flow and structure. For example, on a desktop view menu bars are normally
expected to be located at the top or left-hand side of the page. This reduces the need for the
user to familiarise themselves with an unanticipated layout and thus makes navigating the
website more efficient.

Icons have also been used to increase efficiency due to an end user’s immediate and pre-defined
expectation of what an icon represents.

Examples include:

➢ A speaker icon represents a screen-read functionality. When this function is activated a

voiceover, message is played based on the page element the user is hovering over or
the paragraph of text they click on. This may make the website more accessible for a
visually impaired user.
For the purposes of the demo we only used this sample functionality in the index.html
on the events icons and text. For a full Implementation, this could be expanded for all
elements.

MS801 Web Design & Development Planning Report 20

 Figure 14 - Speaker icon

➢ A basket icon represents a link to the shopping. When an item has been already to the
basket, a small number is placed over the basket to highlight items have been already
to the basket (for the purposes of a Demo, a set of tickets has been added to the shopping
cart by default to demonstrate this functionality)

Figure 15 - Basket

MS801 Web Design & Development Planning Report 21

Logo
We used a website online logo maker, online favicon maker, as well as Photoshop to create the
logo for this project. When designing the logo, we kept the design simple and clear so that it is
suited to responsive design i.e. when accessing the site across many different platforms, the
logo is distinguishable.

The blue colour was chosen which can describe city by sea. The colour of the logo is also
blends with different images displayed on the site, we did not choose very strikingly bright
colour for this reason as we do not want it to clash with the overall colour scheme of the pages.

We included the quaver in the ‘G’ to hint at the musical theme and the flowing dash crossing
the ‘A’ and circle for the ‘F’ to hint at the artistic theme of the festival events.

Figure 16 -Online Logo Maker

The favicon is visible on the internet tab (figure 1.3) this allows the user to quickly identify the
webpage tab if they have several tabs open in their browser.
Figure 17-favicon displayed the internet tab

Image Editing

Step 1: Brightness/Contrast Adjustment

Most images used for the website were of a high resolution and often did not require
adjustment. Where applicable a static adjustment was made to images where the brightness and
or contrast were altered.

MS801 Web Design & Development Planning Report 22

 Figure 18 - Adjusting Brightness/Contrast

Step 2: Adjust Levels

Any images which did not use full tonal range were altered by adjusting the shadow input slider
and the highlight input slider to give an overall sharper appearance to the image.

Figure 19 - Adjusting Levels

Step 3: Image resizing and sharpening

The images were resized by using the image resize option. The images for the banner had to fit
the correct dimensions for responsive design.

MS801 Web Design & Development Planning Report 23

 Figure 20 -Image Resizing

For example:
The image above was selected from the Galway International Arts Festival webpage. The
image had to be adjusted in size as it’s dimensions were too large. Adobe Photoshop CC 2017
was used for this task. We resized its width to 240 Pixels and height to 148 Pixels. It was also
necessary to crop the image to fit them within the html div panel. Additionally, filters were
used to sharpen their appearance.

MS801 Web Design & Development Planning Report 24

 Figure 21 - Image Resizing

Figure 22 - Image Sharpening

Editing with Dreamweaver CC 2017

To get an idea of size the design and live view tool view was used in Dreamweaver. This was
essential so that each image on each page would look identical in sizing to keep a level of
consistency throughout.

MS801 Web Design & Development Planning Report 25

 Figure 23 -Using Dreamweaver

Banner Blindness
It is important to be aware of user instincts and natural behaviours of a user and indeed a
consumer. Studies from eye tracking studies indicate that if users have a pre-determined focus
going on a webpage or are engaged by a story or content on a webpage they will not focus on
banners on the webpage [35]. However, moving objects can cause a user to focus due to co-
evolutionary prey predator responses [37]. This was considered in our final prototype before
going live and so we made our static timeline banner into a carousel slideshow to attract the
user to images from some of the past events of the Galway Arts Festival to persuade the user
to explore the site.

Software

Language / Code
Hypertext Mark-up Language (HTML) was used to build the web pages for the site. We used
Dreamweaver CC 2017 to view, design and code the website. To set styles and apply formatting
to the webpages we used some external elements from Bootstrap and the CSS styles for these
also. The website contains some elements which have been hard coded (for demo purposes)
and JavaScript for functionality purposes to get a full picture of the start to end UI process.

MS801 Web Design & Development Planning Report 26

Functional Features

Screen Reader
We included a speaker glypican to represent a screen read function on each of the pages of the
site across all platforms. Theoretically when clicked it would enable a visually impaired user
to be able to interact with the site. When the user hovers over the placeholder images or the
menu options for example, a screen reader will identify the item and this will be announced so
that the user can click if he wishes to navigate.

For paragraphs of text the user can click on the text to have it screen read as a hover
functionality on every page element could prove annoying to an end user. Other considerations
were taking into account in the design also to make it easy for the visually impaired; the font
size was set at 16 pixels for the body as suggested according to the Nielson guidelines [1], [11].

MS801 Web Design & Development Planning Report 27

Usability

Scenario presented to user

You have heard that the Galway Arts Festival are hosting the Coronas this year. You want to
go online to book a ticket. Please select one ticket and continue until you reach the purchasing
of this ticket and you are asked for your details. Focus on this task only. When completed you
may stop the test.

Usability Test
Task Navigate to the purchase Achieved: Yes
sequence: page
No Navigation Expected Response Time Actual
Response Time
1 Homepage-->Coronas link 5 seconds 7 seconds
(placeholder)
2 Coronas event page--> 5 seconds 4 seconds
shopping cart
3 Shopping cart-->checkout 10 seconds 7 seconds
page

The expected response time varied from the actual response time due to factors which the
development team were not able to identify by just the design, for example: due to the
development team’s familiarity with home page from regular use during testing and
development, the response time for task sequence no. 1 resulted in an overestimation.

MS801 Web Design & Development Planning Report 28

 Post- test Interview

Usability Test
No Question Answer

Does the website let you sucessfully do what you

1 Yes
expected

Do you think the website's design matches its

2 Yes
purpose?

What's the first thing users would want to do on this

3 Find an event - Yes easily
website? Can you do that?

When exploring the website, are you confused at any

No,it is very clear and easy to
4 point? Is there anything distracting you or getting in
neviagte
your way?
About us page or visit I just need
5 Are there any features you have completely ignored?
to buy ticket

Does the information architecture and navigation make Yes,every page is easily
6
sense? (Can you find what you are looking for?) accessible

I think it works well for people

Do you feel the website was designed for you or for
visiting galway or locals.Being
7 people from Galway or who would be from same age
easy to use makes it a user
group ?
friendly webiste for all ages

Please rate your satisfaction with the “look and feel” of

8 9
the website from one to ten
How easily were you able to navigate to the payment
9 page, please rate out of ten: ten being very easy, one 10
being difficult

From the response times, task test and the post-test interview, we can deduce that the user was
quite satisfied with the aesthetics, navigation through the site and general functionality of the
site for this task. In this scenario, the user had one specific focus and did not need to use other
features on the site but we can conclude from the interview that the user felt that the website
was suited for others of similar persona who might visit the site.

MS801 Web Design & Development Planning Report 29

 Heuristic Evaluation
Heuristic evaluation is a method of usability engineering where design flaws can be easily
identified [32]. The interface is analysed by a small number of evaluators who have the
expertise to recognise if heuristic principles have been met when examining the website based
on a pre-determined set of rules [33]. Nielsen’s Ten Usability Heuristics are well established
guidelines for good web design. The figure below highlights the ways in which we incorporated
good heuristic design in the development of our website.

Nielsen’s original Implementation of heuristics

heuristics
Visibility of system ✓ Dot slider icon indicates other images will be displayed in
status. slideshow & the webpage will show them in a sequence
✓ Order confirmation page lets user know that order has been
completed successfully with a summary of what was ordered.
✓ The number div on the basket allows user to see that they have
made a selection and it has been temporarily stored
Match between system ✓ Basket glyphicon acts as a metaphor: mimics checkout for
and real world. purchases in real world and ticket purchase on the site.
✓ Content was created in accordance with the interests of the
target audience
User control and ✓ Navigation menu available to user on any page to switch
freedom. between pages on the site.
✓ Dropdown menus allows for more links to be made accessible
to the user without compromising the clear website navigation
design
✓ User can access any webpage on a one-step navigation to
another page (except for payment process)
✓ Nav bar is set to static so that is can be seen at all times when
scrolling making the links always easily available
✓ Links to social media are included in the navbar allowing the
user to interact with the webpage via their social media profiles
Consistency and ✓ Character set -Utf8
standards. ✓ Specified language of the website as English
✓ Set doc type at the top as html
✓ Meta tags with keywords used for Search Engine Optimization
✓ Consistent colour scheme throughout
✓ User can access any webpage on a one-step navigation to
another page (except for payment process)
✓ Nav bar is set to static so that is can be seen at all times when
scrolling
Error prevention. ✓ Tested on different browsers to ensure cross browser
functionality
✓ Multiple resolution variance testing
✓ Page elements will re-size in accordance with screen resolution
✓ All images have an “alt” attribute to ensure the image is
described in case it does not load correctly
✓ Ensuring compatible page rendering on the end user’s device
✓ Checkout button is disabled when the shopping cart is empty
MS801 Web Design & Development Planning Report 30
 ✓ If the user enters a non-numeric value for the quantity in the
shopping cart then an error will be displayed
✓ Checkout page will validate that each of fields are correctly
populated, e.g. email address has an “@” symbol (this is not
currently functional in the demo website)
✓ The website cannot operate correctly without JavaScript
enabled on the user’s browser, the use of a <noscript> html tag
allows the website to identify browsers which do not have
JavaScript enabled and alert the end user.
Recognition rather than ✓ On hover over navigation tabs link is highlighted
recall. ✓ Rollover tooltip on images to describe them or ensure they are
described correctly in case the image does not load correctly
✓ Logo Links to social media
✓ Basket icons allows user to understand by metaphor that this
will take them to the shopping cart panel
✓ The Hamburger icon is a common default icon used to represent
a menu and is easily identifiable when viewing the website on a
mobile device
✓ The screen read icon is a volume icon for being turned on and a
mute volume icon for being turned off which is intuitive for an
end user
Flexibility and efficiency ✓ Responsive design: compatible across different platforms-
of use. mobile, tablet, desktop, etc.
✓ Placeholder links facilitate fast, easy to use navigation.
✓ Hamburger icon allows easy navigation from page to page when
accessing the site from a mobile device.
✓ Dropdown menus allows for more links to be made accessible
to the user without compromising the clear website navigation
design.
✓ User can access any webpage on a one-step navigation to
another page (except for payment process)
✓ Nav bar is set to static so that is can be seen at all times when
scrolling.
✓ Links to social media
✓ Basket icon allows user to access shopping cart and thus the
checkout page from any webpage
✓ Book ticket call to action button on event pages to allow user to
add to shopping cart
✓ Quantity box will cause an update when you change the value
and click outside the input box.
✓ Delete icon box will cause an update which sets the quantity to
zero and the subtotal and total values to €0.00
✓ Shopping cart has functionality that allows the user to specify
the quantity of ticket they want for an event and will update the
totals accordingly
Aesthetic and ✓ Clear design: white background acts to improve contrast and
minimalist design. focuses user’s attention.
✓ User can access any webpage on a one-step navigation to
another page (except for payment process)
✓ Rollover tooltip on images to describe them

MS801 Web Design & Development Planning Report 31

 ✓ Basket icon and hamburger menu icon are examples of
minimalist design
✓ UI Design: clear header, image with link and blurb of text, also
containing a link- avoids cluttered appearance
Help users recognize, ✓ Inclusion of “alt” tag: labels an image if error occurs in loading
diagnose, recover from image user still knows what image is supposed to represent
errors. ✓ No script warning “Your browser doesn't support JavaScript!
Please enable JavaScript and reload this page!” tells the user
that they do not have JavaScript enabled and that it is required
for the website to function correctly
✓ Checkout page will validate that each of fields are correctly
populated, e.g. email address has an “@” symbol (this is not
currently functional in the demo website)
Help and ✓ Footer includes links on copyright, cookies, etc.
documentation. ✓ Screen read icon enables visually impaired users to navigate
through the pages.
✓ The clear menu layout and immediately identifiable icons make
the website more self-explanatory and easy to navigate

MS801 Web Design & Development Planning Report 32

Summary
Evolutionary Prototyping was selected as the methodology for this project due to the high level
of user involvement required and the detailed user requirements it furnished us with. In depth
end user involvement proved vital in developing a robust and user friendly interface design and
highlighted useful features that could have been overlooked without end user input during the
various stages of design, development and usability testing.

Using the evolutionary prototyping methodology, issues were identified sooner and as more of
a test-driven development approach was used, defects were addressed earlier in the
development lifecycle. This also contributed in achieving fixed deadlines required by the client
which was a weighted constraint on the project. Also, the user of existing, industry standard
libraries such as Bootstrap and JQuery greatly reduced development time and due to vast
amounts of online information, developers had access to a large knowledge base of material
for implementing these frameworks

The development team examined the design of some of the features within the existing official
Galway International Arts Festival website to identify components which were compliant with
heuristic principles set out by Jacob Nielsen. The navigational elements of the website were
designed to be minimalistic and flexible, allowing users to navigate between web pages with a
minimal number of clicks. It was also designed to support both multi-platform use and for end
users with visual difficulties via the provision of screen reader function.

Team Task
Tasks Sub tasks Assigned To
Introduction ABDULMAJEED
User Analysis and Audience age DANIELLE / SARNEEK
Project management and development methodology DANIELLE
Timeline ABDULMAJEED
Planning and Project Proposal Colour scheme and Layout DANIELLE
Logo ABDULMAJEED
Storyboard ABDULMAJEED
Script DANIELLE / SARNEEK
Interface design The Whole team
Researching ABDULMAJEED / DANIELLE
Dealing with PhotoShop The Whole team
Changing image SARNEEK
Development and Coding Coding html/css/ java script ABDULMAJEED / DANIELLE
Update the contents SARNEEK
Testing DANIELLE
Usability Test DANIELLE
Taking screenshot SARNEEK
Updating the Final Project The Whole team
Documentation and Final Project Formtting the Final Project ABDULMAJEED
Technial writing DANIELLE
Creating a Credits Page DANIELLE

MS801 Web Design & Development Planning Report 33

Appendices

Appendix 1

Crediting

Development Tools
We used a Dreamweaver CC 2017 software as a tool to view, design and code the website. We used
Bootstrap components and their css code to develop icons,etc on the website. We used tutorial
guide and code from blogs and sites such as html goodies to understand how to add some elements
of functionality to our pages. The text below details the source which helped us build the
components of our website. We as a team give full credit to the sources of these components and
we do not claim this code which we extracted as our own:

Industry standards
Research: http://blog.lemonstand.com/11-website-navigation-best-practices/

Navbar
Code: http://bootstrapdocs.com/v3.0.3/docs/examples/navbar-static-top/

Shopping Cart Glyphicon

Code: http://getbootstrap.com/components/#gylyphicons

Code: http://getbootstrap.com/components/#badgess

Slider
Code http://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp

Code bootstrap CSS and JS and JQuery

Grid for panels

Research: http://codepen.io/ncerminara/full/omChv/

http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-
system.php

Code: https://getbootstrap.com/examples/grid/

Panels
Code: http://bootstrapdocs.com/v3.0.3/docs/components/#panels

MS801 Web Design & Development Planning Report 34

Buttons
Placed on Events Page / Shopping Cart / Checkout / Order Confirmation Page

Code: http://getbootstrap.com/css/#buttons

Resolution
Research: http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-responsive-
layout.php

Code: media query in CSS

Testing using online screen resolution simulator

Shopping Cart:
Code: http://www.w3schools.com/js/tryit.asp?filename=tryjs_events_onblur

Updating & Deleting Quantity : https://www.sitepoint.com/community/t/javascript-to-calculate-

shopping-cart/16925/2

JavaScript Functionality
Checkout button & passing total to checkout page:

http://www.htmlgoodies.com/beyond/javascript/article.php/3471111

Checkout: Input boxes designed using bootstrap template

Code: http://bootstrapdocs.com/v3.0.3/docs/components/#input-groups

MS801 Web Design & Development Planning Report 35

 Appendix 2

Scripting
For this section of the assignment we have just included the homepage (1), an event page (1.1) and
the Visit page (3) as a presentation of the content included. We chose these pages as they emphasis
our decisions for contents body text which was based on the target audience and their needs i.e.
young visitors to Galway will be interested in staying in hostels for example.

Events 2017 (1)

The page will be a single column page containing 6 placeholders; “Event 1”, “Event 2”, “Event
3” ,“Event 4”, “Event 5” and “Past Events” . Alternate text will be entered for the images in
the placeholders .

Header : Logo & speaker icon.

Menu:
Events 2017

Event 1

Event 2

Event 3

Event 4

Event 5

Past Festivals

About us

Visit

Find us

Footer: © 2016 Galway Arts Festival Ltd. Registered in Ireland no.

+353834705715 [email protected]
Privacy & Cookie Policy Terms & Conditions Sitemap

Screen Reader
If a visually impaired person opens the homepage on a desktop, the user will move the cursor
until the user hovers over the speaker icon. The screen reader will announce “click now to
activate Voice Over”. When the user hovers over the menu bar the following will be
announced: “Events...Click to select page”, “About us ...Click to select page”, “Visit... Click to
select page”, “Find us...Click to select page”

MS801 Web Design & Development Planning Report 36

When the user hovers over the event placeholders the following will be announced:

o Event 1 placeholder link: “Comedy Event ….Dead Cat Bounce...click to access page for
information on description, venue, dates or to book tickets.”
o Event 2 placeholder link:“Music Event ….The Coronas...click to access page for
information on description, venue, dates or to book tickets.”
o Event 3 placeholder link:“Comedy Event ….David O'Doherty...click to access page for
information on description, venue, dates or to book tickets.”
o Event 4 placeholder link:“Theatre Event ….Macnas Parade...click to access page for
information on description, venue, dates or to book tickets.”
Past Events placeholder link: “Past Events...click to access page on details of past
events”...etc.

MS801 Web Design & Development Planning Report 37

 o

Event 1 (1.1 page)

Header: “Dead Cat Bounce” & speaker icon.

Menu:
Events 2017

o Event 1
o Event 2
o Event 3
o Event 4
o Event 5
o Past Festivals

About

Discover

Find us

Content:

“DATE & TIME: Thursday, January at 8pm

Matinees : Evening

Extra tickets now released.

TICKETS: €15

VENUE: Roisin Dubh”

“An unrelenting, high-energy hour of sketches complete with live music and live sound
effects. Dead Cat Bounce's unique blend of sketch comedy and blistering musical
performances has won them huge critical acclaim. Guest MC Jarlaith Regan is one of the
fastest rising stars of Irish comedy while support comes from Jack Wise - a magician with
attitude.”

Right Col: Call to action button“ Book ticket” will be identified.

Footer: “© 2016 Galway Arts Festival Ltd. Registered in Ireland no.

+353834705715 [email protected]
Privacy & Cookie Policy Terms & Conditions Sitemap”

MS801 Web Design & Development Planning Report 38

Screen Reader
If a visually impaired person clicks into an event page, the user will still have the screen reader
activated. The screen reader will announce “Dead Cat Bounce Comedy Event…..If you wish to
hear description about this event press enter…..if you wish to proceed to buy tickets press
the tab button”.This will direct the user to their desired action.

MS801 Web Design & Development Planning Report 39

“Visit” (3.0 page)
Menu:
Events 2017

About

Visit

o Transportation

o Where To Stay

o Sight To See

Find us

Header 1: “Transportation”

Content:“There are variety of transportation in Galway:

Rail: Iarnrod Eireann operate return services daily from Galway to Dublin.

Bus:The GoBus.ie offer some great deals and run up to 19 daily services to and from Galway
city with all their coaches offering free wifi and sockets.

Car Rental:Most major car hire companies operate from airports and seaports in Ireland. We
recommend Festival Friend Europcar.

Taxi Company:You can find Taxi on city but they have website like halo Big O Taxis e.t.c. they
supplying a fast and friendly service to your door within minutes.”

Header 2: “Where to stay”

Content: “In Galway there are 5-star luxury escapes, cheerful hostels and friendly B&Bs for
the budget-conscious... Galway has the perfect haven, with the perfect price tag, for every
traveller.”

Header 3: “Sights to see”

Content: “Galway is a perfect base to explore the wide range of attractions dotted outside of
the city. Within a short distance by bus or car you can visit any of the places listed below.

Aran Islands, Cliffs Of Moher, The Burren,Connemara.”

Footer: “© 2016 Galway Arts Festival Ltd. Registered in Ireland no.

+353834705715 [email protected]
Privacy & Cookie Policy Terms & Conditions Sitemap”

MS801 Web Design & Development Planning Report 40

Screen Reader
If a visually impaired person clicks on the Visit page, the user will still have the screen reader
activated. The screen reader will announce.

“If you wish to hear description about transportation press enter…..if you wish to proceed to
the link to suggested transportation press the tab button”.

“If you wish to hear description about where to stay press enter twice…..if you wish to
proceed to the link to suggested where to stay press the tab button twice”.

“If you wish to hear description about sights to see press enter three times…..if you wish to
proceed to the link to suggested sights to see press the tab button three times”.

This will direct the user to their desired action.

MS801 Web Design & Development Planning Report 41

 Appendix 3

Desktop Testing

MS801 Web Design & Development Planning Report 42

MS801 Web Design & Development Planning Report 43
MS801 Web Design & Development Planning Report 44
Tablet Device Testing

MS801 Web Design & Development Planning Report 45

Smartphone Testing

MS801 Web Design & Development Planning Report 46

 Appendix 4

Paper Prototype

MS801 Web Design & Development Planning Report 47

Preliminary Interface Design

Desktop View for first page

Figure 3: Homepage

The figure above displays the preliminary Interface design of the website using a desktop. It
opens under the menu tab Events 2017. Each placeholder image will act as a navigation link.

It contains the logo, the menu bar and social media links at the top of the page. Footer
contains copyright information and links. Speaker icon detailed in mobile view

MS801 Web Design & Development Planning Report 48

Desktop View for event page

Figure 4: Event 1 page

The figure above details the event 1 page looks like (after clicking the L.H.S placeholder on
the homepage). The left column details the desciptive content, the right column details the
event details and has a Call To Action link to encourage the user to book tickets. The
placehoder banner below dispays other 2017 events. Footer contains copyright material and
links. Speaker icon detailed in mobile view.

MS801 Web Design & Development Planning Report 49

Smartphone view

MS801 Web Design & Development Planning Report 50

MS801 Web Design & Development Planning Report 51
Bibliography
[1] Nielson, J. (1999). Designing websites with authority. United States: New Riders.

[2] IBM Design Language. (2016). IBM Design Language | Visual: Layout. [online] Available
at: http://www.ibm.com/design/language/framework/visual/layout/ [Accessed 25 Oct. Nov.
2016].

[3] Nngroup.com. (2016). Guidelines for Visualizing Links. [online] Available at:
https://www.nngroup.com/articles/guidelines-for-visualizing-links/ [Accessed 26 Oct. 2016].

[4] Circle S Studio. (2016). 25 Web Design and Development Terms Every Marketer Should
Know. [online] Available at: https://www.circlesstudio.com/blog/25-web-design-
development-terms-every-marketer-know/ [Accessed 26 Oct. 2016].

[5] Alistapart.com. (2016). More Meaningful Typography. [online] Available at:

http://alistapart.com/article/more-meaningful-typography [Accessed 2 Nov. 2016].

[6] Antón, A., Carter, R., Earp, J. and Williams, L. (2001). EPRAM: Evolutionary prototyping
risk analysis & mitigation (eCommerce Software Development Process Document). North
Carolina State University.

[7] Istqbexamcertification.com. (2016). What is Prototype model- advantages,

disadvantages and when to use it?. [online] Available at:
http://istqbexamcertification.com/what-is-prototype-model-advantages-disadvantages-
and-when-to-use-it/ [Accessed 1 Nov. 2016].

[8] Thesitewizard.com. (2016). Which Font Should I Use for My Web Page? Tips on Choosing
Fonts for Your Website (thesitewizard.com). [online] Available at:
https://www.thesitewizard.com/webdesign/which-fonts-to-use.shtml [Accessed 1 Nov.
2016].

[9] "Tips For Making Print More Readable - American Foundation For The Blind". Afb.org.
N.p., 2016. Web. 20 Nov. 2016.

[10] "Use Legible Font Sizes | Pagespeed Insights | Google Developers". Google
Developers. N.p., 2016. Web. 20 Nov. 2016. [11] Varvy.com. (2016). How to use legible font
sizes for all devices. [online] Available at: https://varvy.com/mobile/legible-font-size.html
[Accessed 2 Nov. 2016].

[12] Thesitewizard.com. (2016). Which Font Should I Use for My Web Page? Tips on
Choosing Fonts for Your Website (thesitewizard.com). [online] Available at:
https://www.thesitewizard.com/webdesign/which-fonts-to-use.shtml [Accessed 2 Nov.
2016].

[13] Teach-ict.com. (2016). Teach-ICT A2 Level ICT OCR exam board - The System Life Cycle,
prototyping, rapid application development, RAD. [online] Available at: http://www.teach-
ict.com/as_a2_ict_new/ocr/A2_G063/331_systems_cycle/prototyping_RAD/miniweb/pg3.h
tm [Accessed 3 Nov. 2016].

MS801 Web Design & Development Planning Report 52

[14] W3schools.com. (2016). Bootstrap Glyphicon Components. [online] Available at:
http://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp [Accessed 18 Nov.
2016].

[15] Bootstrapdocs.com. (2016). Static Top Navbar Example for Bootstrap 3.0.3
Documentation - BootstrapDocs. [online] Available at:
http://bootstrapdocs.com/v3.0.3/docs/examples/navbar-static-top/ [Accessed 17 Nov.
2016].

[16] CodePen. (2016). Bootstrap 3 Container Examples and Common Misuse. [online]
Available at: http://codepen.io/ncerminara/full/omChv/ [Accessed 16 Nov. 2016].

[17]Getbootstrap.com. (2016). Grid Template for Bootstrap. [online] Available at:

https://getbootstrap.com/examples/grid/ [Accessed 17 Nov. 2016].

[18] Tutorialrepublic.com. (2016). Understanding the Bootstrap 3 Grid System - Tutorial

Republic. [online] Available at: http://www.tutorialrepublic.com/twitter-bootstrap-
tutorial/bootstrap-grid-system.php [Accessed 18 Nov. 2016].

[18] Bootstrapdocs.com. (2016). Components · Bootstrap 3.0.3 Documentation -

BootstrapDocs. [online] Available at:
http://bootstrapdocs.com/v3.0.3/docs/components/#panels [Accessed 18 Nov. 2016].

[19] Tutorialrepublic.com. (2016). Understanding the Bootstrap 3 Grid System - Tutorial

Republic. [online] Available at: http://www.tutorialrepublic.com/twitter-bootstrap-
tutorial/bootstrap-grid-system.php [Accessed 18 Nov. 2016].

[20]The SitePoint Forums. (2016). JavaScript to calculate shopping cart. [online] Available at:
https://www.sitepoint.com/community/t/javascript-to-calculate-shopping-cart/16925/2
[Accessed 19 Nov. 2016].

[21] Htmlgoodies.com. (2016). A Quick Tutorial on JavaScript Variable Passing. [online]

Available at: http://www.htmlgoodies.com/beyond/javascript/article.php/3471111
[Accessed 19 Nov. 2016].

[22] Bootstrapdocs.com. (2016). Components · Bootstrap 3.0.3 Documentation -

BootstrapDocs. [online] Available at:
http://bootstrapdocs.com/v3.0.3/docs/components/#input-groups [Accessed 19 Nov.
2016].

[23] Mark Otto, a. (2016). Components · Bootstrap. [online] Getbootstrap.com. Available at:
http://getbootstrap.com/components/#gylyphicons [Accessed 18 Nov. 2016].

[24] Mark Otto, a. (2016). Components · Bootstrap. [online] Getbootstrap.com. Available at:
http://getbootstrap.com/components/#badgess [Accessed 18 Nov. 2016].

[25] Quirktools.com. (2016). Screenfly / Test Your Website at Different Screen Resolutions.
[online] Available at: http://quirktools.com/screenfly/ [Accessed 20 Nov. 2016].

MS801 Web Design & Development Planning Report 53

[26] Bootstrapdocs.com. (2016). Components · Bootstrap 3.0.3 Documentation -
BootstrapDocs. [online] Available at: http://bootstrapdocs.com/v3.0.3/docs/components
[Accessed 19 Nov. 2016].

[27] Halarewich, D. and Halarewich, D. (2016). 11 Website Navigation Best Practices for
Smooth UX. [online] LemonStand eCommerce Blog. Available at:
http://blog.lemonstand.com/11-website-navigation-best-practices/ [Accessed 19 Nov.
2016].
[28] Bootstrapdocs.com. (2016). Static Top Navbar Example for Bootstrap 3.0.3 Documentation -
BootstrapDocs. [online] Available at: http://bootstrapdocs.com/v3.0.3/docs/examples/navbar-static-
top/ [Accessed 21 Nov. 2016].

[29] W3schools.com. (2016). Bootstrap JS Carousel Reference. [online] Available at:

http://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp [Accessed 19 Nov. 2016].

[30] Mark Otto, a. (2016). CSS · Bootstrap. [online] Getbootstrap.com. Available at:
http://getbootstrap.com/css/#buttons [Accessed 19 Nov. 2016].

[31] Tutorialrepublic.com. (2016). Working with Bootstrap 3 Responsive Layout - Tutorial Republic.
[online] Available at: http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-
responsive-layout.php [Accessed 18 Nov. 2016].

[32] Nngroup.com. (2016). Heuristic Evaluation: How-To: Article by Jakob Nielsen. [online] Available
at: https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/
[Accessed 22 Nov. 2016].

[33] Sceviour, J. (2010). Undergraduate. Worcester Polytechnic Institute.

[34] Zeng, L. (2009). Designing the User Interface: Strategies for Effective Human-Computer
Interaction (5th Edition) by B. Shneiderman and C. Plaisant. International Journal of
Human-Computer Interaction, 25(7), pp.707-708.

[35] Nngroup.com. (2016). Banner Blindness: Old and New Findings, 10-year research overview.
[online] Available at: https://www.nngroup.com/articles/banner-blindness-old-and-
new-findings/ [Accessed 23 Nov. 2016].

[36] Anon, (2016). [online] Available at:

http://psy2.ucsd.edu/~mckenzie/Shah%26Oppenheimer2008PsychBull.pdf
[Accessed 23 Nov. 2016].

[37] Out of sight out of mind: The role of eye movements in consumer behavior. (2016). .

MS801 Web Design & Development Planning Report 54