Schuchart
Commercial Builders Portfolio SiteDescription
Redesigned and rebuilt website to improve user experience, site speed, search engine optimization, and internal website management.
Deliverables
Sitemaps, user flows, wireframes, website
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.
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.
Old home page slide in navigation requiring extra steps to access content, along with many unclickable nav items
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
Before: Project page was confusing to navigate and had many non-clickable projects under different categories
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
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.
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.
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.
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, I 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.
View more projects:
