TransGrid - Experience Design

For over 60 years TransGrid has maintained one of Australia's largest electricity transmission networks to deliver innovative solutions to enable business. It is well placed to deliver smarter, more cost-effective grid connections for large-scale renewable energy generators.

Lead product designer for Spares, Estimation Tools, TAF, Mobile Plant Framework, Theos, TG SmartCharge.
User research, CX analysis, prototype, interaction design, visual design, workshop and design thinking

Discovery / Understand

TransGrid is a business goal oriented company with the complete agile development process as it has many integrated applications communicating to its ERP system. They had the plan to develop some custom projects to serve various business needs, which would be ultimately reporting back to ERP system.


It had pipelined some projects like spare to manage it spare equipment in different substations around Australia. This product was challenged to be an independent application to simplify management of spares types of equipment separately from the ERP. As ERP was complex and associated with many systems, it was hard to use for spares only. The spare product was designed to solve the problem.

TG SmartCharge was the integrated project with NSW government to manage their energy saving with Telsa batteries. The challenge was to provide delightful user experience to manage the battery in different modes to save the energy bills.

Understand user needs and domain

User research was documented in Onenote with business requirements led by the product owner. In order to get a better understanding of the field (and complicated electrical terminology) we conducted a contextual inquiry, ethnographic research, and several user tests onsite at TransGrid. We used their time to learn about electrical transmission, workflows, staff hierarchy, personal pain points, and the touch points process.

In order to make sense of everything we heard, we held a few sessions in which we categorized our insights in a few different ways. For clarity and to make sure we stayed on track throughout the process, we also mapped out process to keep the business in a loop for each design solution approval.

Ideate / Sketch

Defining the Scope

After validating our findings with the product owner, we used to focus on the scope, clarify requirements to the deepest details of acceptance criteria. Then sprint planning sessions were done to decide on the features, user stories, and task analysis documented in TFS.

Wireframes and Prototypes

The sketches were drawn in the paper to outline the user journey and low-fidelity concepts for the solution design to discuss in a team. Other steps of design iteration were wireframing/prototype in AxureRP to document all the interactions and process flow to present in front of stakeholders and product owners. In order to efficiently explore conceptual directions and get quick feedback, the team decided to iterate and validated designs extensively over the course of the project.

Decide / Iterate

User Testing

After the prototypes were ready for users to get an idea of the proposed solution. Users in TransGrid were specific to the certain domain for all these product designs except TG SmartCharge, which was presented to actual customers. Design iteration in prototype allowed us to rapidly explore many directions early on without getting bogged down just yet by the potential implications. It also made it easier to frequently validate with the business to make sure we were addressing needs and designing efficiently.

After user testing was performed to match the business requirements and technical challenges to share information around multiple distributed systems. The prototype was interaction guide for the developers and verify solution for the proposed solution to satisfy the user needs. TransGrid is strict about its budget, schedule and project deadline. The agile process was rapid to do iterations, validate and approve to move forward for the development. As with all product work, there are hundreds of decisions that are made. And these the highest impact decisions that were the result of our many rounds of design sprints and validation.

Validate / Implement

Designing Components Library

The final touch was the visual design based on Global Experience language (GEL), I was the lead to define, create and maintain the visual components to be used in finalized design solution for the product to accommodate the business needs under cost. That means, the proposed solution should be reliable to implement the proposition to the business value. The visual components were similar to design the products but used different shades of TG branding. However, we were creating new components that didn't exist elsewhere, so we challenged ourselves — every design decision we made considered the larger implications for the rest of the app.

We created:
  • Component audit, review typography, buttons, forms, inputs etc. in order to remove redundancies, condense styling where appropriate, and allow for new designs to integrate smoothly.
  • Style guide that includes: a responsive grid built in Figma, typography + usage, new UI designs, color examples and usage

Final Insights

Each product was distinct in terms of users, domain, design, and implementation. There were technical challenges in security, architecture, and solution design to deliver the business goals. Except for TG SmartCharge, the users were given UAT environment to use and provide feedback for the improvement and refinement in product design.

Designing for components helped tremendously. Not only did it allow us to rapidly iterate and get quick feedback, it also forced us to design efficiently and in a manner that could be re-used across the product. Also, a component audit forced us to remove redundancies and consolidate approaches which were crucial moving forward into hi-fidelity.

Throughout every project design and development, we relied on our business requirements and extensive knowledge of domain experts. Ideally, we would have been able to get in front of more users or similar expert professionals, to get diverse perspectives and avoid bias.

Lastly, Spare was completed and implemented within the deadline and cost, whereas Estimation Tools was completed to save budget and TG SmartCharge is still in progress to be completed within the budget and the scheduled date.

Wireframes - preview only.

Interaction guide

Wireframes for Spare and Tg SmartCharge - selecled only

Visual Design Components - preview only

This role had a huge involvement in design thinking for visual components as well. The entire TrandGrid component library was improved with new visual components and elements.