[Type]: UX | UI Design
[Client]: Snowy Hydro
[Project]: Scheme Model Interface
[Role]: UX | UI Designer
[Duration]: 3 months
[Year]: 2023 | 2024
Overview
The trading and operation teams at Snowy Hydro were using outdated legacy Excel systems, which were cumbersome to work with, and didn't allow for cross-team collaboration, forcing them to work independently. This was causing problems when there was a need to perform forecasting. Cross-team collaboration was the key driver in the digital uplift.
Through lengthy focus group discussions with the teams, we identified that the need for a digital transformation of the current ways of working. Doing so would enable the teams to work together in real time, therefore preventing siloed staff, and encouraging greater team interaction, which is crucial for smooth operations.
The teams had a comprehensive list of what the new digital scheme model needed to be able to do. As multiple teams would be using it, it had to offer different solutions, all wrapped up in the one interface. Light and dark modes were required, especially as the teams work on different shifts,therefore helping with potential late night eye-strain issues.
My
Approach
To This
Project
To address the cross-team collaboration requirements, I implemented a sandbox for the teams to "adjust and tweak" the data. This gives all the teams members somewhere to manipulate and collaborate to upcoming insights.
UI
elements
The foundation of a project like this relies heavily on spacing and grid systems, which are often overlooked. For this design, I implemented an 8px grid system featuring a 12-column layout and an 8px baseline grid. The spacing system follows a rem-based guide that aligns seamlessly with the 8px grid. Choosing an 8px system enhances responsiveness, as most common screen sizes are divisible by 8 on at least one axis. This approach is crucial for maintaining visual clarity and preventing issues like anti-aliasing.
[I used Untitled UI as a foundation to kick-start the project, significantly streamlining the design process and saving time.]
The typography was scaled to assist with responsiveness. For this first phase of the work, the UI dashboards were only going to be used on larger screen sizes of 1920px x 1080px.
However for future use, typography, colour tokens etc were created to assist with potential mobile and tablet friendly use in mind.
The colours were named using Tailwind CSS naming conventions at the request of the developers. This was great, as having some experience in development, this is how I name colours myself.
Even though they weren't necessary for this phase, I included error/warning/success colours so they are available moving forwards.
I implemented a minimal set of icons, focusing on essential functionality to maintain clarity and simplicity. This collection may evolve as the project enters new phases, ensuring it continues to meet user needs.
As the scheme model dashboard isn't going to be used like a regular UI application, there was no need for UI components such as form field inputs or extensive variants of buttons. I kept it simple, only utilising standard button states, sizes, and hierarchy.
