Frederick Block Web Design & Custom Umbraco CMS Integration
Challenge
Frederick Block, Brick & Stone, a third-generation family-run business, has been providing quality masonry, landscape, and building products to homeowners, contractors, and architects for over 50 years. They have become the leading distributor of masonry and hardscape products for the residential and commercial markets servicing Winchester, Frederick, Clarke, Warren, Fauquier, Loudoun, Greene, Albemarle, and Shenandoah counties, as well as the eastern West Virginia markets.
Frederick Block came to The Scylla Group with an outdated site with incomplete or old product data, and in need of a web strategy. They were looking for strategic insight, product organization, better customer experience, intuitive content management, and a fresh look.
Insights
Frederick Block has a plethora of categories, subcategories, and products that needed to be organized. Their clients should be able to explore options quickly and obtain a better idea of what product options meet their needs and fits their style. Deliberate call-to-actions along the customer journey creates opportunities to call Frederick Block for more detailed information and product selection expertise. We wanted this experience to be inspiring, reward exploration, but easy to find products quickly.
We started with an Uncovery (uncover and discovery) phase with interviews and research to craft our concept acceptance criteria and we were off to exploring stylescapes. The stylescapes exercise is a combination of images, textures, typography, and colors to communicate a certain look and feel of a brand. With feedback from the client, we identified the key elements to bring to the service and found the sweet spot, perfect for Frederick Block. An elevated yet practical look and feel that matched the wide range and quality of their clientele.
From the stylescapes, we transformed the designs into a web-friendly style guide —complete with typography, colors, buttons, and other digital design elements. With the newfound set of guidelines to follow, the well-organized wireframes easily transformed into full-color compositions.
Our Solution
With a more modern design style in place, we focused on the organization of content on the site and how to apply the best UI/UX. We gave Frederick Block a new product categorization and hierarchy, so they could have a more accurate product inventory online. Their new site design included a product filter on the sub-category pages allowing users to narrow search results by color, manufacturer, and application. With countless product offerings, getting the user to find options quicker was a must. The website also had a brand-new image strategy that would not only display what the product looked like on its own but also in-use imagery to show the product in multiple environments and applications. Seeing how the various bricks and blocks looked in different settings was key for the user experience. We also created customer-focused content, with new resources like the Inspiration Gallery and Articles to add value to their journey. We also made sure to have a clear, prominent call to action to encourage users to continue their product journey by talking with the knowledgeable Frederick Block staff.
In addition to the UX/UI improvements to the front end, so the user could easily find what they need, we made the back office intuitive so Frederick Block could easily manage all their content in an Umbraco Content Management System (CMS). Umbraco gave us the flexibility to develop custom components that matched the new visual identity; this includes a custom header, footer, banner slider, product detail page, blog, and inspiration gallery. With all of this in place, their new web solution was complete with strategy, updated branding, product organization, and an intuitive interface for both Frederick Block and their customers.
Results
Related Project Examples
