BUILD GP > WEBSITE REDESIGN & VISUAL REFRESH
The Visual Design
Building Out the Website
PUTTING IT TOGETHER
Using the style guide as our blueprint, and the design system as our tool, the website very quickly took shape.
Hubs
These types of pages are great for housing multiple content types that users can filter through to find what they need. The most complex of these for Build GP was the Resource Center, where their users—homeowners or contractors—can find information on the materials Build GP offers.
RESOURCE CENTER LANDING PAGE
RESOURCE CENTER RESULTS PAGE
SHARE MODAL
RESOURCE CENTER
LANDING PAGE ON MOBILE
RESOUCE CENTER
RESULTS PAGE ON MOBILE
FILTERS ON MOBILE
RESOURCE DRAWER ON MOBILE
Content
BLOG LANDING PAGE
CASE STUDY LANDING PAGE
BLOG POST
CASE STUDY DETAIL PAGE
The most common type of page was for content. This website serves as an information hub where users can explore a variety of topics. We designed the layout to segment the information into digestible blocks, incorporating filters and sorting tools to help users easily narrow down the content they need.
BLOG LANDING PAGE
ON MOBILE
CASE STUDY LANDING
PAGE ON MOBILE
Tools
The other type of pages functioned as tools, allowing users to input information and generate results. These were the most enjoyable to design, as they felt like mini products within the site. Examples include the Material & Cost Calculator and the location finder on the Where to Buy page.
CALCULATOR WIZARD
ON MOBILE
TOTAL MATERIAL
COST TOTAL
SEARCH FEATURE ON MOBILE
WHERE TO BUY RESULTS
ON MOBILE
CALCULATOR WIZARD
CALCULATOR ALERT MESSAGE
WHERE TO BUY
WHRE TO BUY RESULTS
The New Homepage
JUMP AHEAD
Style Guide
