Skip to Content

Smartraveller provides a critical service for Australians traveling overseas.

  • Interaction Design
  • User Experience

The previous website was difficult to use for many people. While the content was up to date, the user experience made browsing and reading the content a challenge. Research conducted by the Department of Foreign Affairs and Trade (DFAT) indicated that users were failing to read and retain key messages.

Content had also been split across three separate platforms: desktop, mobile website and mobile app. Each platform was designed in vastly different ways, providing a confusing experience to users.

Good Design Award2

Winner (Digital Design) at the 2016 Good Design Awards

Webby Award

Nominee (Best Government Website) at the 2016 Webby Awards

The user context

We redesigned the entire Smartraveller experience with a focus on two key user contexts: preparing for a safe trip (planning) and requiring assistance while travelling (acting).

A user's mindset within these contexts is vastly different. Before a trip they may be filled with excitement, looking for some reassurance or doing research on behalf of a loved one. A user caught in a situation overseas may be in an agitated state, looking for very quick, plain advice.

Content review

We conducted a thorough audit to determine how each audience might interact with content and prototype ways to increase clarity and focus.

The key use-case for a visitor was to review information for a specific country, then leave. We needed to create a content architecture that was scannable, intuitive and ensured the most important information was read.

Some screens showing mid-fidelity prototypes of the Smartraveller website. Arrows are indicating the flow from one screen to another.

We created a self-help wizard as a core feature of the Smartraveller website. A rapid flow, designed mobile-first, geared to helping travellers in stressful times to find the right information they need. Interactive prototypes were built to test with users, helping us refine the information architecture to feel radically fast.

A close-up crop of a computer screen with a portion of the Smartraveller website. It's a red box with 'Need help' as the headline, with the cursor over an option for 'I need help'.

Improving the structure

We developed a revised information architecture that surfaced content based on the immediate needs of travellers.

A low-fidelity, fully functional HTML prototype was created to allow us to test how each audience segment used the new site architecture to locate and read content.

The prototype was iteratively updated based on these testing sessions, evolving into the structure now found on the site.

Efficient design

Once the structure was taking shape, we developed a comprehensive visual design, focussing on typography and colour. Moodboards were used to define our visual direction, before moving into template design.

A key requirement was a responsive site, adapting gracefully to all variety of devices. A responsive typographic system was developed to create an easy reading experience regardless of screen size or operating system, and bold colours were used to enhance comprehension of travel ratings.

We focused on designing a highly performant website. Using minimal imagery and system fonts so that overseas visitors with reduced internet access could use the site quickly and cheaply.

Designing an accessible experience

We took accessibility requirements very seriously during the project. We pride ourselves on giving equal thought to consistent experience for users with disability – beyond simply meeting colour contrast guidelines.

Outcomes

The new Smartraveller website was unveiled by the Minister for Foreign Affairs, Hon Julie Bishop MP, and today it is one of the federal government's most utilised digital resources.