top of page

Productive Energy Solutions

Copy of Measurements IMG_1765.HEIC

Subtitle Goes Here

This is the space to introduce visitors to the business or brand. Briefly explain who's behind it, what it does and what makes it unique. Share its core values and what this site has to offer. 

5098266.jpg
Website Chart


Redesigning an Outdated Website to Drive Business Growth


For over two decades, Productive Energy Solutions maintained an online presence with a website that lacked structured UX, mobile responsiveness, and clear user pathways. As the company looked to modernize, they needed more than just a visual refresh—they needed a website that would drive engagement, improve accessibility, and support business growth.



Overview

📅 Timeline: Ongoing
🎯 My Role: UX Designer (Upcoming: UX Developer – Headless WordPress + React)
👥 Team: Myself (UX Design & Development), Yilin (UX Design) + Business Owner
🛠️ Tools: Figma, Google Forms, Hotjar (planned), WordPress (planned), React (planned)



Problems Identified

Revamping Productive Energy Solutions’ Website_ Addressing Key Issues - visual selection.p

Goals & Objectives

  • Redesign the website UX to enhance engagement and business conversions.

  • Implement modern UI principles for better readability and navigation.

  • Introduce usability testing to validate improvements.

  • Prepare for development with a scalable design for a Headless WordPress + React implementation.

PES.png

Process and Development

Revamping Productive Energy Solutions’ Website_ Addressing Key Issues - visual selection (

Key Findings

​

  • Users struggled to find key services due to disorganized navigation.

  • Overwhelming technical jargon made content inaccessible to non-experts.

  • Lack of CTAs and conversion pathways resulted in zero lead generation.

  • Poor mobile usability led to high bounce rates on smaller screens.

UX Design & Prototyping

Wireframing & Information Architecture Overhaul

  • Created 10+ wireframes exploring alternative layout structures.

  • Developed a more intuitive navigation system, making service pages easier to find.
     

Visual Design & Accessibility Improvements

  • Designed 3 high-fidelity prototypes with modern UI elements.

  • Improved content hierarchy, making information digestible at a glance.

  • Implemented WCAG accessibility principles for inclusivity.
     

Usability Testing & Iteration (Ongoing)

  • Gathering early feedback from stakeholders and potential users.

  • Refining prototypes based on navigation clarity and engagement metrics.

Upcoming Development Phase: Headless Wordpress & React

Once the UX design is finalized, I will transition into development, focusing on:
 

  • Headless WordPress as the CMS – Ensuring easy content management for non-technical users.

  • React + Next.js for the frontend – Improving performance and scalability.

  • SEO & Analytics Implementation – Tracking user interactions, bounce rates, and lead generation.

  • Progressive Web App (PWA) Features (if applicable) – Making the site accessible offline.


 
📊 Expected Impact & Next Steps

🚀 Improved information clarity, helping users find services 3x faster.
🚀 Optimized mobile experience, reducing bounce rates.
🚀 Lead generation features, introducing clear CTAs and contact forms.
🚀 Performance enhancements, reducing page load time significantly.
📌 Currently refining the design based on usability testing before moving to development.
 
🌟 Key Takeaways & Learnings

  • Data-driven UX decisions ensure designs align with user needs.

  • Bridging UX & development allows for better execution of design ideas.

  • Iterative testing improves navigation efficiency and conversion potential.

📌 Excited to move to the next phase—let’s connect if you want to discuss the process! 🚀

bottom of page