Problem: The client have ended up with the functionality of their current site on Drupal 7 (a free and open-source web content management system). They want to enhance the user experience of their website.  

Client: Transpower is a state-owned enterprise who provides the infrastructure and market systems that connects electricity generators to major electricity users and distribution networks that deliver electricity to homes and businesses around New Zealand.

Target Audience: All Transpower users including distributors, generators and large industrial companies who directly connect to the Grid and provide power to consumers, and ordinary users.

Objective:  We are engaged to rebuild the existing Transpower corporate website on Drupal 9 to deliver a fully managed, well documented, secure and and long term supportable platform for their customer engagement.

Features and Functions: 

Header section with a Live data high chat embedded

Linear pattern as content page feature image

Modular tiles layout with brand illustrations covered

Side bar with drop down menu

Time frame: 2 weeks

Tools: Photoshop | Illustrator | Figma | Zeplin | InVision

Role: UX/UI designer

After an initial consultation on the requirements for the project with client, I conducted a detailed research for styles and competitor analysis. This step was crucial in identifying gaps and opportunities, leading to a strategic approach in design and content placement.

How should we do to implement a practical and visually appealing design complying with the client’s brand guideline and Drupal CMS styles?

Prior to seeing the mood board, the client has only had meetings to discuss their project and filled out a creative brief. The mood board was most likely the first time they were getting to see any of their ideas visualised. Handing them the detailed and well designed mood board not only showed them the capabilities as a designer, but also got them pumped for the design process. It also helped the project feel more real to them and got them committed early. An effective communication with developers and a good understanding of the key features of Drupal CMS, saved us time and reduced errors in the design process. ​​​​​​​

Developing page wireframes and prototype were crucial for cohesive design and user experience. These templates, designed for various content types, had to be responsive across devices, ensuring a consistent and accessible user journey.​​​​​​​

The website has a great user experience across a wide range of device types.

Throughout the UX and design approach we have responsive design baked in to our thinking and processes.

Transpower was successfully launched in late 2022, with a clean and nice user interface. The flexibility of Drupal 9 also makes it much easier to support and upgrade long term. 

Reflection: This project honed my skills in creating user-centric designs under tight deadlines, emphasising the importance of clear communication in UX/UI design for website design on CMS.