living on campus
deakin university
UI/UX Design
Design systems
Role
A fairly conservative approach was required in the re-design of the Deakin University student lifestyle website. Nothing too flashy to distract students from their studies.

The previous site was considered 'plain', while some functionality on the events page was confusing. For example, when looking at function times and dates, students would get confused with how the time and date were displayed. It was also extremely small and hard to read.

Browsing the events page and navigating through the many pages was tedious and booking events wasn't really intuitive.

Re-designed to be more aspirational, injecting some highlights of colour and keeping in line with their existing design system.
Responsibilities
• UI/UX design
• Art direction and conceptual design
• Wireframing
• Interaction and responsive design
Page designs

Re-imagining the home page

One of the most common areas of engagement was the events page. Putting a snippet of the events below the header gave visitors a fast preview, without having to navigate throughout the site.

Particular attention was also given to the blog cards below, and creating new components that could satisfy the minor details at a glance. Re-constructing the navigation bar was also important to reflect some new categories and information architecture. A lot of these insights came from the UX team.

Landing page design

Blog details

The previous blog detail pages were quite plain. With just text, it was mainly black and white. The new design below, in consideration of the Deakin Uni brand, the header banner is a simple way to show some of the brand personality. Each different type of page also had a different brand colour, to indicate a change or different location across the site.

The previous and next blog articles were included at the bottom of the page to provide more convenient nagivation. All these assets were rebuilt and included into the design system.

Blog page

Priority content pages

A variation on the blog page design, this was presented to be more visually striking and was used for higher priority information articles (besides typical blog posts

Landing page design

Easier browsing

Each event was organised into slim tiles, that holds more events on a single page view. The previous design was clunky and took up a lot of screen real estate.

Times and dates are made clearer, with an included icon / option at the bottom left of the page to export desired events to personalised student calendars.

Landing page design

Archived news page design. Not a far departure from what was existing. However the header area was re-designed and included the same blog card style for each article.

Basic template pages were designed for fast content creation and publishing in Wordpress.
From left to right - Blog style landing page, content detail page, mobile device preview

Page header banners - Different branded theme options. The large banners specifically for the landing page. Small banners are used on other category pages across the website

Mobile view of the blog page