BN, an Augeo company

A full scale brand evolution from Brand Networks to BN, an Augeo company.

Goal

Website redevelopment as part of the full scale brand evolution.

Process

I was brought in as the sole developer on this project, the rest of the team were internal employees and consisted of Project Management, Copy/Content, Design, and Systems Architecture.

Time Constraints

Due to some unforeseen complications before I was brought in, the timeline was rather compressed in order to meet other commitments for launching this brand evolution.

In situations like this, it's very important to maintain close communication and flexibility from the start and that was certainly the case here. The whole team banded together and ensured my questions were answered, blockers were addressed, and suggestions for time savings in development effort were considered against their primary goals.

Architecture

The prior website was built using WordPress plus a handful of plugins to add some necessary features. The ideal was to complete the newly branded site in WordPress as well because of the teams familiarity using that to manage content.

Because there was a modest amount of content that needed to be transferred over (much of it was rewritten), I suggested taking this as an opportunity to simplify the architecture and reduce the number of plugin dependencies. This would end up leading to some fairly substantial performance improvements, more on that below.

The only plugin added during development was a custom post type for open positions, where all open positions are displayed on the Careers page. Post launch there were a couple more added for things like cookie consent. Otherwise, it’s all native WordPress functionality!

Custom Interactive Elements

There are only two third party JavaScript libraries in use:

• Splide for a rotating marquee of client logos and client stories carousels
• CountUp for the stats on the Who We Are page

The rest of the interactive elements sitewide were either simple enough, or unique enough, to require custom development. They are:

• Header/Mobile Mega menu - Mega menus can be quite challenging to build in a way that matches the intended design (let alone make accessible) when using third party solutions. I made the call to spend the time building this one myself because the navigation was so custom and is one of the most critical pieces to ensure is accessible. The end result doesn’t duplicate any of the menu item HTML, is accessible, and allowed us to have a completely different layout for each of the three dropdowns.
• Auto reveal accordions - the “Social Activation Engine” section on the homepage for example. This started with a semantic HTML foundation of `details` and `summary` elements, and was enhanced with some JavaScript that calculated the accordion section that should be opened based on scroll position
• Scroll-triggered Screen Transitions - for example on the Brand Advocate page just below the hero. There’s a mobile screen that locks into place as you scroll, the text to the left keeps scrolling and when the next section of content appears the screen image changes.

Outcome

• I have worked with many developers over my career and you are top notch and pleasure to work with.

  more of this testimonial from Dan »

  Dan Deiure
  Lead Systems Architect @ Augeo

  

• Steve's thought leadership, critical eye, and expertise led to a website that exceeded expectations on all fronts.

  more of this testimonial from Kirsten »

  Kirsten Alford-Osborne
  VP Marketing @ Augeo

  

Performance

Based on the decisions made for the new site architectur, and an overall reduction of third party code, we were able to ensure this first release sets a strong accessible and performant foundation.

While Google Lighthouse scores provide only a high level overview based on automated scans, I’m still very proud to see scores in the 90s across the board!

Visual Comparisons

Some before and after comparisons between the previous and current site, as well as a comparison between the design and the live site to illustrate how close they match.

Before and After - Brand Advocate page

Before and After - Homepage

Design vs Live - Brand Advocate page

Feel free to get in touch with me with any questions, corrections, or takedown requests.