Weatherzone 6

A responsive redesign of Australia’s #1 commercial weather website

From 2018 I’ve worked as UX/UI Designer at Weatherzone, Australia’s largest private weather service.

This project was primarily designed by myself, an external contractor and Weatherzone’s Product Director, working collaboratively throughout.

I helped in execution and design on the new product throughout its development. This included working on wireframes, style guides, prototypes, user tests and the final developer implementation.

Weatherzone’s B2C website was both a large source of revenue for the company and a great entry-point for Weatherzone’s B2B services.

However the website hadn’t been refreshed since 2014. The existing website was split between a desktop and mobile product, and a growing mobile audience was only able to access a limited set of features. As well, new features had to be added separately to the desktop and mobile versions of the website, meaning the mobile website lagged behind the desktop version and the competition.

Weatherzone 6 was a ground-up opportunity to redesign the Weatherzone website as a responsive website with modern features.

To kick off the redesign project the team went through a few stages of pre-production discovery.

I helped run an internal workshop to look at pain points in the current product, as well as ideas and other goals for the project.

The team and I also gathered existing resources on the current website, including prior personas and a competitive analysis of competing websites.

Heatmaps of the current desktop and mobile website provided insights into the key features we should highlight in the new design.

New personas were also created, alongside user journeys, taking into account user surveys and other analytical insights into the types of users who use Weatherzone.

Weatherzone targets the weather enthusiast, and as such our new personas established a balance between casual and more technical users, trying to find a middle-ground.

Initial Designs

With this information in mind, I started work on wireframes in Sketch. Since launch we have transitioned to Figma. As the team worked on and iterated the designs, routinely showing work to Weatherzone leadership, strong designs were printed off and placed on walls around the North Sydney office, as a way of seeking further internal opinions on the new designs and layouts.

Online usability tests were created using the mockups, asking for specific feedback on content and hierarchy. I designed and built the Weatherzone Labs website to find users eager to give feedback, and a competition was also created to reach a broader audience of potential testers.

An optional email field on sign-up also allowed us to create a database of users who were interested in seeing future screens and, eventually, in-person tests and the final beta. This survey also allowed us to test our personas and build upon them.

Hi-Fi, Prototyping & User Testing

As wireframes stabilised, the UI Design portion of the redesign was started. Every single page was created as a separate file in Sketch. This included the creation of a Sketch library, which the team used throughout page designs. This style guide / library allowed pages to be created in a consistant, fast way, with mobile and desktop components that ensured consistency. In later development, this style guide became very helpful in allowing developers to access CSS styles and information on sizing and spacing through prototyping tool Invision. This lengthy process included the creation of multiple viewports: desktop, tablet, mobile.

As well as internal distribution of prototypes, we worked with usability testing firm ‘The Lab’ to run in-person user testing sessions in North Sydney and Orange. We wrote questions and explained the diverse audience the website needed to work for. ‘The Lab’ recruited users from two categories – deep users and casual users.

Invision was quite limited in terms of interaction testing, so I created a prototype version of the website in HTML, CSS and Javascript. This meant we could test mobile and desktop search, navigation, menus and other ways in which users would interact with the final product.

With the website designs finalised, development on the website began via Invision prototypes.

Throughout development I would join our daily development calls to discuss progress, issues and any additional hand-off that was required. When aspects were unclear I would provide assistance and iterate on designs when the developed product didn’t meet our expectations. I even contributed CSS in some situations to help with the speed of development.

Early beta feedback was overwhelmingly positive, with most negative feedback being related to technical issues rather than design faults. HotJar allowed us to see exactly what part of the website the user providing feedback was seeing, to fine-tune design and development.

The thousands of messages from Weatherzone’s most dedicated users also serves as a great basis for future development.

This feedback would help us continue to refine the design and prioritise future features.

Weatherzone 6 launched November 2021. At launch I created a promotional video in After Effects showcasing the new design.