theBDX.com
A much needed brand and website refresh
A ground up refresh of a B2B product services website in the New Home Construction industry—unique challenges and compromises, leading to a solid foundation for future enhancements.
Client
theBDX.com
Role
Lead Designer
Skills
Visual Design, UI/UX
Platform
Responsive Website
Background
When I first asked to refresh the BDX website I was met with resistance. But, as the company went through a change of leadership and the product array was being rethought, I saw new opportunity to take on the project. I gathered internal team support, and we earned the buy-in of leadership.
The old website had been managed by different marketing team members over 15 years. It was built on Wordpress with Divi and had approximately 150 pages. The website was no longer serviceable. My core teammate was a marketing manager with deep institutional knowledge who would handle copywriting and help with organization and strategy. We would have 3 months to complete the project.
The Old Site
The old site had a lot of information, but it was hard to navigate, was lacking an identity, and was not mobile friendly.
The Old Product Array
Products were organized into three groups, which was nice, but it was hard to see how the products worked together as a system.
Making a Plan
I wanted to get a plan together to communicate to leadership and my team what my expectations were and what the timeline milestones would be. I researched best practices for website construction and created a schedule and project plan document.
I also considered options for a platform to build the site on. Considering our lack of developer support, and the team’s existing knowledge of Wordpress and Divi, I chose to keep the site on that platform and dug in on learning everything I could about it.
Approach
As the lead designer on this project, I had three main goals:
Create an identity system for team members to easily follow.
Reduce and organize the website into a serviceable platform that could be maintained and updated going forward.
Generate high quality, targeted leads.
Project Schedule
I created a gantt chart to show the processes throughout time as we built the site.
See the schedule (google sheet)
Project Plan
Even though it was a small team, it helped to get all the goals and plans down in writing.
Read the plan (google doc)
WordPress + Divi Theme
A solid platform with client familiarity and online user support, Divi claims to be the most popular WordPress theme in the world.
Divi Crash Course
With no development team to lean on, I tuned up my skill level with a 20 hour course on Divi.
Taking inventory
I always have to remind myself that 75% of doing good design work is figuring out what the pieces are that you are organizing. This was no exception.
With just the two of us, we sat down and sketched out what pages we currently had. From there, we were able to consolidate like products, and remove old products and pages that were no longer needed. This left us with a greatly reduced list of pages, and a product array that was more manageable.
Additionally, I had recently completed a trade show booth that was well received, and would be pulling styles from that to compile visual standards and assets for the website.
My next step was to start designing.
Trade Show Booth
The recently completed trade show booth was well received and had branding elements that I could adapt for use across all marketing efforts. I decided to use this to create an identity system.
See the booth (pdf)
Identity System
I created a general use style guide. This was more for all design efforts in the company, but I would easily adapt it for the website.
See the style guide (pdf)
Mockups + Progress Chart
For each mockup I created, I tracked its status and what assets were needed. This overview was extremely helpful to the team for seeing the big picture, keeping branding elements unified, and prioritizing efforts to fill in content and still make our deadline.
See the progress chart (pdf)
Green for go
Problem
The old website had a lead form, but it was not styled and looked dated. Also, getting to the form was not consistent and sometimes you did not know what the next step should be.
Solution
With some teamwork and good doses of CSS styling, we were able to create a lead form that matched the site branding, was responsive across desktop, tablet, and mobile, and linked up to the CRM (Microsoft Dynamics).
Additionally, I reserved the green buttons ONLY for the lead form CTAs and placed it in the nav so it would always be accessible.
Oh, and I made it jiggle every few seconds. A friendly reminder that staff was on hand to answer any questions.
Product hierarchy
Problem
The old site had several layers of flyout navigation. And the product categories were not reinforced throughout the site. You never knew where you were when you got to a page.
Solution
We leaned in on the three categories of products, giving them each unique colors, a blurb, and iconography.
Throughout the site the categories would be shown in the Mega Menu, the Footer, and on the home page, reinforcing the product structure, and giving sales some help to cross-sell pair products and sell systems of marketing services.
Additionally, all section headers were made parallel and branded for their product category.
Consistent graphics
Problem
Many of the products in the BDX portfolio have been acquired or developed separately from the brand. Remember, there was 15 years of disparate branding throughout the company, with many logos and graphics, AND the products all had different looks.
Solution
I set up shop in Adobe Illustrator and Photoshop and did whatever I could to create product graphics and illustrations that helped unify the brand. I think it came out pretty well!
Reflections
This was a great project with some significant challenges. Overall I’m happy with the results. I feel that we were able to accomplish my goals, as stated above:
Create and identity system
The identity system has worked well, not just for the website, but for all marketing efforts for BDX. The mesh gradient especially has been useful for blending all the different products (each with its own color).
Reduce and organize
The previous site had layers of plugins that nobody knew what they did, and we could not execute updates on WordPress or the Divi theme without breaking the site. It was not serviceable. Now, with a ground up rebuild and refresh, we are using minimal plugins, tracking logins, and keeping up on maintenance and updates.
The product offerings have been reduced and consolidated. And they have been organized into categories that make it easier for sales teams to cross-sell and put together packages that best meet customer needs.
Generate high quality, targeted leads
Time will tell for this, but all signs point towards a better environment for getting great leads. Other steps being taken to increase leads are SEO and marketing campaigns leading to the site. I’m excited to see how the new site architecture affects lead gen, and now that we have a good foundation to build on, the site can be easily updated to further promote lead generation. I’m a big believer that giving potential customers good, easily digestible information regarding your products is a great way to pull in quality leads.
