← All work
Case study · UNSW Online

Building the system behindUNSW Online's website

UNSW Online needed a website that helps prospective students across ten study areas, from Data Science to Psychology, find a program, compare options and apply. Working with a UX design manager who set the core page designs, I built out the page templates and the component library, and designed the blocks that let the site grow.

Client

UNSW Online, via Keypath Education

Role

UI designer, working with a UX design manager

Services

Page templates, component library, UI design, responsive design

Status

Live at studyonline.unsw.edu.au

Smiling student in a mustard shirt standing in a bright office

The Challenge

  1. Ten study areas, one site

    Students had to find a program, compare options and apply, across ten study areas and dozens of programs.

  2. A strong brand on every screen

    UNSW's black-and-yellow brand had to hold up on a phone just as well as on a desktop.

  3. Built to scale

    New programs kept coming. Each one couldn't need its own page designed from scratch.

The Solution

  1. Solve it once, use it everywhere

    The same questions repeat on every program page: what will I study, what does it cost, can I get in, what's it like online. Answering them as reusable blocks makes every new page fast to build and consistent.

  2. Two journeys, two page types

    SEO program pages go deep for people researching. Paid-search pages get to the point for people arriving from ads.

  3. Every study area its own identity

    Each of the ten study areas has its own icon, thumbnail and banner, so the site feels easy to navigate rather than one long catalogue.

Outcomes

The system, piece by piece

01

About 20 page templates

Homepage, study-area pages, SEO and paid-search program pages, fees, entry and application, FAQ, about, contact, a blog and the enquiry thank-you flow, each in desktop and mobile versions.

Hover to scroll
02

A library of 260 variants

Buttons in every state, icons, headers and footers, banners, tabs, tables, forms, FAQ accordions, testimonials, career outcome cards, program cards and pagination, built as Figma variants for device, layout and colour.

Library foundations: colour palette, type scale, buttons in every state, icons and partner logos
03

The blocks that let it grow

Beyond the core page designs, I designed the rest of the blocks in the library: the content, data, card, tab and form components that let the site scale past those first pages.

Blocks designed for the library: stats banners, related programs, course lists, contact panels, testimonials, event cards and comparison tables
04

A mix of blocks, in use

Stats panels, qualification comparisons, faculty carousels, testimonials, student stories and proof points, each reused across study areas and programs so every page is quick to build and still feels considered.

Stats block: the demand for analytics professionals in Australia
Comparison block: difference in qualification types
Faculty carousel: meet our leading minds
Testimonial block with quote and portrait
Student story block: Vanig's path to a new career
Why choose block with icons and proof points
The result

Live and built to grow

The site is live at studyonline.unsw.edu.au. New programs and study areas can be added from the same templates and blocks, without designing from scratch.

Business and Management page on desktop Apply now page: application options, a countdown to the application deadline and the how-to-apply steps
Contact

Hiring, or have a brand that needs direction?

PuhpoweeStudio
Instagram Sufianna Shaz · Kuala Lumpur