Select Page

Schuchart Commercial Builders

Web Design

I recently had the privilege of working with Schuchart to overhaul their website. They initially requested a few updates, but it was apparent after our first meetings that simply updating their current site would be a poor investment.

The Schuchart website was slow and confusing for users. A surplus of performance-robbing scripts were running simple features and—due to the layered complexity of the WordPress theme—a considerable amount of work was required to make even minor updates. Therefore, Schuchart was unable to manage the website internally.

The rebuild and redesign significantly improved performance and enhanced the user experience. Additionally, the Schuchart team is now able to easily manage and update the website without additional design expertise—and without a headache. Over time, this will result in considerable website maintenance cost savings for Schuchart.

Schuchart website ux responsive layout

User Experience (UX) Design

The redesign began with looking at the first interactions of users on the site. By reviewing previous task flows and cutting unnecessary steps from the process we were able to simplify navigation and improve the flow and access of information.

Eliminating the logo splash screen and slide-in navigation opened the homepage several seconds faster, preventing unnecessary drop-offs. While converting the menu to a familiar, more accessible layout, we also removed non-clickable items that confused users.

Schuchart website user task flow, before and after
Shuchart website user taskflow, before and after
Schuchart old home page logo splash screen

Old home page logo splash screen increased loading time and wait time

Schuchart old home page

Old home page full screen banner with legibility issues and less accessible menu

Schuchart old home page slide in navigation

Old home page slide in navigation requiring extra steps to access content, along with many unclickable nav items

Schuchart website, new homepage on desktop

New homepage with familiar, streamlined menu and shorter hero image with more legible copy

We made further structure and speed improvements without sacrificing the visual appeal of the site by converting the full screen banners to 66% of the screen size. This maintained the beauty of the images without slowing the site or hiding valuable content.

Additional improvements and new features:

  • Project grid layout, filterable by project type for easier project navigation and viewing
  • Social media combined feed (Instagram and Facebook)
  • Team grid layout
  • Toggles throughout to streamline content, while making additional information accessible when needed
  • Embedded Google maps for office locations
  • Added a footer with menu and contact form
  • Back-to-top button for quicker navigation
Schuchart website, old projects page

Before: Project page was confusing to navigate and had many non-clickable projects under different categories

Schuchart website, new projects page

After: Project page has a better variety of feature images, more focus on client and project names, and a filterable category menu for finding relevant projects 

Schuchart website, old team page

Before: Team page used a non-intuitive slider with small, illegible copy. The slider required clicks to navigate the side scroll until you arrived at the team member you were looking for. 

Schuchart website, new team page layout

After: Team page uses a grid layout like the projects page, capitalizing on the intuitive nature of scrolling. It also features toggle icons to reveal team member bios, rather than flooding the page with an additional 40 paragraphs.

Schuchart website, old contact page

Before: Contact page had a full screen hero image of a red pattern (not shown here) that pushed content out of the screen with little to no visual benefit. The contact form had narrow fields and buttons on mobile, and no spam protection for submitted messages. 

Shuchart website, new contact page

After: Contact page uses a 2/3 screen hero image (not shown here) so the introduction copy prominently displays in the first view. It is followed by social icons and a form with better legibility and larger form boxes and buttons for accessibility on smaller screens. We also added Google ReCaptcha to block out spam. 

Visual Design

The redesign maintained some of the visual qualities that existed in the previous design, while overhauling some of the layouts and polishing details throughout.

Site Performance and SEO Grades

The major driving factor for the redesign was the poor performance of the previous site. Therefore, it was crucial to resolve the issues and be able to quantify the results.

Performance Grades Before:

schuchart.com (home)
Performance Grade: D (63)
Load time: 4.76 s
Faster than: 33% of tested sites
Page size: 5.3 MB
Requests: 178

Performance Grades After:

schuchart.com (home)
Performance Grade: A (93)
Load time: 1.22 s
Faster than: 85% of tested sites
Page size: 1.9 MB
Requests: 54

Search Engine Optimization (SEO):

Copy edits were outside the scope of the project. However, by renaming image files, assigning proper alternative text for images, and writing thoughtful page titles and meta descriptions, We was able to improve the SEO score by 20%. This score will continue to rise as the Schuchart team updates copy throughout and adds more projects with a better system in place for using keywords in the correct places.

Website Management:

As part of the project, I provided tools and simple training to equip the Schuchart team to make additional edits and updates on their own.

Working with Jonny has been incredibly easy. He is very skilled at what he does and understood our vision perfectly. Jonny’s redesign of Schuchart’s website made editing and updating so simple, saving me the time and struggle I previously experienced. Our website now functions much faster, looks cleaner and is much easier to navigate. It was truly an excellent experience working with Jonny on Schuchart’s website.

Jessica

Marketing Coordinator, Schuchart