HBF – Redesign of website

During a course on webdesign and web development, I chose Hovedstadens Bordfodboldklub as my exam case. I designed the information architecture, interface and graphics in collaboration with HBF, and handed in a working prototype in HTML and CSS. HBF liked and commissioned the design and it is currently being implemented in the CMS Silverstripe by a third-party web developer. Check out the HTML and CSS prototype here.

Information Architecture
The site needed a rework of the information architecture, and by conducting card sortings, a better structure emerged.

The initial information architechture of HBF’s website is seen in the sitemap below on the left and the revised sitemap on the right. By merging and organising the information, the website need only a single level in the navigation.


Sketching & prototyping
I started making rough paper-sketched wireframes, and making trunk tests and think alound tests with users of the target group on interactive pdfs, to test the usability of the interface and the intuitiveness of the information design.

A graphic prototype was developed in Adobe InDesign in a 16-column 960 Grid System and user tested before implementing the design in HTML and CSS.

Using Social Media Plugins

As the club relies heavily on social media such as Facebook and instagram and wanted a site that was easy to manage, I used social media plugins to generate content from the channels they already use.

By embedding a facebook like-box on the frontpage, as well as en integrated Google Calendar, integrated Flickr and Vimeo functionality, HBF saves expenses on development, and taps into an already existing workflow.