I have been a student of Martial Arts and Boxing for over 14 years now. I feel I have gained a lot from my training and wanted to give something back to the clubs. One way of doing so was to help them with their online activities. I thus nominated myself to conduct a project on behalf of DCU Amateur Boxing Club, to design a website for them. I became a committee member, and was given the Title of PR Officer and Webmaster.

Although I had some experience with Web / UI design, this was the first time I really paid heed to design principles. At the time, I had been learning about UI and UX and was keen to design the best possible website, with these concepts in mind.

Here is an account of my first real venture into Web design…

Before I put the website together, the club had no online presence. This prompted me to design this website, as well as their very own Pixie gallery, Youtube channel, Facebook group and WordPress blog.

I believed that the website will not and should not be overly complicated. I acknowledged that the aim was to design/implement an effective, well organised, functional website, rather then it necessarily being the most advanced. In short, I opted not to include many of the bells and whistles, e.g. RSS feeds and java programmes.

I purchased the URL: www.DCUboxingclub.com (recently lapsed)

Description and Objectives

I set myself a goal: to apply my new found knowledge in the implementation of a DCU Boxing Club website. I felt that, key to my design would be elements such as consistency, formatting, use of colour, headings, fonts, writing style, as well as structural considerations such as page layout and navigation.

Although I had previously used Weebly, Joomla, WordPress and Microsoft Frontpage, I had the desire to master Adobe Dreamweaver. I thus decided to design the site using this web authoring tool.

It should be noted that throughout the design and implementation stages, I consistently elicited the help of my classmates, through questions and usability tests. A specific example of this would be in deciding text or colour schemes where I constantly consulted others for their opinions.

I have, to the best of my ability, made my design rationale clear. Additionally, I have conducted post launch evaluations in a bid to refine my work.

design

Idea Generation

–          If you’re not online, you don’t exist…

I had read a blog which struck a chord with me. One of my blog feeds includes work by Nathan Snell, an Internet Strategist. The blog I refer to then was titled; “If You’re Not Online, You Don’t Exist”.

Here he discussed (primarily in relation to small businesses) that 82% of customers try to find a business by searching online. He highlighted the negative effects then not having an online presence can have, especially where competitors do.

For a small club such as DCU Amateur Boxing, it was easy to overlook the internet, especially as committee member’s hail from accounting background.

This club’s lack of internet activity to date had meant that students were not aware the club existed. See this boards.ie discussion. Students discuss how it is a shame that DCU do not have a boxing club, when in fact they do.

Boards_2

This proved to me that the club is Internet Invisible. The sight of that boards.ie page is ultimately what prompted my decision to opt for a DCU Boxing Club website.

Planning

The initial planning stages where admittedly, relatively unstructured.

For example, I contacted the DCU Boxing Club committee and first asked permission. I then asked their members for ideas. Indeed, that relationship between the committee and the clubs’ general members remained throughout the process. This provided me with a constant feedback loop as well as access to content information.

Next, I conducted field research, searching other similar websites.

Of the Colleges that have boxing club websites, none where particularly impressive.  I decided to design my page from scratch.

University College Cork

The University College Cork Boxing Club’s site utilises the traditional left-margin layout. All navigation tabs are on the left and are presented laterally.

UCC3

Trinity College Dublin Boxing Club

TCD Boxing club’s site utilises the popular layout that is, the distributed left and top-margin layout. I feel the existence of one navigation bar would suffice, as the tabs are repeated on the left e.g. Home, Photos, Videos and Contact appear twice.


ucd4

University College Dublin Boxing Club

UCD Boxing clubs’ website utilises the top margin layout. It is similar to (but not identical) our site in that navigational tabs are displayed along the top of the webpage.

 

ucd5

Other layouts would include the uncommon right margin layout and the distributed layout. I dislike the right-margin layout as users are not generally accustomed to using them. I feel user’s eyes will favour the top left area of the screen. Although the distributed layout can work well, because my site does not showcase an extensive amount of content, I have decided it is not an realistic option for me.

I pondered how best to design our page layout. First, I drew freehand, to help me visualise my proposed content. Subsequently I progressed to designing a webpage layout on Microsoft PowerPoint. Upon reaching a decision, I began designing, using tables, on Dreamweaver.

It was at this stage that I decided it necessary to put in place a structured plan for implementing the website. I drew up a “Design Checklist” which would ultimately act as my framework / guide throughout the process.

DCUBOX6

 

 

DCU Boxing Club’s Web Design Principles Checklist

Primary Audience

  • Needs – Club Information e.g. times, costs, location etc.
  • Interests – Boxing, Fitness, University Clubs and Societies
  • Technological expertise – highly advanced, computer/web literate

Website’s Purpose

  • Educational – informs members and potential members re: DCU Boxing. The associated Youtube account hosts training videos, to help members improve their skills.
  • Promotional – promotes the club to non members. The club have confirmed with the student union, that the recent emergence of the website, WordPress, Youtube, Pixie and Facebook accounts will get special mention in an upcoming edition of Campus magazine.
  • Entertainment – the addition of training pictures and videos provide entertainment and increase participation within the club.
  • Non-Profit – The website, like the club itself, is run on a non-profit basis.

Location of website

  • Initially hosted on DCU server
  • URL: www.DCUboxingclub.com will be purchased and the site will be made live.
  • Received confirmation from DCU Boxing Club Treasurer, that hosting costs will be reimbursed.

Content

  • Text – always relevant and informative. Experiment with text size, case and fonts. Always written with our target audience in mind.
  • Graphics – Use both PNG (Portable Network Graphics) and JPEGs (Joint Photographic Expert Group) formats.

 PNG for header as it compresses the file but this is lossless compression. This image is the most prominent in the site and thus its quality should remain high. The PNG format will allow for seamless integration with our grey background.

     JPEG for all other, smaller images. We have decided pixilation is less important for these images and so decided upon using lossy compressed JPEG images. User can access Pixie account for better quality viewing of these photos.

Use sparingly – so as to avoid download delays.

Assign Alt text to each graphic.

Include hyperlinked widgets for social media websites.

  • Video – embed one Youtube video. More videos can be viewed on the linked Youtube channel.
  • Applications – embed one Google Calendar and one Google map

Style

  • Should not be overly professional. A casual style best reflections the nature of the club. It will be teen/young adult orientated (target audience) yet all user friendly.
  • Some graphics used to compliment text. Visually appealing, fast loading and will not require abundance of memory.

Background / Text Colour

  • Limit use of “hot” colours – bright colours like pink or orange are not associated with boxing.
  • Use a plain background, making the text stand out.
  • Ask classmates for advice with re: background / text contrast.

Basic Page Design

  • Consistent layout and colour scheme for every page
  • Choose effective colour scheme with sufficient contrast
  • Make Logo image at head of each page a back to home hyperlink
  • Put most important data near top of page
  • Choose a single, effective navigation bar layout – horizontal
  • Design a footer, with navigational components (links)
  • Condense so as to minimise user scrolling up and down, left to right

Resolution

  • Computer labs’ large screens allow for high resolution. However, users may be using notebooks, choose efficient resolution setting.

Social Media

  • Set up and link various Social Media sites including Pixie.ie, Youtube, and Facebook. Set up and write blogs using hyperlinked WordPress account.

Privacy

  • Conduct interviews with committee members and fighters. Include accurate representation of results.

When designing/implementing our website I found it vital to keep in mind the 9 guidelines which I had studied in class. It is evident, I hope, when navigating through the site that I have used all of these best practices.

Designing the Layout

Prior to implementation, I contemplated potential looks and structures for the site, from both visual and technical standpoints. It was my intention to develop a logical and easy means to understand structure, in a bid to enhance usability and user experience.

guidelines8a


I had decided the website would have four main blocks.

1.)    The title – this would be the logo, which doubles as a “back to home link” As the image would be larger than the link in the navigation bar I believed this would work as a small shortcut for users. I highlighted the fact that this was a hyperlink through the use of alt text which reads “HOME PAGE.”

2.)    Navigation Bar – showing users how to get to other pages within the website. Also highlights current page.

3.)    Body – Where the main text appears. This may be supplemented with images.

4.)    Footer – This would include the clubs name, address, links to social media and internal links.


LAYOUT 9

The type of layout I chose (highlighted in blue) resulted from the type and amount of content I had to display. Once decided upon, I began designing, using tables in Dreamweaver. This general layout, remains consistent throughout the website. Of course, each page’s “main body” is presented differently, but the overall layout remains constant.

I decided upon using a flat information architecture. This meant I arranged webpages as peers, making each page accessible from each page. This structure works, as the site is relatively simple, with only a few standard headings (Home, Committee, Fighters, Media, Faq.)

If I consider an alternative, say Trinity College Boxing Club’s website and its dual navigation bars with drop down menus, I see a more hierarchical approach. If it where the case that the site had a particularly deep hierarchy, I would have employed a different structure. I would also have employed a “breadcrumb trail” or a “site map.” It was due to the small information architecture and simplicity of the content that I made our decision.

I used tables in the creation of the navigation bar. By doing this I was able to have the background of the cell different colour when the user was on any given page. This in turn will work as a reminder to the user of what page they are on i.e. current location within the site.

My use of roll over text colours on links allows our users to know exactly when there mouse is over a link. In this way, the navigation bar serves a dual purpose, it is used both to display clickable links and also indicates current location.

I had debated whether or not I would have the navigation bar along the top of the site or along the side. The reason for choosing between these too is that in general user’s eyes will first be drawn to the top left hand corner of the page so I felt it important that the user immediately sees what pages are on the website. I chose the top of the screen under the banner as I felt it would coincide more with the use of a footer on the bottom of each page which also contained links to each of the pages on the site.

LAYOUT10Informative Content / White Space

If you can’t explain it simply, you don’t understand it well enough

~Albert Einstein

It was my intention to display the information in a logical, succinct and easy to understand manner. I sought not to fill up every inch of the page with content, but rather add text and where necessary, perhaps add an image, or other media. Well distributed content means less clutter. The idea is that it is ok to have blanks, in fact it actually emphasises the evenly distributed content on the page. This is referred to as white space.

I sought to provide concise data and give the reader the option to explore in more detail by e.g. following a link to the blog.

Effective use of images/animations

The site does use several graphics which are visually appealing but also functional.

For examples of functional graphics, see the header, DCU Boxing club logo, which not only acts as the Title but also acts as “back to home” link. Also, the existence of hyperlinked widgets for social media websites is an effective means of display. By displaying well known logos (e.g. WordPress) the user is confident in knowing where the link leads (“Guessability.”)

I assigned ALT text to each graphic to give a description. This is useful in different ways, e.g. if the image does not load, the user will still know what it represents and also, when the sites goes live, it will help in terms of search engine optimisation.

It was always my intention to using media sparingly so as to avoid clutter and enhance loading times.

The main image file types I utilised where PNG (Portable Network Graphics) and JPEGs (Joint Photographic Expert Group) formats.

PNG for the title header as it compresses the file but this uses lossless compression. This image is the most prominent in the site and thus its quality (pixilation) should remain high. The image, at a glance, gives the user a clear insight into what the website is about. The use of the DCU logo informs students of the club’s affiliation with the University. The PNG format will allow for excellent integration with our grey background.

One problem I encountered was that PNG formatted images are not recognised by Internet Explorer 6. For this reason, I decided to reformat the Title image to GIF (graphics interchange format.)

JPEG for all other, smaller images. I decided pixilation is less important for these images and so decided upon using lossy compressed JPEG images. User can access Pixie account for better quality viewing of these photos.

On the media page I have only used one embedded YouTube video, this was to decrease loading time for the user. It will give the user more visual aid about the club and below the links to the YouTube account and the pix.ie account will guide them to where more media can be seen in the video sparked interest.

In terms of applications, I have embedded one Google calendar and one Google Map.

As DCU email is now run by Gmail, each student can integrate the calendar with their email account, at the click of a mouse. The Google map, allows for directions, and visual geographic representation, including that of Google street view.

Screen Resolution

It was impossible for me to know the screen resolutions of our users. To eliminate horizontal (left or right) scrolling, I designing the site for 640 480 resolutions and each page is less than 600 pixels. I understand that users like to scan pages, and prefer not to scroll. This said, users are more inclined to scroll up and down than left to right.

My screen design is still rather effective at higher resolutions.

Background Colour and Data Visualisation

I felt from the start that a light background with darker text would be easier for someone to read off a screen. This assumption was reinforced when I asked fellow class mates to look at a few of the alternative colouring schemes. One of my alternate background was a light pink colour. One of my class mates responded to this by saying pink signifies femininity, and femininity is not associated with boxing. It is for this reason that I sought to limit “hot” colours – bright colours like pink or orange are not associated with boxing. I ultimately decided on a grey/silver background.

Also, by implementing a plain background, it emphasised the subject matter. Had I included a dynamic background it is likely the text would not stand out to the extent that it does now. All of the trial users agreed that, the text readability, in terms of foreground/background contrast was good to excellent.

Typography / Text Readability

LAYOUT11My next step was to decide on font. Given the colour of the background I felt the best colour and the easiest to read was a standard black font. After asking some fellow class mates the majority agreed. I then sampled different fonts with are background in order to see which would be most user friendly. After much deliberation I decided that I would use times new roman for a majority of the text on the site, the reasoning behind this was that each character in within this font is unique which would lead to less confusion and give the user the ability to read faster. In saying this I did decide to use Arial in the home page header so to make it stand out more from the rest of the text. We also took this approach for the opening statement under the header.

I encountered a problem when I tested the site on a Macbook. I discovered that Apple computers display fonts at 72 dots per inch (dpi), whereas PCs display fonts at 96dpi. As I was designing the site on a PC, I took this disparity into consideration, by making text slightly bigger than was originally intended. I upgraded from text size ten to twelve.

Consistency

As previously mentioned, the sites’ architecture does showcase a high level of consistency throughout its pages. Colour, Font style and size and location of links also remain relatively constant throughout.

Simple / Natural Dialogue

Nielsen (1993) writes “the ideal is to present exactly the information the user needs ~ and no more ~ at exactly the time and place where it is needed.” Effective dialogue can positively affect usability and facilitate in creating comfort.

Speak the user’s language

Nielsen (1993) writes “the ideal is to present exactly the information the user needs ~ and no more ~ at exactly the time and place where it is needed.” Effective dialogue can positively affect usability and facilitate in creating comfort. Furthermore, I aimed to; Speak the User’s Language.

When I first undertook the task of building this website I needed to focus on the targeted audience. As the topic of the site was the DCU Boxing Club I knew that main target users were current students at DCU who had an interest in boxing. They were not the only user though as I felt secondary school students with an interest in boxing and who were contemplating coming to DCU for further study we’re also a target user. I write in a very casual, informal manner in a bid to emulate the laidback, fun nature of the club.

The Committee page offers an insight into their personalities. The intention is to create an open environment and encourage members and non-members to get more involved. Further outreach, in this manner, can be seen in the WordPress blog.

 Memory Load

The effective navigation facilities I implement facilitate in reducing user’s memory load. The navigation bar shows what page the user is on and how to select other pages. When a user hovers over a link, it becomes highlighted.

It is near impossible for a user to get lost in, or becoming confused about the architecture of this site, due to its simple design.

Provide Feedback

Features such as the aforementioned navigation bar, are important it informs users where they are or where they are going. Also, I took great care in ensuring that our page titles are specifically related to their associated content.

Short-Cuts

I feel complex sites which host large quantities of data may benefit from introducing short-cuts. As the site boasts a small amount of content, I feel shortcuts,( if at all possible given the one-click navigation that is already in place)  might even cause confusion.

The only short-cut in place is the “back to home link” in the title image.

Error Messages

Nielsen (1993) discusses error messages as providing two initiatives to response. The first instance being that the user has encountered a problem, should this problem not be solved, the user will likely exit. Secondly,  it offers an opportunity to assist the user. I have conducted much testing and tried to eliminate errors. I have however, included ALT text wherever necessary.

User-Driven Errors   

I understand the importance of preventing user driven errors in enhancing usability and building better affiliations with users. The continuous feedback I welcomed from those around me, throughout the design and implementation stages have likely assisted in such error elimination.

Reversal of Actions

For this site, a simple click on the back up button will reverse any action.

Evaluation

It should be noted that I embraced other’s inputs from the planning stage right through to the later implementation stages. As I designed the site in DCU labs I had the constant resource of the students around me, which I regularly called upon. In fact it was a fellow classmate, during a usability test, who suggested making the title logo linkable to the home page. DCU Boxing Committee and it’s members were also called upon, to provide content and to give opinions on design spec.

Upon completion of the website (first draft) I went about designing a survey(http://www.surveymonkey.com/s/LBZ5RR9). This consisted of 7 questions, 6 of which were multiple choice and one which required user feedback. When asking individuals to complete the survey I made sure to ask different kinds of users, with regards computer proficiency, so that the results were not skewed. I sent this survey to 17 people, of which 10 replied. The results are graphed below.

SURVEY12 SURVEY13

SURVEY14A priority for the site was not to overload the user with textual information for this reason I didn’t change the information as a result of this survey. What I did do to combat this was to give a link to the Word Press account, this give the user a place to access more information through blogs written by the committee and members.

As a result of this question I felt it import to enlarge the images which were external links so that more users would be confident in using them. I felt that it would not look good on the site if these images were larger on every page so I kept small images on the footer of every page and enlarged the images on 2 pages; home and media, as I felt the social networking sites would be most sought after on these pages.

Prior to the results of this question I did not have all of the pages of the website centred. The pages were aligned to the left. As a result on larger monitors there was a lot of blank space to the right of the page. Now, each page is centred so that it is even on any monitor type/size.

SURVEY15

What would you change about the Website? (6 of our 10 surveys had answered this)

  • “A little more content perhaps.”
  • “Excellent site, for the next step you could look at integrating the WordPress account with the website.”
  • “I wouldn’t change a thing , I find it is very easy to use and to navigate. I like that its linked with social networking sites such as facebook as that is very important now as nearly every person has one, especially college students. I think it provides very relevant information also.”
  • “Change the alignment of the page”
  • “More Content”
  • “Possibly include phone numbers for contact details”

———————————————————————————————————————————————————————

Interaction

I tend to approach certain tasks, where there is no impending deadline, a little sporadically. Noting this, from personal assessments, I decided it necessary to put in place a structured plan for implementing the website. I had learned from a college module the importance of drawing up a “Design Checklist” (See Appendices) which would ultimately act as a framework / guide throughout the process.

As a key objective of my initiative was to increase interaction amongst members, I set about establishing and integrating various social media platforms.

Prior to my work, the Club had a Facebook presence. Click below:

facebook 16Initially, I was delighted to inherit this, as it gave me a new way of communicating with members (previously solely through email). However, I quickly learned that a problem existed. As it was set up as a group, it would be run by nominated administrators. I began to investigate who had set this up and who had the password. Eventually, I discovered that the group had been established by a former member, whom had emigrated to Australia and was noncontactable.

As such I went about establishing a new one, and used my DCU Amateur Boxing email contacts to spread the word about the new Facebook. Click below:

facebook 17

This time it would not be a group. By having the chance to “like” the page, I felt it would offer great amplification thus making the club more visible online. It also offered me a new channel upon which to contact members. It became especially useful in sending messages, for example where training time changed. It was also used well, where we organised for members to purchase DCU Boxing hoodies.

I also set up a WordPress blog.

My intention here was again, to increase interaction, and to get members more involved. I had emailed (and facebooked) the group to let them know about the blog. I also stated that if anyone would like to “jump on board” and contribute I would gladly give them the password.

I blogged about big boxing matches that where coming up or had just happened. I had hoped this would enhance the community that is the club.

Click below:

wORDPRESS 18I also set up and utilised a DCU Amateur Boxing Youtube channel. I would attend the training sessions with a camera and take some footage, which could then be uploaded onto the Channel. I also used this channel to post key training tips for the members, e.g. webinars on foot movement. Futhermore, I used it to highlight some excellent boxing matches, which related to whatever we were learning in the classes.

Click below:

youtube 19I also established DCU Amateur Boxing’s own Pixie gallery. Pix.ie is an Irish owned photo sharing site similar to that of Flickr. I brought my camera to training sessions and uploaded the content here. I also informed members and committee (via email and facebook) that they too could upload photos. All they would have to do is email their photos to the account and simply validate their own email address.

Click below:

PIX20

Conclusion

It was my intention to continually consult and apply the design principles and usability guidelines set out from the beginning. This blog discusses the rationale behind my design and also it’s evaluation.

My next initiative will be in introducing embeddable Google Gadgets into the site. There are plenty of, easily embeddable “gadgets” which relate specifically to boxing.

Click Below:

gadgets 21Above, are example of numerous boxing gadgets which could be included on the www.DCUBoxing.com website. By including gadgets, I would also be actively encouraging link building. This should then improve the site’s PageRank.

In fact, there is an opportunity for me to investigate developing a DCU specific Google Gadget which may be embedded on the website and also other’s WebPages. Such WebPages (e.g. of other DCU clubs and boxing websites, may avail of a free DCUAmateurBoxing widget, which would, again, increase inbound links and add to the overall Online PR footprint.

Another change I will make, to better use this site as a communications device, will be seen in the embedding of Google Translate in the site.

Although it is a reasonably realistic observation to assume that future members will have a good grasp of the English language (studying in Ireland) it is true that a large proportion of current members are non nationals. Particularly well represented are Polish students. The coach is from Georgia and has limited English vocabulary.

Thus I will next embed a Google Translate widget onto the website. This will be conducted in the same manner in which I embedded the Google map and Google Calendar. Should a member click it, it will translate the content to e.g. Polish. It would then appear as below:

TRANSLATE 22

Survey

SURVEY 23

Website Infrastructure

page1

page2page3page4page5

References

  • Nielsen J. 1993. Usability Engineering. Academic Press, Jamestown Rd, London.
  • Social Media Marketing Industry Report 2009. How Marketers Are Using Social Media to Grow Their Businesses. 2009: Social Media Examiner.
  • WordPress. (2010, December 14th). About WordPress. Retrieved December 14th, 2010from WordPress> Blog Tool and Publishing Platform: http://wordpress.org/about/

Books:

  • Nielsen J. 1993. Usability Engineering. Academic Press, Jamestown Rd, London.

Lecture Notes:

  • Lee H. Usability for Web, Lecture Presentation, October 2010. School of Computing, DCU.
  • Lee H. Usability Guidelines, Lecture Presentation, October 2010. School of Computing, DCU.

 

Advertisements