Smartraveller User Experience Design

Are you planning to travel somewhere with a little ‘edge’? Maybe you’re already there and need some urgent assistance.

Smartraveller is a comprehensive resource for people travelling overseas, including safe travel guidance and up-to-date travel advice for each country around the world.

Thick were engaged to revisit the information architecture and design, to help make this important digital service as useful as possible.

Great content, poor experience

The previous Smartraveller 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.

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

st hero

A users 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 is for a visitor 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.

Smartraveller Content Architecture

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.

Smartraveller Navigation Flow

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.

Smartraveller Digtal Brand Moodboards

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.




Have a challenge for us? Have a coffee with Dave

Call +61 (0)3 9416 0300
Email david@studiothick.com

Dave

All work

Remodal

Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.

Damon stepping through horizons with the team at Lorem Ipsum

Menu