2012

Design Document
For 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.

Amy Rothwell 20053351 11/16/2012

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

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 the type 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 that users 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

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 band and what they are doing and will be doing. Does the site clearly address a particular audience? Yes, it addresses Solar Taxis audience. Is the site useful and relevant to its audience? If you want to know what it is they are up to then yes, it informs users of their current engagements. Is the site interesting and engaging? Not really, it just tells you what it is they 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 want to accomplish? Yes, it lets users find out dates they will be playing and where and what the band is currently doing.

 Can these tasks be accomplished easily? Its difficult to find out about past 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 and understand? 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 in links on the home page that are easily recognised. Is textual information clear, grammatically correct, and easy to read? Yes it 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 contains information about the band. Do you always know where you are, and how to get where you want to go? 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 be able 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 done and to help get information on them.

 Does the site clearly address a particular audience? It addresses the bands audience. Is the site useful and relevant to its audience? No, not at all. Its outdated and doesnt have a lot of information. Is the site interesting and engaging? No, there isnt anything interesting on 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 want to 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 isnt there and if it is its extremely difficult to find. Is the information organized in a way that users will expect and understand? No as there isnt any real information on it. Is the most important information easiest to find? No, its the hardest to find and not even well written. Is textual information clear, grammatically correct, and easy to read? Its not. 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 to go? No its too difficult to navigate through. Is the presentation attractive? No, its the worst Ive ever seen. Its unorganised with clashing colours. Do pages load quickly enough? Some pages do, but most dont. It can be really slow.

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 the band. Does the site clearly address a particular audience? It addresses the bands audience. Is the site useful and relevant to its audience? Yes, it has information and is relevant although its going to be out of date soon. Is the site interesting and engaging? Its ok, nothing really caught my eye or made me want to stay on the page. Does the site enable users to accomplish all the tasks they need or want to 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 many options to chose from, its all accessible easily enough. Is the information organized in a way that users will expect and understand? 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 find and 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 contains information on the band. Do you always know where you are, and how to get where you want to go? 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.

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.

Structure and Navigation

For the wireframes, I used www.mockingbird.com to create them. My website will have a consistent look throughout the site.

For my site map and flow diagram, I used the software on www.gliffy.com to 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 Button Cursor/ pointer

To view the webpage To submit/link to facebook, twitter 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

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.

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

Layout option 2

Layout option 3

Layout option 4

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 centred layout 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 and easy to read. I decided on a few that went ok with the website and brought

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.

Storyboards
AURORAS MILE

AURORAS Header MILE

Biography

Nav Bar

Events

Gallery

Merch

Contact

Copyright

Disclaimer

AURORAS MILE

AURORAS MILE

Biography

Nav Bar

Events

Gallery

Merch

Contact

Welcome to Auroras Mile Webpage

Copyright

Disclaimer

AURORAS MILE

AURORAS MILE

Biography Band Biography

Nav Bar

Events

Gallery

Merch

Contact

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.

Copyright

Disclaimer

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 look around 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 more aesthetically 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 to the first page instead of the second. I was told the prototype was easy to navigate through and that its not confusing, 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.

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.

Detailed Project Schedule

Appendices