The Problem
The original website lacked structure and clarity, making it difficult for users to navigate and understand what PNG Builders offers.
• Confusing navigation
• No clear UX/UI system
• Inconsistent visuals
• Broken styling and code issues
• No clear audience focus
This created friction for users and limited the site’s ability to support business growth.
The Goal
Create a clear, structured website that improves navigation, supports multiple industries, and better reflects the company’s expertise.
The new experience needed to:
• Make information easy to find
• Highlight projects and capabilities
• Create a more modern and professional presence
My Role & Process
I led the redesign from both a UX and design perspective, working closely with leadership to translate business goals into a clear digital experience.
Before moving into page design, I developed a simple style guide to establish consistency and direction. This foundation made it easier to restructure the site and create a system that could scale across all pages.
Research & Discovery
I began by analyzing the existing site and gathering feedback through surveys and internal user testing.
What we learned
• Users struggled to find key information
• Navigation created confusion and drop-off
• Content lacked hierarchy and clarity
• The site felt outdated and inconsistent
These insights helped prioritize what needed to change and guided the overall direction of the redesign.
The two menus made it confusing, especially when using the site on mobile.
Defining the Structure
Structure
Based on research, the focus shifted to simplifying the site architecture and creating a scalable system that could grow with the company.
- Consolidated navigation into one clear system
- Reduced duplicated content
- Improved hierarchy across pages
- Designed for scalability across industries
This approach ensured the site was not only easier to use, but also easier to maintain and expand over time.
Wireframes
Before moving into high-fidelity design, I explored layout structures that prioritized clarity, hierarchy, and usability.
Wireframes focused on:
- Simplifying navigation paths
- Establishing clear content sections
- Creating consistent page structures
This step ensured alignment before visual design began.
UX/UI Improvements
The redesign focused on creating a clean, modern interface that improves usability while reflecting the professionalism of PNG Builders.
- Clearer navigation
- Improved hierarchy
- Simplified user flows
- Consistent design across pages
Every decision was made to help users quickly understand the company’s services and move through the site with ease.
Development
The original website was built on WordPress, so I chose to keep it on the same platform to support easier internal management.
Using custom CSS and PHP, I developed the new look of the site, focusing on a cleaner and more consistent experience. This approach allowed for a full visual refresh without disrupting the existing system.
Testing
Design decisions were validated through internal feedback and user testing.
This helped refine:
- Navigation clarity
- Content structure
- Overall usability
Feedback ensured the final experience aligned with both user expectations and business goals.
Launch
The updated site was implemented on WordPress using custom CSS and PHP.
Since the original site was already built in WordPress, keeping the platform allowed for easier internal management while supporting a full visual and UX refresh.
Visual System
Color Strategy
I developed a color system to differentiate each industry sector while keeping the overall brand cohesive.
This included introducing a complementary color to support PNG Green and creating a structured palette that helps visually organize content across the site.
Typography
I introduced a cleaner typography system to improve readability and hierarchy.
League Spartan was selected for headlines to bring a bold, confident tone. Avenir Next supports subheadings and key information with a clean, modern feel, while Calibri is used for body copy to maintain clarity and readability in longer content.
This combination creates a clear and consistent hierarchy across all pages.
Art Direction
To support the redesign, I collaborated with photographers and videographers to create more intentional, story-driven content. The goal was to highlight real projects and environments while bringing a more polished and cohesive visual direction to the brand.
Photography
The Outcome
From day one of the relaunch, the site saw a noticeable increase in traffic and engagement.The combination of improved structure, clearer messaging, and SEO implementation helped bring more users to the site and created a smoother experience overall.
The analytics shown capture the first month following launch.
Final Result
The redesign resulted in a clear, structured, and professional website that better reflects PNG Builders’ work and makes it easier for users to engage.