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.
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.
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.
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.
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.
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.