Design

UNSW IO

A couple of site designs for one of Australia’s leading universities. I wish I had of gone there—but, I’m kinda dumb.

Plus, they don’t do art or design (as far as I’m aware), so poo to them. Anyway. Over the course of several months, I designed and art directed two new sites for the University of New South Wales’ International Office.

The first was UNSW International, the second, Visit UNSW.

International – Home

Visit – Home

The aim for International is to get international (duh) students to apply at UNSW. That’s pretty much it, in a big old filty nutshell. Visit, however, is for agents, industry partners and staff from other universities. Providing them with info when visiting UNSW.

It was also a chance to update the old sites, which were a good five years old or so. We went with something a little more modern and fresh. And also in-line with the rest of the UNSW sites in their digital ecosystem (yep, that’s right, I just dropped digital ecosystem). They have a lot of freaking sites.

 

International

As I said before, the end goal for International is to ultimately have students apply. Part of that is giving users the right information at the right time.

Through several workshops, we came up with some design solutions to help simplify everything. Making the journey through the site an easy and immersive one. As well as making sure that when going into third level pages it isn’t jarring. As they those pages won’t be updated with the new designs until next year.

We did this through several ways—by way of the information architecture and visual design.

Simplification

We removed a lot of embellishments, such as gradients and drop shadows. This helped keep the overall design clean and uncluttered—allowing the content to be the focus.

Right level of information

The hierarchy of the design helps support the three levels of information that this site provides—passing interest, shortlisting and serious consideration. With clear links to enquire and apply scattered throughout the site.

Show, don’t tell

We had content fade in as the user goes down the page. Helping pull them through the site to discover more content. Plus, it’s trendy.

Imagery

Candid photos with natural lighting, help make the content feel genuine and real. As opposed to stock photography. We wanted to make people feel as if this is a real place, with real people.

Branding

Even though we stripped the design right back, we referred back to certain brand devices at all times. So as when the user gets to other pages within International, the experience isn’t jarring.

All of that guff influenced the design. And I constantly referred back to these points when designing the sites.

All up we only did three templates for International—the homepage, key driver and contact pages. The key driver consisted of all the content types that can be used throughout the site.

Key Driver

Big dirty menus

In the end, we weren’t entirely happy with how the menus turned out. A lot of links were duplicated and it all got a bit crowded and messy. Below is what the full-screen menu looked it, which is a duplication of what you see in the footer of every page. But it all works rather well responsively.

Desktop - Menu

Menu – Responsive

Wireframes

The budget was relatively small for this project and we didn’t have a lot of time. So, instead of doing wireframes digitally in Omnigraffle or the like, we went old school. I spent a few hours doing up some nice pencil wireframes for approval, which was quick and easy to do. And a nice physical artifact for the client to have, then a digital wireframe.

Wireframes

Wireframes

Wireframes  Wireframes

Dem style sheets

I love doing style sheets. I find them strangely cathartic for some inexplicable reason. And they actually help out our developers a lot. It’s quick and easy for them to grab information, to style all the headers and buttons and the like.

Style Sheet

Visit

Visit UNSW was done well after the International project. As such, it draws a lot of visual cues and layouts from the International site, as it should—it is its sister site in a way.

Below are few grabs from the design. Or you could just look at the actual thing here.

Visit - Header

Visit - Tile Popup

Visit - Tiles

Visit - Map

Visit - Form

Responsive

Becaise both site designs were quite clean and uncluttered, it made it extremely easy to build and design the various responsive states. Below are few snippets from the respsonsive states. but you’re better off having a play on said devices.

So there you go. Two big old sites for UNSW.

Role Visual Designer

Client UNSW

Studio Digital Eskimo

Credits Creative Director – Ben Hoh, Experience Architect – Michelle Pickrell, Developer – Alex Leon

Bunnies abound.

Hopper