Website Redesign
& Visual Refresh
CLIENT
Georigia Pacific Building Products
YEAR
2023
RESPONSIBILITIES
Branding
Style Guide
Visual Design
UX Design
QA
TEAM
Ashley Rothrock, Creative Director
Emily Griffen (EG), UX Director
John Robertson, Sr Developer
Emily Watson, Sr UX Designer
Myself, Sr Product Designer
CHALLENGE
Build GP, a division of Georgia Pacific targeting the building and construction market, needed a website refresh. They required a design that not only modernized their site but also leveraged recent web innovations to enhance the user experience.
SOLUTION
I collaborated with Deloitte and my team to redesign the site, starting with the creation of a style guide for the development team. Once approved, we applied the guide to develop templates that defined the site’s look and feel. I worked with both teams to iterate and refine each page for both desktop and mobile, ensuring a cohesive and optimized user experience.
Style Guide
ACTIVITIES
Define Brand Identity
UI Elements Guidelines
ContentFormatting Guidelines
Grid and Layout System
Accessibility Standards
Image and Video Guidelines
Create Sample Templates
Version Control and Updates
OBJECTIVE
Create a set of rules for the new visual language to be consistently applied across the website.
To expedite development, Build GP requested that we create a style guide before beginning the full site development. This document will not only serve as guidelines for us during the design phase, but also allow the Deloitte team to use it for building the backend system and other pages they are responsible for. We created it as a living document in Figma for all parties to reference and update as needed when changes occur.
Design System
ACTIVITIES
Define Branding on UI Elements
Create Color Palettes
Create Font Styles
Create Icon Library
Create UI Component Library
Design Responsive Components
Create UI Interactions and Prototype
Ensure Accessibility for All Components
Documentations for Dev Handoff
OBJECTIVE
Design using a robust component library for consistency and quick updates that can reflect across multiple pages.
With a tight schedule, time is of the essence. Working quickly can often lead to mistakes and inconsistencies, but that's where a design system can serve as the glue that holds everything together. My recommendation to design using Figma allows me to work with components and all their benefits. Not only can I create pages quickly, each already imbued with the correct branding colors and styles, but I can also make updates and prototype very efficiently.
The Visual Design
ACTIVITIES
Wireframe and Design
Create Grid Layouts
Responsive Design
Prototype Interactions
Prototype User Flows
Ensure Accessibility
Version Control and Updates
Documentation for Dev Handoff
OBJECTIVE
Build and prototype different sections of the website. Then, once approved, document for development.
The design phase was split into multiple sprints, with me designing one section of the website at a time. Sometimes, it also involved working with both our internal team and the Deloitte team to map out more complex sections, such as the Material & Cost Calculator or the Where to Buy page. Collaboration across teams was crucial during this phase to ensure that the functionality we mapped out in the wireframing stage was reflected in the design.