web design + brand identity

Web Design + Brand Identity

The Manitoba Flexible Learning HUB is a community of practice that acts to support the advancement of teaching and learning with technology within Manitoba. The website needed to feature a unique brand identity to distinguish itself from our established post-secondary partner institutions, be fully responsive and accessible, adapt to the rapidly changing support needs of educators during the pandemic, and feature simple navigation for educators to quickly locate relevant resources.



Pre-Production

Identified needs for the website were exclusive resource pages to only be accessed through a login from a partner institution email address, social sharing, learning management system (LMS) course framework downloads for both D2L Brightspace and Moodle, online booking service for consultations, workshop registrations, a portfolio, and a blog. A complete brand identity package was necessary to design prior to beginning development.

Website displayed on various devices.

Concept

The website utilizes a distinct minimalist design which ensures consistent and rapid interactions by users. The colors of the brand identity are bold and used sparingly in order to direct attention to important features on the site.

Green had been pre-established for the logo, so a temperate charcoal was chosen to contrast and ground the vibrancy of the green. Complementary marigold orange was included as an accent color.

The layout is composed of simple shapes and directed by the bright branding to support ease of use.

Hub branding: logo and palette.

Sample User Persona and Hub Cub branding displayed on tablet and mobile.

Production

I began by developing personas which captured possible use needs from our demographic spectrum. This informed my work when outlining our brand identity, including the development of an androgynous, emotionally accessible mascot, the Hub Cub, to be featured in media for Hub-owned online courses. Next, a blueprint was designed to best support the diverse functions of the website.

An additional consideration for project was the need for a responsive branded HTML template to be utilized by instructors when designing courses in the D2L Brightspace learning management system (LMS). A base template containing a syllabus, copyright information, an instructor message, and an assignment page was created with intentional design restrictions to facilitate stress-free implementation.


Final

The Hub website and learning management system (LMS) HTML frameworks are fresh and functional. Their simple and bright design encourage interaction and support communication and resource delivery between instructional designers and educators in every phase of the online learning development process.

Website displayed on mobile and tablet.