Website Redesign Productive Energy Solutions
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) + Ron Wroblewski (PES Owner)
Tools:
-
Figma – Wireframing, Prototyping
-
Google Forms + Zoom – UX Research
-
React + Vite – Frontend Framework
-
Tailwind CSS – Styling System
-
Lighthouse, WAVE, Screaming Frog – SEO & Accessibility Audits
-
Git, cPanel – Hosting & Deployment
Problems Identified
UX Challenges
-
Navigation was cluttered and unclear, with outdated sections (e.g., Tools).
-
Course information was dynamic and often broken, frustrating users.
-
Inconsistent layout and lack of visual hierarchy made it hard to scan.
-
Mobile experience was poor, leading to high bounce rates.
Technical & SEO Issues
-
WordPress theme broke under PHP 8+, with no supported updates.
-
Dozens of dead and duplicate links, harming both user trust and SEO.
-
No semantic markup or accessibility best practices (e.g., missing alt text, heading order).
-
Over 6GB of unoptimized media and outdated files slowed the site.
Initial Research Insights
To guide the redesign, I conducted foundational user research:
-
30+ online surveys with current PES clients and site visitors
-
5 semi-structured interviews with training participants and potential customers
-
Key insights:
-
Users primarily visit for training access and energy services
-
“Online Tools” and several links were perceived as irrelevant or broken
-
The homepage lacked clear value proposition and contact path
-
Streamlined Sitemap
The original site had over 8 navigation items, many of which were outdated or underused. Based on user data and stakeholder interviews, we simplified the structure to prioritize clarity and task completion.
New Sitemap (Post-Redesign):
Key changes:
-
Merged redundant pages (e.g., “Industrial Energy” folded into “Services”).
-
Removed "Tools" section entirely based on user confusion and irrelevance.
-
Redirected training access to AMCA website, maintaining visual consistency.
UX & Information Architecture Redesign
Building on Yilin’s lo-fi wireframes, I iterated on the design based on research findings and applied UX principles to improve clarity, flow, and engagement.
UX Decisions Backed by Research:
-
AMCA redirect was implemented because 80% of users just wanted the course links, not dynamic descriptions.
-
Merged service-related pages to reduce cognitive load and make services easier to browse.
-
Sticky navigation and large, repeated CTA buttons were added based on interview comments about not knowing where to click.
Usability Testing Results & UX KPIs
After implementing the redesigned sitemap and interface, we measured the impact through task-based usability testing and post-test surveys.
Interpretation:
-
The streamlined sitemap reduced user confusion, increasing task completion.
-
Users found key actions (contact, training, services) quicker and more intuitive.
-
Improved mobile UX and visual hierarchy boosted perceived professionalism.
SEO & Performance Enhancements
-
Rebuilt site as a React + Vite static app for faster performance and simpler hosting.
-
Added semantic HTML5 structure and meaningful metadata.
-
Removed dead links, old PDFs, and unused assets.
-
Optimized all images (WebP conversion, compression).
-
Rewrote headers and content to include relevant keywords like “energy consulting,” “energy training,” and “mechanical systems optimization.”
SEO & Performance Enhancements
This redesign wasn’t just a visual overhaul, it was a complete rebuild grounded in user research, performance needs, and long-term maintainability. From clarifying navigation to improving mobile responsiveness and boosting SEO, every design and development decision was rooted in solving real user problems and meeting business goals.
The new site now delivers:
-
A seamless, task-focused experience across devices
-
Optimized performance with fast load times and lightweight structure
-
Strong SEO foundation through semantic structure and meaningful metadata
-
A static, scalable React + Vite build that eliminates legacy WordPress issues
Working on this project reinforced the value of user-driven design and technical agility. I navigated legacy tech constraints, collaborated with stakeholders, and applied full-stack thinking to create a site that’s faster, clearer, and easier to navigate, without relying on a CMS.