Education Advanced featured imageEducation Advanced featured image

Education Advanced

Marketing site for my organization merging all of our EdTech products into a cohesive, consistent platform.

Visit Site

For the last four years I’ve been leading the efforts in developing a design system for my organization as our Lead UI/UX Developer. It’s been a very rewarding experience and helped us mature as an organization in a scalable way as we develop the next iteration of our two flagship products Cardonex and TestHound.


Organize & Conquer

When I first joined the team, we had separate marketing sites for each product, very different design vernacular between our products, and a small team—compounding the difficulties of updating and improving the next iterations of our applications. After spending several cycles producing mock-ups for both applications and pursuing separate but similar design systems it was decided we’d have a single marketing site for all our products and emphasize our products as being offerings of Education Advanced—not standalone products.

This decision had a surprising benefit: instead of having to differentiate each product in their own right, we could focus on making them feel like they were coming from the same place. This worked out very well for us because we primarily cross-sell our products in the same school districts.

Primary brand elements
TestHound product elements

Various UI elements highlighting our primary brand and individual product elements


Many Parts, Different Functions

While our products are actively being developed, the marketing site has become a great showcase for the design system. Similar to the UI of our applications, many smaller components are combined to create compositions that serve many different purposes across our marketing efforts. From grids of testimonials, to blog posts with dynamic calls to actions—they are all compiled with the smaller defined parts of our system.

Using a series of design tokens, brand color systems and product-specific typography, we are able to introduce many elements our users will eventually encounter in our products in a friendly and familiar way. The marketing site context has also helped us develop our brand guidelines for things outside of our application UI including product photography and more diverse color palettes.

Testimonial and blog elements
Why EAI elements + event info

Compositions highlighting different design tokens combined to be bring expression and function to various UI elements including Testimonials and various tiles used throughout the marketing site


Scalable Tools

As we’ve grown, our marketing site has changed from being a place to house information to a series of tools to help our organization work smarter. A good example is standalone profile pages where we reference upcoming events our team members will be at in addition to thought leadership articles they’ve written. Providing an automated way to aggregate information across the site into an easily referenced page they can share out to their social/sales channels.

To find information for different sales funnels our team can refer to our library, which references content we share throughout the site based on what sales funnel stage and target persona it has been tagged with. Creating a centralized location which eliminates the need to search through multiple pages of content entries has become an invaluable tool.

Because so much of our company information is housed in our CMS, creating a dynamic email signature tool was a breeze. Instead of relying on employees to find a headshot on their computer, we pull their photo, name and title from our CMS—and if they’ve provided a meeting link, we include that as well. All of the information matches the content on their profile pages, so consistent messaging between different channels has no friction.

Profile page elements
Email signature tool elements

Elements from individual profile pages for or our employees and a glimpse at the email signature tool developed to improve internal communication channels

Colophon

Colors

base base--ish base--mid base--semi base--light base--ghost highlight highlight--ish highlight--mid highlight--semi highlight--light highlight--ghost contrast contrast--extra

Typography

Tooling