Students

Web design and development for Student Services at the University of Melbourne

In mid to late 2014 I worked on design and CMS development of the Student Hub with Melbourne Students and Learning at the University of Melbourne. The goal of this initial project phase was to establish a foundation towards bringing key information together from a diverse range of sources into a unified interface, with the goal of making this important information easy to find and to create a more seamless, cohesive and reliable experience for students.

Project details

Client / context
Melbourne Students and Learning
at the University of Melbourne
Date completed
September 2014
Skills used
Web Design, branding, template design, responsive design

My role

Working alongside project managers, marketing experts, UX researchers, testers and content developers, my role focused on:

  • reviewing research, requirements and briefing documentation
  • developing wireframes / mock-ups & HTML prototypes
  • design advocacy in client/team meetings, presenting designs, consolidating feedback and adapting product
  • web design and CMS template development
  • developing support documentation including style guides for site maintainers and delivering training to a small group of editors

Tools

The tools I used in this project included:

  • Illustrator / Acrobat (wireframes and functional specifications)
  • Bootstrap (HTML prototype / template framework)
  • Squiz Matrix CMS
  • HTML, CSS, jQuery
  • PictureFill
  • Photoshop (image editing)
  • Wave, colour contrast checkers and W3C code validators
  • Basecamp (team / stakeholder comms)
  • Git (site back-ups, basic versioning)

Read more about

Mobile first design & responsive images

The content managers wished to be able to control the image layout across different devices. I therefore built the feature images to allow editors to upload photo layouts customised to suit four key breakpoints (1. mobile portrait, 2. mobile landscape, 3. tablets and small desktops and 4. wide screen desktops). The images would then only load on the relevant devices (saving bandwidth) and fit the layout optimally. The site was prototyped in Bootstrap and then developed in Squiz Matrix CMS with a mobile first approach. For the responsive images I used the PictureFill polyfill and Related Assets in Squiz for each image size.

Home page
Home page, mobile
Achieve Mu Goals landing page
Achieve My Goals landing page, mobile

Theme templates

I evolved a colour palette for the six student themes. The colours were chosen to fit with the core messages of the themes and support content differentiation across the site and in offline informational materials.

Each theme included three levels of templates - a landing page index, an inner page index and inner page content).

I developed an interface within the CMS that allowed the themes to be easily applied to any page using drop-down selection fields via an Editor's interface.

Landing page for Explore Unimelb
Landing page for Manage my Admin
Landing page for Balance my Life
Landing page for Get Involved
Landing page for Achieve my Goals
Landing page for Plan my Future
Above Landing page preview for the Plan my Future section

Illustrated here is a process summary of how the theme colours were chosen to fit with the character of the site and brand, from colour harmonising to exploring colour themes and character to finally balancing the contrasts across the themes and selecting value scales for use across the site.

Colour evolution summary
Above Colour palette evolution

Inner templates

A more subtle treatment for each colour scheme was used on the inner content pages and lower-level index pages, keeping the content sharp, focused and clean, and suitable for more extended reading (where needed). Section theme colours were incorporated into headings, boxes, buttons.

The feature image was de-emphasized (but available on scroll-up) as links to these pages opened by default with just a glimpse of the bottom of the image.

Level 2 index template
Above Level 2 index template
 Level 3 content page template
Above Level 3 content page template

More news and events

A drawer panel for displaying less important news and events and additional formats for news items.

Problem

The Student Hub team requested a solution for offering an extended amount of news and events related to each topic area to appear on each of the index pages. The brief included the following criteria:

  • They did not want to use a carousel or a layer over the large feature image
  • It was also important that the index listings not be pushed too far down the page, requiring excessive scrolling, or jump links, to get to this key content.
  • The interface needed to remain clean, simple, uncluttered and open.

Illustrated here is a potential solution that was explored and implemented for live testing in the first iteration of the site:

Solution

Important news appears at the top of the page (1-2 items) open by default and less important, or older news is hidden under a prompt in the form of a large down arrow button. When clicking on the down arrow an envelope of extra news content is revealed in a smooth sliding motion (pushing the remaining page content further down the page underneath it). Clicking on the up arrow will close the extra news section and bring the other page content back up. A variety of news type formats with simple classes were included in the templates / model pages for flexibility and visual interest, including: small and large videos, calendar items, highlight news, coloured backgrounds. The news sections could also be easily turned off each page so the page was balanced when no news was needed.

Handover & support documentation

A site that is maintained and nurtured is one that is going to be most useful and reliable for it's users!

Along with custom handover training to individuals and small groups, a support site was provided to site administrators and maintainers. This was located inside their site folder for easy access.

The support site provided custom site-building tools and instructions specific to maintaining their site, as well as links into relevant information provided elsewhere by internal and external web communities to help them with their maintenance tasks.

Easy to implement, build and extend

Each support site I built was based on a standard 'base template' so it could be implemented quickly for each new project. It used nested content areas for efficient reproduction, ease of updates and consistency of messaging, but was also easily customisable for each client or project. Site administrators could easily build upon it and extend it to meet their needs.