Scroll to top
UI Design UX Design
January 1, 2021

WMIS

WMIS is a portal for accessing surface water and groundwater data in the state of Victoria, Australia

My role as lead designer in the in the project has been to take user requirements, translate these into first concepts, advise the clients in terms of (design) process, run user workshops, turn concepts into high-fidelity prototypes, collect and translate feedback…

Task

Designing a portal for the Victorian State Government for presenting surface water and groundwater data.

  • Strategy

    Design Lead

  • Design

    UX Design, UI Design, User Testing, Design Strategy

  • Client

    DELWP VIctoria

What is WMIS?

WMIS (Water Measurement Information System) is a portal that has been created with the goal of answering the question of “how much water do we have, where is it, and what’s its quality for the state of Victoria.

IIt provides access to data coming from around 850 surface water sites and 1400 groundwater bores across the state. This data is used as a basis for much of Victorias’ water resource management. In addition, the Department for Land, Water & Planning (DELWP) has the responsibility to publish the data they have available in a way that is clear and understandable for the public.

The current version of the WMIS system is over 10 years old and no longer meets user needs.

I was approached to design a new version of WMIS, along with a CMS system because the older version was over 10 years old and no longer met user needs.

Before starting the project, DELWP had run a series of user-needs workshops with over 120 current users of the WMIS system. The result of these workshops was a set of personas and a catalog of over 300 user needs. These could be boiled down to:

“Present the data in a way that is understandable and accessible for non-expert users, while providing a full range of tools needed by expert users to effectively explore it. “

In addition to the user needs, it was also important for me to take into account the Ripple design system being used by the State Government in Victoria, the data structure used in the backend, and having to be able to reuse components and concepts within other KISTERS products.

The project can only be successful if all aspects are accounted for.

II began the project by getting an overview of expectations, needs, and the resources we had available. Using the insights gained both from the user research results and initial meetings with internal stakeholders, I was able to define design goals for the project. I made sure to communicate these with the project team and get their feedback. Clearly communicating the goals and reiterating them throughout the project kept us aligned and gave me a solid fundament for design decisions.

With the goals set and a plan of action, I began defining the main workflows, views, and page architecture in a series of online workshops with different project stakeholders. Working in this way, using diagrams and rough wireframes gave us the ability to quickly iterate on different ideas, test our assumptions, and not get too detailed while defining the main structure of the product.

A diagram detailing several workflows around viewing graphs in WMIS

With the main workflows defined, I was able to begin mocking them up in more detail. Using the Ripple design system as a basis, I began building higher fidelity mockups of what the end product would look like. Creating a component library allowed me to quickly iterate on these higher-fidelity mockups, especially later in the project when many of the main workflows and components had been defined.

I used high-fidelity mockups to create a range of prototypes. We used these to get user feedback on workflows in a series of workshops. With the Australian borders closed and social distancing in place, we were forced to use Miro and Teams to run the workshops. Even with the inevitable technical difficulties, we were able to gather extremely valuable feedback from expert users which flowed directly into further iterations of the product.

Building up a design system as I designed different workflows, I was able to use Figma as a point of truth when communicating with the developers. Having the styling and different states defined in one place and accessible for all made communication much easier and sped up the development and QA process.

Designing a product for use by experts while also providing the guidance needed to be of value for the public made it extremely important to use an iterative process with a lot of feedback, both from the specialists and non-expert users. Working in this way allowed us to create a new product that provides value to these very different user groups. Working with the developers from the beginning and gaining an understanding of the data structure and any limitations also allowed me to create solutions that not only fulfilled user needs, while working within the technical limitations.