Project Challenge
Invenergy is a global developer and operator of sustainable energy solutions that has developed wind, solar, and natural gas power generation projects as well as advanced energy storage facilities.
Their current process to create project websites was tedious and time-consuming and ultimately produced inconsistent experiences. Our goal was to streamline these pages into a templated, yet flexible, site that would accommodate the content and components needed for most project use cases. Creating a new website would allow the internal marketing team to quickly produce these sites without needing help from outside agencies.
The site’s goal was to answer questions and concerns from local community members who were concerned about the project’s environmental and economic impact on the community. To accomplish this, the site must share project information, highlight the project’s positive impact on the community, and provide information on contacting project leaders if they have questions or concerns.
I was the lead UX designer on this project, working closely with the VP of User Experience, Sr. Creative Director, Business Analyst, Engineer, and a Project Manager.
Research & Discovery
To start the research and discovery phase, I conducted a heuristic audit on Invenergy project sites. To start this process, I documented a wide variety of their existing sites, put them in Miro, and commented with sticky notes.
This process involved analyzing the overall user experience, pinpointing inconsistencies, and highlighting areas where the design did not align with established best practices. It also allowed me to gain a deep understanding of the types and lengths of content needed for each technology. Overall, this audit uncovered actionable insights that were essential in defining the design and enhancing the overall user experience:
Next, I conducted an in-depth competitive audit to benchmark Invenergy project sites against industry leaders and competitors. Like the heuristic audit, I screenshotted competitor sites, put them into Miro, and commented with sticky notes.
Through this process, I gained valuable insights into industry standards and emerging trends by identifying strengths and weaknesses in competing products. It also highlighted opportunities for differentiation and innovation, focusing the project sites around community engagement.
Once I completed the audits, I categorized feedback into four main buckets: IA/navigation, aesthetics/visual layout, content & calls-to-action, and functionality & performance. I then put my findings into a deck for the client kickoff meeting.
While presenting this audit for alignment, I focused on client feedback regarding what worked well and what didn’t between Invenergy and the competitive landscape.
The team gained valuable new insights from the client and was able to clearly define and document business needs. As a part of my process, I put this information into Miro to use as a resource and artifact for alignment.
Design Iteration
Sitemap
Using the audit findings and business needs identified during client meetings, I began to brainstorm a design solution.
The main challenge was creating a flexible template that would be suitable for a wide variety of projects.
To begin solutioning, I documented the existing sitemaps from the websites I previously audited and then began creating an new sitemap, streamlining the structure and categorizing content more intuitively. I ensured that users could easily find project details, what impact it would have on the community, and a way to contact Invenergy. This resulted in a more seamless and user-friendly experience.
My main priority for the sitemap was to add a page that directly addressed the primary user, community members. The Community Impact page aims to stay ahead of any questions or concerns by providing information that Invenergy identified as common scenarios.
Once the client approved the sitemap, I color-coded the sections to show how the website would evolve and how some project sites would have varying content and components depending on technology and length of project.
Wireframes
Once the client approved the sitemap, I began working on wireframes, starting with the home page. Based on research findings, insights gathered from client meetings, and the content hierarchy determined from the sitemap exercise, I began to lay the foundational structure of the interface.
I worked closely with the internal team to share progress and gather feedback to validate design thinking. Based on the feedback, I continuously iterated the wireframes, refining the design and addressing any usability issues.
Client meetings allowed me to present the wireframes, articulate my design thinking, and demonstrate how each element added value to the user experience while meeting business requirements.
The wireframes served as a critical communication tool, bridging the gap between the design and development teams, and ensuring a seamless transition from concept to implementation.
Finalizing Designs
As the client approved wireframes, I collaborated closely with the creative director to ensure a seamless transition into the visual design process. I met with him as needed to provide context or elaborate on annotations, often utilizing Figma’s communication tools to collaborate or answer any questions.