Back

Portfolio items that feature

Sketch

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

Weatherpulse video graphics package

Weatherpulse is Weatherzone’s daily weather news show hosted by meteorologist Ben Domensino. As a daily show, it was important to create a dynamic graphics package that could be updated easily by the video editor.

Working with Ben and the team I created a refreshed graphics package for the show. This included a 3D intro and outro animation, logo animations, lower-thirds, backgrounds and more. Elements such as the intro and lower-thirds utilised features of Adobe After Effects to allow for quick changes, such as a special show title or a different lower-third name and job title.

Outside of this longer project I also created ad-hoc 3D graphics for Weatherpulse, usually within a tight deadline.

Sample episode (Twitter)

↘️ In This Project

weatherzone.app

Weatherzone.app is a responsive, interactive promotional website for the Weatherzone mobile app. I mocked up the designs, created a prototype in Invision for stakeholders, wrote the copy and built the page from scratch with HTML, CSS and Javascript. The page is static, but does include interactive elements such as the ‘An Australian photo for every condition’ buttons. It also includes silent video elements that I created with Adobe After Effects and CSS animations.

Visit (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