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
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.
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.
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.