EnterBridge Technologies

Website Blueprint and Redesign

Role: Senior UX/UI Designer

  • Sitemap and User Flow Strategy

  • Wireframing and Prototyping

  • QA and Content Implementation

  • Marketing Content Asset Design

Tools

  • Figma

  • HubSpot

  • Octopus.do

  • Adobe Illustrator, InDesign and Photoshop

 
Isometric layout of multiple EnterBridge page designs
 

The Client

EnterBridge Technologies is a custom software solutions company based in Richmond, Virginia. They were in need of a redesigned site that clarified their service offerings, included newly designed blog and case study listings, and aligned their brand under a stronger, more impactful visual design.

The Challenge

EnterBridge already had a strong visual brand, but their website was small and didn’t dive into the level of detail necessary for users to easily understand the value of working with them. By expanding on the current structure of the website, and introducing StoryBrand messaging, we aimed to provide users with a deeper understanding of EnterBridge’s software solutions and made sure all resources and information were easy to find.

Project Overview

We began with a Website Blueprint, to analyze the state of the current website and see where improvements could be made to the site structure, copy, branding, and overall user experience. Once the EnterBridge team had settled on a general design direction, I created a Figma prototype of the full website that was then developed on the HubSpot CMS, a starting point for the rest of their digital marketing efforts.

Following the website redesign, I continued to work with the EnterBridge team on downloadable content offers, email graphics, and other designs for their marketing campaigns.

Project Deliverables

Part 2: Website Redesign

  • Website Style Guide

  • Figma Prototype

  • HubSpot Website Development

  • Case Study and Blog Listings

  • QA Testing

Part 1: Website Blueprint

  • Analytics Review and Competitor Analysis

  • Sitemap and User Flow

  • Mood Board

  • Homepage Design Concepts

  • Homepage Wireframe

Part 3: Marketing Retainer

  • Content Asset Design

  • Infographic Design

  • Calls-to-Action Design

  • Email Templates and Graphics

To see the full site, visit enterbridge.com.

EnterBridge Technologies homepage for desktop and mobile views

EnterBridge Homepage Design for Desktop and Mobile: The homepage is a good example of the variety of modules and content layouts I was working with, including a number counter and the new tabbed “solutions” module. As with any website project, I focused on testing the website on multiple screens, to make sure the user experience was consistent across any device.

Key Project Features

Designed in Figma

Developed on HubSpot

“Solutions” tabbed content module for homepage

“Latest Case Studies” module for solutions pages

Custom case study and blog listing and post pages

Custom website and marketing graphics

Website Blueprint

Research, Sitemap and User Flow

Starting with a Website Blueprint gave us the opportunity to get to know our client better and see where their current website stands. After analyzing the website’s pre-engagment analytics and navigation, we reviewed the ways that the sitemap and page flow could be improved across the site, providing a more clear and accessible user experience. The previous EnterBridge website had been fairly small and limited in terms of content, so there was a clear opportunity to use the StoryBrand methodology to build out a website that dove deeper into the concerns facing EnterBridge’s potential customers.

EnterBridge Technologies sitemap and navigation structure

EnterBridge Sitemap and Navigation Structure: Using the original sitemap as starting point, our team determined which pages to add to the new website’s sitemap, including new pages like the case studies. A primary goal of the project was to provide impactful messaging around EnterBridge’s software solutions, so we included layout and messaging details on the sitemap, making sure we clearly conveyed the benefit of working with a partner like EnterBridge. Like a rough wireframe, these sections help us to visualize the general flow of each page, and get approval before moving onto design and copywriting.

The Mood Board

Before starting on any prototypes or page designs, I built a mood board to align my own vision for the website with the client’s. The mood board allowed me to discuss the expand on their existing brand styles, and define a direction for website typography, colors, and graphics. Ultimately, it gave me the opportunity to make sure the client was on board with the styles that I would be using in the homepage design concepts.

Explore the full mood board in Figma below:

Website Redesign

Prototyping in Figma

Once the mood board and sitemap were approved, I began designing the page prototypes in Figma. I started with the homepage, so that I could present it to the client and make necessary adjustments to the graphic elements used. The homepage serves as a foundation for the remaining elements that make up the website style guide, and it was important that I had approval on the homepage before proceeding with the rest of the website.

While prototyping, I had the opportunity to design a few modules unique to the EnterBridge website, including a tabbed “Solutions” service overview on the homepage, and a “Recent Posts” case study module on the solutions pages. I also made sure that the blog and case studies listings were both filterable so that relevant resources would be easier to find.

To bring clarity to EnterBridge’s unique software solutions, I used Photoshop and Illustrator to design custom, brand-centered graphics that were paired with the new StoryBrand messaging across the site. These graphics can be seen in the hero banners at the top of most pages, at the bottom of many blog posts, and within the EnterBridge marketing emails.

Explore the homepage prototype, featuring an interactive tabbed “Solutions” module, in Figma below:

The Result

The newly improved EnterBridge website now provides customers with targeted messaging regarding the available software solutions and clear navigation for how to learn more about those services. The visual brand is aligned across multiple touch points, creating a cohesive experience for anyone interacting with the EnterBridge brand. And, for those looking to deep dive into the articles and success stories on the website, there are now two filterable libraries for blog and case study content.

We brought the EnterBridge site over to HubSpot to serve as a strong foundation for their marketing efforts — including their emails, blogs and case studies, and workflows. Following the website launch, we continued to work with the EnterBridge marketing team on their content generation and conversion efforts.

EnterBridge blog listing and post page examples

EnterBridge Blog Listing and Post Pages: Two separate blogs were set up for the EnterBridge team, a Blog listing for articles, and a Case Studies listing for all of their customer ROI deep dives. Both blogs were nearly identical in design, though each listing has its own unique filter options.

EnterBridge case studies listing and post page examples

EnterBridge Case Studies Listing and Post Pages: The case studies, unlike the blog posts, include an additional section at the top of the post page for customizable key data points and results.

EnterBridge Solutions Page Examples

EnterBridge Custom Software and Mobile Solutions Pages: While the solutions pages all used the same template, an option was added to place show and hide an “integrations partner” section on the pages that required this additional piece of content.

 
Ebook mockup and call to action example
 
Email template and content offer landing page examples

Assets for EnterBridge Marketing Campaigns: I worked closely with our copywriter to develop assets for lead generation and conversion opportunities including downloadable emails, ebooks, guides, and infographics.