Design Document Web Hci

7/29/2019 Design Document Web Hci

1/29

Design DocumentFor Web Development and HCI

Design document on the website for the band Auroras Mile. This is for my Web

Development and HCI classes. This contains the steps I have taken to properly

develop the website.

2012

Amy Rothwell

20053351

11/16/2012


2/29

Amy Rothwell

20053351

Design document for my web development and HCI modules.

The title for my website is Auroras Mile and the url is

http://www.aurorasmile.uphero.com

Table of Contents

Description of Project ......................................................................... 3

Structure and Navigation .................................................................... 9

Visual Design ..................................................................................... 14

Prototype Evaluation ........................................................................ 23

Detailed Project Schedule ................................................................. 27

Appendices ....................................................................................... 29
http://www.aurorasmile.uphero.com/http://www.aurorasmile.uphero.com/http://www.aurorasmile.uphero.com/


3/29

Description of Project

The purpose of this website is to promote and inform about the band Auroras

Mile. This idea came from my original project proposal. The singer/songwriter

in the original proposal is still part of the focus here. In the proposal it says that

he has a band. I have changed my project to his band where he is the lead

singer and the songwriter of it. The band is now the focus, but the website will

still contain an upcoming gigs page, comments, blogs, a biography and contact

page, music and picture gallery, a merchandise page and also links to their

twitter, facebook and youtube accounts. The target audience will be from 16

to 46 year old males and females who have an interest in the band and/or thetype of music that they play, which is their own unique brand of folk

influenced pop rock.

The original project proposal is as follows: I want to create a website on a

singer/songwriter that I know. He has a band and also performs by himself. I

want to a page on him, his band, his music, where he came from, have pictures

and video clips, recordings and links to his youtube account. There will be an

upcoming gigs page, comments or blogs from him and also comments thatusers can put up. An information and contact page, merchandise page and

links possibly to a twitter account and a facebook page.

I have been working directly with the band and this ensures that I get the best

experience possible. They know what it is that they want and trust me to

achieve that. We have been on numerous meetings as web developer and

client to discuss the progress of the website and what it is that they have

decided they want it to look like. They also trust me and my judgement. This

comes in handy if I feel that something they want just doesnt fit or work on

the website and to change it to something more suitable. While I can do this, I

still refer back to them with my ideas before I implement them. After all, it is

their website and its my job to give them what they want.

Since I have been working with them, I have gained a lot of experience and

knowledge on what its like to work directly with a client. As I am still working

with them and figuring out exactly what they want and where and cannot

meet with them whenever I like, there is a possibility that some things may be


4/29

changed, altered, deleted or added. The possibility of things getting deleted is

slim as the majority of what has been done has been approved and is currently

being reviewed by the band. The possibility of something getting added is a lot

more likely, with everything done, there is always an idea from that, e.g. to add

an extra page, widget, different menu style and content.

While they have informed me as to what it is that they want, I still went and

did research on other websites so that I could get inspiration, other ideas that

might not have been thought of before, design and layout ideas and also ideas

for widgets. This has helped to further develop the website from the basic idea

the band had at first, to creating a fun, enjoyable, engaging and user friendly

experience.

For inspiration, I found competing websites and rated them. I rated three

different websites as follows:

http://www.solartaximusic.com/

Solar taxi is a local Waterford band that is becoming bigger as time goes

by. They are getting more successful and have begun selling their songs

to television shows and adverts.

Is the purpose of the site clear? Yes, its to inform users about the bandand what they are doing and will be doing.

Does the site clearly address a particular audience? Yes, it addressesSolar Taxis audience.

Is the site useful and relevant to its audience? If you want to know whatit is they are up to then yes, it informs users of their currentengagements.

Is the site interesting and engaging? Not really, it just tells you what it isthey are doing, nothing else. Its coloured really dark and makes it seem

less engaging. There isnt much that is interesting on it.

Does the site enable users to accomplish all the tasks they need or wantto accomplish? Yes, it lets users find out dates they will be playing and

where and what the band is currently doing.
http://www.solartaximusic.com/http://www.solartaximusic.com/http://www.solartaximusic.com/


5/29

Can these tasks be accomplished easily? Its difficult to find out aboutpast occurrences and events as you have to know when it is they did

them and posted about them. Otherwise you have to go from page to

page looking for what it is you want.

Is the information organized in a way that users will expect andunderstand? Its easily understood as the most current thing is what you

see first. Its not well organised and I dont think most users will know

how to get the information without having to really look for it.

Is the most important information easiest to find? Yes, its located inlinks on the home page that are easily recognised.

Is textual information clear, grammatically correct, and easy to read? Yesit is, but the font colour could be a little brighter to help read it easier.

Do you have a clear idea of what the site contains? The site containsinformation about the band.

Do you always know where you are, and how to get where you want togo? No, its difficult to find where it is you want to go if its not in the

buttons.

Is the presentation attractive? Yes its attractive, but not 100% practical.Its all really dark so you might have to strain your eyes slightly to beable to read things.

Do pages load quickly enough? Yes

http://thewaxies.webs.com/

The Waxies are a band in Waterford that are popular for parties, e.g.

debs and after parties. They are generally older and more vulgar than

you would expect from a band. They are constantly cursing throughout

their set and while it can be off-putting, they have good voices when

they sing and can be quite amusing.

Is the purpose of the site clear? Yes, its to see what the band has doneand to help get information on them.
http://thewaxies.webs.com/http://thewaxies.webs.com/http://thewaxies.webs.com/


6/29

Does the site clearly address a particular audience? It addresses thebands audience.

Is the site useful and relevant to its audience? No, not at all. Itsoutdated and doesnt have a lot of information.

Is the site interesting and engaging? No, there isnt anything interestingon it except for the pictures and they take too long to load and arent

even that interesting.

Does the site enable users to accomplish all the tasks they need or wantto accomplish? No. if you go there with a task in mind you wont

accomplish it. Theres not really anything on their website thats useful.

Can these tasks be accomplished easily? No as the information isntthere and if it is its extremely difficult to find.

Is the information organized in a way that users will expect andunderstand? No as there isnt any real information on it.

Is the most important information easiest to find? No, its the hardest tofind and not even well written.

Is textual information clear, grammatically correct, and easy to read? Itsnot. The colours used make the screen hurt your eyes and head and

discourage you from reading. Do you have a clear idea of what the site contains? I dont. Its too hard

to navigate through and find any information on the band and what they

do. It just seems to mess and unorganised and that they didnt have a

purpose to what they wanted it to do so that stuff is all over the place.

Do you always know where you are, and how to get where you want togo? No its too difficult to navigate through.

Is the presentation attractive? No, its the worst Ive ever seen. Itsunorganised with clashing colours.

Do pages load quickly enough? Some pages do, but most dont. It can bereally slow.


7/29

http://www.propellerpalms.com/site/

Propeller palms are up-and-coming Waterford band that are becoming well

known. They have been playing bigger concerts throughout Ireland, e.g. Spraoi

and Electric Picnic.

Is the purpose of the site clear? Yes, its to inform and promote theband.

Does the site clearly address a particular audience? It addresses thebands audience.

Is the site useful and relevant to its audience? Yes, it has informationand is relevant although its going to be out of date soon.

Is the site interesting and engaging? Its ok, nothing really caught my eyeor made me want to stay on the page.

Does the site enable users to accomplish all the tasks they need or wantto accomplish? Yes, there arent many options to choose from so its

easy to find and do things.

Can these tasks be accomplished easily? Yes, as there arent manyoptions to chose from, its all accessible easily enough.

Is the information organized in a way that users will expect andunderstand? Its easily understood but Im not sure if its what users will

expect. I didnt expect it to be the way it is. There is a link that says

recent posts and its all in the news feed on the home page too.

Is the most important information easiest to find? Yes, its easy to findand understand.

Is textual information clear, grammatically correct, and easy to read?Yes, its all fine.

Do you have a clear idea of what the site contains? Yes, it containsinformation on the band.

Do you always know where you are, and how to get where you want togo? Yes, the button is a different colour when youre on a certain page.

Is the presentation attractive? Yes its pretty, but a little to spread out,but other than that its fine/

Do pages load quickly enough? Yes the pages load quickly.
http://www.propellerpalms.com/site/http://www.propellerpalms.com/site/http://www.propellerpalms.com/site/


8/29

By doing this, I know what I can do to improve my website, take the

good features from other websites, and keep the bad from the others

out of mine so that the ideas gained from doing this just improve the

website. I have searched through many other band pages, ranging from

FooFighters, Muse and Katy Perry for inspiration.

The majority of content is sourced directly from the band themselves

with only some of the images sourced from other people. For those

pictures that are copyrighted, I have received permission to use them as

long as I say who they belong to, e.g., All images are the "intellectual

property" of Michael Wall & Disepix and are protected by copyright.Since the band is providing the majority of the content, they have their

own copyright to that content which wont cause any problems.


9/29

Structure and Navigation


10/29


11/29

For the wireframes, I usedwww.mockingbird.comto create them. My website

will have a consistent look throughout the site.
http://www.mockingbird.com/http://www.mockingbird.com/http://www.mockingbird.com/http://www.mockingbird.com/


12/29

For my site map and flow diagram, I used the software onwww.gliffy.comto

produce this.

On each page of the website, more than one of each item from the list below

will appear on each page. The number on each page could be from one to all.

Name Image What it will be used for

Button To press play on

Text box To enter in text/comments/questions

Window To view the webpage

Button To submit/link to facebook, twitter

Cursor/ pointer To show where you are on the page

Hyperlink To link places

Tab To link to a new tab instead of a new window

to keep people on my website

Mouseover/dropdown To show whats extra

Dropdown List To give the user options
http://www.gliffy.com/http://www.gliffy.com/http://www.gliffy.com/http://www.gliffy.com/


13/29

Content List

Text, videos, images, audio clips, submit buttons, comment boxes

Content Category

Home page text, images, audio clip, spry menu

About page Images, text,

News text, images, video

Events text

Music text, images, video, audio

Gallery photos, videos, text, comment box

Contact text

Merchandise images, text, thumbnails, dropdown menu

The navigational style of the website has a top horizontal bar navigation with

dropdown options and footer navigation. It will be a top heavy, two tiered

structured system.


14/29

Visual Design

During the meetings with the band, we came up with initial sketches and ideas

for the website. They also told me the colours that they wanted to be used and

where. See appendices.

During HCI class I created some layout ideas. These include the following.

Layout option 1


15/29

Layout option 2


16/29

Layout option 3

Layout option 4


17/29

After taking into account the different options, layout option 3 was the overall

favourite with the band. Its simple and leaves lots of room for content without

it getting all cluttered and messy looking. They like and want the centredlayout with the space along the sides of the web pages.

The band had decided from the beginning that they wanted a black and white

colour scheme with the use of different tones within the pages. Even though it

was already decided what they wanted, I experimented with different colour

schemes anyway. This is the colour scheme that will be used throughout the

website.

I experimented with many types of typography for the website. A lot of the

different fonts didnt match the overall theme while still staying legible andeasy to read. I decided on a few that went ok with the website and brought


18/29

them to the band. They looked at the options I gave them and are still deciding

on exactly what font it is they want, but it has been narrowed down to the

following three.


19/29


20/29

Storyboards

Biography Events Gallery Merch ContactNav Bar

AURORAS MILE

Copyright Disclaimer

AURORAS Header

MILE


21/29


AURORAS MILE


Welcome to Auroras Mile Webpage

AURORAS

MILE


22/29


AURORAS MILE


Band Biography

Auroras Mile was formed by four friends who decided to start a band. These four friends

are Dave O Donoghue, Dean Fitzgerald, Luke Brennan and Richard Grant.

They formed back in April 2012 and had a debut gig in Caf Calvary. They are becoming

more and more successful with every gig and are becoming more recognised.

AURORAS

MILE


23/29

Prototype Evaluation

For my prototype, I chose to do a vertical prototype using Microsoft Word.

I tested my prototype on Mark Ryan, David Power and Annemarie Scallan. I

tested it by asking them to volunteer their time to help with the project and

giving them a task to complete. The task stayed the same each time, it was to

find information on the lead singer and write a comment in the comment box

below the information of him, then return home.

During the testing, I noticed that my testers were a little hesitant at first. They

were careful as to where they clicked on the pages and took a second to lookaround the page. It took them a few seconds to read the task and they all

asked what the task was that they had to do.

The only problem I encountered during the testing was that when inputting a

comment, I forgot to add a text box onto the page and that caused confusion

for the testers.

The feedback that I got back included:

Adding the logo, banners, pictures and content to make it moreaesthetically pleasing to the user.

Adding the comment box to the page to avoid confusion. Make the task shorter, take out unnecessary words, sentences and make

it easier and faster to read.

I was asked most often what the task was, so I would move the task tothe first page instead of the second.

I was told the prototype was easy to navigate through and that its notconfusing, but that extra content would be nice.

After the end of testing and receiving feedback, I realised that there are a few

changes I would make. I would add the text box to the comment page, so that

the user can enter a comment onto the page. I would also add some content

and images as it was suggested.


24/29

The implementing and testing part of the project went fine. It wasnt hard and

was enjoyable to do. I learned a lot about what to do so that I can develop it

further to make it better visually and more easily and enjoyable to use.


25/29


26/29


27/29

Detailed Project Schedule


28/29


29/29

Appendices

Documents

Design Document Web Hci