Back

Portfolio items that feature

UI / UX Design

Weatherzone Advertising website

Like weatherzone.app, Weatherzone Advertising is a responsive, interactive website that promotes the benefits of Weatherzone for potential advertising partners.

I worked directly with the Weatherzone advertising team to discuss requirements, create mockup designs and work through feedback from a number of stakeholders. There was a fairly tight deadline, which required the work to be done in just a few weeks.

I wrote and adapted existing copy and built the page from scratch with HTML, CSS and Javascript. The site was created during the COVID pandemic, meaning the design process was very different and a lot more independent when compared to previous projects.

Visit (weatherzone.com.au/advertising)

↘️ In This Project

Future Radar

Weatherzone was given access to a nowcasting dataset from Australia’s Bureau of Meteorology known as Rainfields. I was tasked with taking these raw data files and seeing what Weatherzone could do with them in future products.

I used NASA’s Panoply to first place the data on a map. I then matched the values in the data to work with our existing radar colours.

Using video editing software and Weatherzone’s GIS Viewer I was able to compare the predicted radar with the actual radar to see the level of accuracy and present it to stakeholders.

Using Sketch and Adobe After Effects I then created mockups of how the future radar could be integrated into our existing app. This example is more of a wireframe and lacks visual polish, but showed how the radar feature could transition from historic radar to future radar.

I also integrated this into a Testflight prototyping app I created with Xcode (Swift / Interface Builder). Known as Weatherzone Labs, this iOS app showcased a feed which could be used to alert users to nearby rain and also show the full radar.

↘️ In This Project

Weatherzone Labs – iOS

As used in the Future Radar project, Weatherzone Labs was a native iOS app I developed to prototype future app features. Many of these were simply Sketch exports with prototypes, but existing prototyping solutions we had tried were quite limited and hard to use in user testing environments. It also allowed us to understand features such as iOS dark mode and iOS 13 widgets on a real device.

For Labs I learned how to write basic Swift and SwiftUI code, how to use Xcode and also Interface Builder. This also allowed for rich prototypes of modals, a ‘For You’ feed of contextual weather information and more.

Some prototypes were more advanced than others, including a working light / dark mode and a Future Radar screen that allowed us to scroll through data in an interface that felt like the real Weatherzone app.

↘️ In This Project

Weatherzone 6

Weatherzone 6 was a huge, years-long project to redesign the Weatherzone website.

Built from scratch in Sketch and prototyped predominantly in Invision, the redesign was responsive to allow Weatherzone to merge its separate desktop and (growing) mobile audience.

For the project I worked on wireframes, high-fidelity designs, a Sketch library, a style guide, countless prototypes in different viewports and more.

I also helped with personas, the user journey and questions for an external user testing team to ask.

For a run of sessions, due to the specificity of some interactions, I created a custom prototype for the website on mobile and desktop. Javascript code I wrote allowed users to try search auto-complete and other features, such as a tabbed local weather panel. This allowed us to understand real user behaviour, without worrying about gaps in the available prototyping tools.

In building the final product I worked with developers daily to ensure the designs were implemented to spec. In the final product I even contributed some CSS and helped with specific technical aspects, such as testing the site across devices and understanding issues with various responsive breakpoints.

A beta version of the website is now available.

Visit (beta.weatherzone.com.au)

↘️ In This Project

F1 Strategy Report

A full redesign of F1StrategyReport.com, built as a custom WordPress theme, with a heavy focus on podcast content. Despite the media-rich update, the WordPress CMS is still very simple for end-users to introduce cover images, media and other content.

I also worked on completely updating the podcast cover art, the social side of the website and other brand components.

Visit (f1strategyreport.com)

↘️ In This Project

My Game Guru

I worked on redesigning the user interface for My Game Guru, described as the world’s first Grassroots sports/game tracking and locating app. The new look is brighter, more fun and modern.

↘️ In This Project

Fairfax Media Learning Hub

At Fairfax Media I helped create and launch an internal learning website called the Learning Hub, which included an Onboarding web-app that is now used by every new employee at the company.

For the Learning Hub I contributed copy, built pages, customised and built parts of the WordPress theme and wrote editorial content for the Technology section of the website.

The Onboarding product, which I built from the ground up, features a responsive, simple app-like interface with a distinctive, clean design.

↘️ In This Project

You In

Winning the runner-up prize at Hackagong 2015, ‘You In’ was a prototype mobile-first events app designed to make catch-ups between friends super quick.

As part of ‘Team Gravvity’ I designed the fully functional, responsive web app concept, with a bright, tight visual aesthetic, and also produced a promo video for the project’s Kickstarter page.

↘️ In This Project

Wordflow

An offline application built for Chromebooks and devices with the Chrome browser. 2000 people purchased the app and use it regularly. It is now available for free.

I worked on the app’s design, guiding its minimalistic visual style and creating the app’s bright purple icon as well as associated promo videos.

↘️ In This Project