Triangle Tech

Agency: Savvy Marketing Group
My Role: Research, Strategy, UX Design, Visual Design, Web Development

Background

Triangle Tech is an industry-leading technical school that helps people prepare for a variety of trade careers. They have six locations throughout Pennsylvania, offering an Associate in Specialized Technology degree in five industries, which students can earn in 16 months.

Savvy Marketing Group has been the Agency of Record for Triangle Tech for over a decade, and the relationship between Savvy and the primary stakeholders at the school is very close. Between a prior freelance arrangement and my full-time position, I have been working with Triangle Tech since 2013.

In the past, it’s been a challenge to convince them to try new ideas. For example, it took until 2017 to convince them to update their website theme to use a responsive design. Citing Google Analytics and industry best practices, we convinced them that it was time to look at their overall digital marketing strategy.

The agency team for this project consisted of myself, an account manager, a copywriter, a videographer and a web developer.

This case study is a snapshot of activities that took place from 2017-2019.

Understanding the Problem

Organic search, Google Ads campaigns and social media posts drove consistent traffic to the website, but analytics showed that the site had a high bounce rate, and the lead form performed poorly.

In August 2017, Google Analytics showed:

  • 16,553 unique pageviews
  • 1:08 average time on site
  • 57.98% bounce rate
  • 35.07% exit rate on the lead form page
  • 2.85% total goal conversion rate
  • 3.89% total goal abandonment rate

We were doing a good job driving traffic to the website, but not converting leads once they got there.

An image of the site in early 2017, pre-redesign
An image of the site in early 2017, pre-redesign

Research

Triangle Tech made their Admissions Director one of the key stakeholders in the project. Through a series of interviews and research exercises with the Admissions Department, we gained a great deal of insight on their target audiences. We were also provided with quantitative enrollment data by school.

The Marketing Director provided access to results from the Career Readiness Survey posted on Triangle Tech’s website. The survey includes detailed questions and provided a rich source of qualitative data on the motivations of potential students. Survey responses were compiled, reviewed, and compared to identify trends.

A sample submission from the Career Readiness Survey
A sample submission from the Career Readiness Survey

Another resource was the archive of videos our team had previously shot for commercial spots and social media posts. These videos primarily consisted of interviews with students, graduates, and employers, explaining their motivations and experiences with the school and graduates in the workplace.

The decision to go back to school is complicated. Trade school prospects need time to weigh their options.

We examined the current workflow for prospects who visited the website, and gained the following insights:

  • There were three methods of engagement – complete a lengthy lead form on the contact page, complete the multi-page Career Readiness Survey or opt into automated SMS text messaging.
  • Once a lead was received, admissions reps called the prospect immediately to schedule a meeting.
  • Leads were then fed a series of emails or text messages based on one criteria – either current High School or Non-High School students.

We identified these as issues with the sales funnel:

  • The only methods of engagement were for bottom-funnel leads.
  • There was no strategy to nurture leads to get them further down the funnel.
  • The current personas did not accurately represent many of Triangle Tech’s prospects.

We then went to work on understanding the target audience. Based on our work with the Admissions team, the copywriter, account manager and I created seven User Personas to identify key characteristics such as age, support system, aspirations, and biggest challenges. The team developed a User Journey to guide each persona from Awareness, through Consideration to the Decision stage.

Seven User Personas to represent Triangle Tech’s Target Audiences
Seven User Personas to represent Triangle Tech’s Target Audiences


Early Ideation

The first suggestion was to redesign the website layout. This would provide an opportunity to reduce the bounce rate for the almost 61% of visits coming on mobile devices. Our assessment called for the following layout changes:

  • Remove one sidebar to add more body real estate
  • Add breadcrumbs to improve navigation
  • Add search functionality on all pages

Our second suggestion was to reduce the number of fields in the lead form. This suggestion was met with some resistance, and the conversation shifted to ways we could lengthen the sales funnel to nurture each lead, gathering more data along the way, until the prospect was ready to take the next step.

Our third suggestion was to combine the client’s digital marketing efforts in a single Inbound strategy, using HubSpot as the foundation and updating Triangle Tech’s website to serve as the hub for all Inbound marketing efforts.

Information Architecture

The website redesign kept the existing site map intact. This fit our strategy, as we did not see an issue with the overall structure of the website content.

We did run into a challenge when it came to the page content itself. We recommended rewriting much of the copy to appeal to the User Personas we had previously identified. However, Triangle Tech did not want to rewrite or make significant changes to the page copy. This limited our content strategy to improvements that could be made using existing content.

We did convince them to reposition the Career Readiness Survey as a Quiz, to make this feature more user-focused.

The copywriter, account manager and I developed a content strategy that matched previously produced video content with each location page. Combined with a list linking to each program offered at that location and a Google Map, these pages now contained all of the information visitors needed, with a Call to Action driving to the lead form.

Content Strategy for each step in the User Journey
Content Strategy for each step in the User Journey

A similar strategy was employed with program pages, with additional video content showing graduates in action and a list of curriculum highlights.

Including video on a landing page can increase conversion rates by 80%

Unbounce

To develop the lead nurturing strategy, I designed a workflow to guide each Persona along their Journey, using a series of emails and text messages to provide relevant content. Custom website content was prepared for key webpages to deliver relevant messaging based on the user’s stage, using HubSpot widgets to deliver dynamic content. A plan was made to start a blog and begin producing weekly content to expand the school’s digital footprint.

Wireframes and Prototyping

Wireframes of the new layout were created for mobile and desktop, arranging the navigation to allow for proper mobile access and providing search on every page. Breadcrumbs were added to help orient users, and space was allotted for a large header photo on each page.

Wireframes for Desktop and Mobile
Wireframes for Desktop and Mobile

In lieu of an interactive prototype, the live website was cloned to a secure development environment. We then removed the theme and applied a clean install of the Drupal Omega base theme, along with a clean child theme. The layout was adjusted to match our wireframes, providing a low-fidelity prototype using real data. This prototype was used to gather feedback with the client, including their Admissions and IT staff.

Visual Design

Triangle Tech did not have an existing style guide or formal brand standards. However, it was important to all stakeholders that the new design adhere very closely to existing brand materials, including the logo, tagline, fonts and colors.

A Style Tile depicting the color scheme, typography and button styles
A Style Tile depicting the color scheme, typography and button styles

The orange, purple and green brand colors are all very vibrant and each one calls for attention, as does the chunky Arial Black font. Subsequent iterations of the UI design attempted to minimize the use of these colors, introducing light grays and lots of white space to help break them up. We used green as the primary link and button background color, with orange as the hover to make a clear distinction. Purple was used for page titles and the footer background. There were some minor departures from these conventions, such as the Career Readiness Quiz, as a way to make this Call to Action stand out.

Refinement

During the project, the client received notification that their campus management software would reach end of life in about a year, and they would need to find another solution. The stakeholders ended their relationship with HubSpot in favor of campus management software that included admissions, financial aid and student transcript features, in addition to CRM, marketing, and sales.

I adjusted the strategy to fit these new constraints. The email and SMS nurturing campaign was adjusted to fit the new platform’s marketing limitations, reducing the seven User Workflows back down to two – High School and Non-High School. The dynamic website content and blog were eliminated.

Ultimately, we were only able to convince the stakeholders to eliminate one field from the lead form. Instead, we rebuilt the form using HTML5 structure to let the web browser provide tool tips and error messages when required fields were not completed.

Handoff

This project did not involve a formal handoff for two main reasons:

  • I am the primary in-house web developer
  • The prototype was already a working dev site, so by the time the prototype was approved, development was already well underway

That said, I am able to design earlier steps that make the development process easier. For example, I designed the page layouts to incorporate menus built on Drupal Views. Since Drupal Content Types and Taxonomies were used to organize Programs and School Locations, using Views keeps the programs on each school’s page up to date. Similar strategies were employed to organize the list of companies who employ graduates, and schools with articulation agreements for course credits.

As I am the primary in-house web developer and resident Drupal expert at Savvy, there was no formal handoff.

As a web designer, I also make sure to use web-safe fonts, translate all colors to hex numbers and make a point of testing design elements during the design process to see if I can reproduce them in CSS. This makes it easier to develop pages that match pixel-perfect with the visual designs.

Additional development help was enlisted to map the lead form fields to the new campus management software’s CRM and provide failsafe measures to ensure that even if the CRM input fails, a copy of the lead is preserved.

Final Solution

Triangle Tech - Desktop View
Triangle Tech - Mobile View

The redesigned website was launched in mid 2018. Over the next few months, we noticed that conversions through the lead form were increasing.

By August 2019, Google Analytics showed:

  • 19,561 unique pageviews
  • 1:27 average time on site
  • 62.49% bounce rate
  • 24.06% exit rate on the lead form page
  • 4.71% total goal conversion rate
  • 0% total goal abandonment rate

Pageviews and average time on site were up. More importantly, we had reduced the lead form exit rate, almost doubled the conversion rate and reduced the form abandonment rate to zero.

Reflections

My first takeaway is the importance of direct access to user research. The surveys and videos were good first-hand sources of user research. In retrospect, we did not recognize them as such until much later in the process, instead leaning on the stakeholders’ knowledge of the target audience, which I believe backfired in the end.

My second takeaway is the importance of listening to and reading the client. We presented a solid rationale for redesigning the sales funnel process and using automation to do the heavy lifting of lead nurturing. However, this took the stakeholders too far outside of their comfort zone. Much like the methodology we recommended, the agency continues to provide helpful information on how lead nurturing converts visitors into customers, with the goal of resuming the Inbound strategy when the client is ready.

My third takeaway was to trust my gut when it comes to identifying key areas for improvement. If it feels like an opportunity is there, keep digging.