top of page

Creating a Strategic Design System for a Content-Heavy Website

OVERVIEW

 

Opportunity

Connections Academy is a tuition-free, online public school that offers individualized learning programs and is a virtual alternative to homeschooling. They had recently went through a brand refresh. They came to us wanting a website redesign to align with their new branding. The redesign solution for their national site also needed to roll out to each of their school-level websites.

 

Challenge

The Connections Academy website focused on providing families with program information. How might the website lead to an increase in the number of applicants who actually start the enrollment process?

MY ROLE

​

Created / Owned

  • Client relationship (regarding UX) 

  • Created persona content

  • Set KPIs

  • Hired freelance content strategist

  • Mapped the old content to the new hierarchy

  • Performed interface inventory

  • Established the design system structure

  • Planned the design sprints

  • Wireframed the design system

  • Vetted and hired usability testing vendor

  • Wrote detailed usability test plan & moderator guide

​

Managed the Creation 

  • Stakeholder interview questions 

  • Competitive review

  • Persona visual design

  • Content audit

  • Site map

  • Usability test results

​

Collaborative Team Effort

  • Conducted stakeholder interviews

  • Creation of strategy deck

  • Hiring freelance copywriter

  • Copywriting

  • UX and visual design reviews

  • Copy and design for usability testing

  • Usability testing summary report

​

RESEARCH DRIVEN INSIGHTS AND SOLUTIONS

​

Our team started the project by performing research regarding our client, its competitors, the industry, and their users. From this, we developed insights and then planned, designed, and executed our solution.

​

Main Insight

The more a family engaged with Connections Academy, the more likely it was that they would enroll with the program. A family who engaged with the Connections Academy brand on three occasions (online or at an event) was two times more likely to complete enrollment than a family who interacted with the brand only once before beginning the enrollment process. To generate successful enrollments, the website needed to encourage families to interact with their content. The emphasis needed to shift from pushing enrollment towards providing the right information and opportunities to engage with the brand before enrolling.

​

Solution

For a quick and cohesive roll-out and redesign of 300+ pages on their main website, plus 31 school websites, we determined that a design system would be the best approach.

​

To make sure the site’s information was of value to prospective families, I hired and managed a content strategist to audit all of the existing content to minimize repetition, discard stale content, and to identify any additional content needs. I performed an interface inventory to better understand the current design and features. That, combined with the content audit, provided the foundation of which page layouts, modules, and elements we would need.

​

With that established, I started wireframing. In order to encourage families to further interact with the program and brand, the main actions a visitor could take (i.e. contacting a parent or teacher, finding a local event) were turned into modules that could be placed on any relevant page. The visual design team took this a step further and gave the modules visual prominence. 

​

Next, I hired a vendor to perform usability testing. I worked closely with that team, providing them with the screener and moderator guide. After several days of testing, our team spent a couple more weeks tweaking the designs and copy. Then it was ready for development. 

OUTCOME

​

The flexible modular design system we created allowed the marketing teams to easily perform A/B testing to find the most successful and relevant placement for content. 

 

It also gave Connections Academy the ability to quickly create tailored local sites for all the schools in their program. And, by creating a scalable design system, the client had a consistent design library to use across their digital ecosystem.

​

* There are no hard analytics to measure the post-launch performance due to the fact that our main client contact, Heather, left Connections Academy several weeks after launch and her successor would not disclose any analytics to us.

“We’ve worked with Elevate on many successful projects, but this was by far the largest and most complex. The team is truly an extension of our in house group taking the time to thoroughly understand the business drivers and researching the consumer needs to set the project up for success. The site is proving to be very successful in the heart of our busiest season.”

Heather, Senior Director 

Web and Direct Marketing at Connections Education

Below are screenshots of some work created for this project.
Feel free to click on an image to view it in detail.

bottom of page