University of British Columbia

Researchers at the University of British Columbia Centre for Collaborative Research on Hoarding required a complete website redesign. This included the development of branding that was unique to the Centre yet still cohesive with UBC's own branding, a website prototype, custom iconography, and website creation using UBC's content management system (Wordpress).

The most important concept that was in mind when designing this website was to add "breathing room". It was important that the website visitor didn't feel overwhelmed by the volume of content on the page. Breathing room was achieved with the use of page margins and a balance between text and imagery.

The overall look and feel of this website design is modern, clean, lively, and inviting to users. Colors, fonts, and images were all chosen and developed to elicit a sense of professionalism and trust, with a hint of playfulness.

The goal of this user flow graph was to outline and restructure the website's current flow in such a way that the visitor could access the necessary information by using the fewest number of clicks to get there.

In the original website flow, website visitors had to click through multiple pages (sometimes going back to the previous page in order to access another) to get to their desired content.

In the updated user flow graph, information was consolidated as much as possible on each main page and pages that held similar themes to other pages but were still functionally different were consolidated.

Heading Font

Bitter is a serif font with little variation in the stroke weight, and serifs which are as thick as the strokes. This font utilizes the traditional look of serif fonts while still incorporating the structured characteristics of modern fonts.

Body Copy Font

Hanken Grotesk is a “sans serif” font in the traditional sense, in which there are no serifs and no stroke width variations. The font is consistent and uniform in design while taking letterform inspiration from traditional serif sources and calligraphy (e.g., “g”. Hanken Grotesk font elicits approachable, friendly, and “modern classic” feelings.)

Hanken Grotesk font is used in this design for body copy and smaller-sized text as it's observable simplicity makes it highly readable in long-form text.

The Centre's website was first prototyped as a working sample of how the website would be laid out. This ensured that the client had a good understanding of how the new branding and styling elements would actually look on their new website and to discover issues prior to the development stage.

Some updates to the wireframe included refining element positions, component types (e.g., changing from tabs to dropdown lists), and layout to ensure that the information displayed was clear and easy to find for the website user.

The Centre's website was developed using UBC's content management system, Wordpress. Working knowledge of CSS and Javascript was required to customize available plugins in order to achieve this design. Understanding how the available plugins worked and having knowledge of coding ensured the implementation of a unique and custom design for this organization.

UBC's centralized Wordpress system afforded many useful features to web developers, however, some challenges can arise with the use of such a large system. A very limited set of pre-approved plugins were allowed for Wordpress development which could have limited the unique aspect of design implementation. However, planning ahead was a skill utilized during both the design and development stages to ensure that the design was executed accurately in such a way that it could be updated through the back-end by Centre staff in the future.