Samuel Cho Design
Designer, BDes. // UI/UX, Motion, Print
Thumb.png

BrainStation.io

BrainStation.io (2023)

 About The BrainStation Marketing Site

The marketing site is the primary entry point to the BrainStation ecosystem for many people.Everything about the site serves to funnel people into the sales pipeline (starting with a live call with a learning advisor).

  • Pages are also optimized to score high on search engines for keywords relating to coding bootcamps.

  • Events cast a wide net, trying to draw in people who may be interested in taking a course, and requires contact info to attend

  • Course packages contain much more details than the web page, but are gated behind a free account

  • Campus pages show the state-of-the-art nature of BrainStation facilities

  • Student testimonials and partner logos are peppered everywhere to create social proof and authoritative endorsement accordingly

I inherited the design system as BrainStation’s first dedicated designer. Prior to that, designers were pulled from Konrad whenever BrainStation needed something designed. This meant there wasn’t a singular vision for everyone to follow aside from a few loose guidelines (e.g. brand colours, logo). The extent of what I was asked to do for the site was simply generating some new sections of content for the existing pages. I also opted to push the design language a bit. I wanted to add a little interest to the new designs, but also still have it fit with the older pages (we were not doing a complete site overhaul, just changing things 1 section at a time).

 

Select Designs

The strategy was to create interchangeable blocks of content that stack on top of each other to build up complete pages. Nothing new, but over time the idea was to build up a library of these components that could be adapted to different types of content and different pages. The end goal was to avoid pulling a designer each time a new page was needed, the “content people” could (and would be encouraged) to try to utilize the library of components as much as possible, only requesting bespoke designs if absolutely necessary.

 

Carousels

This carousel is used on bootcamp pages to show examples of “real world” experiences students will work on with real clients.

This carousel displays the various campuses available.

A compact way to display and group multiple related items. It was originally made for industry partner projects on bootcamp pages, and then adapted for the campuses on the home page. Note the angled dividers; it was devised early on to create slightly more dynamic layouts and the design language is carried forward to today.

 

Location Information Card

A component with a campus description, address, and map preview (not interactive). It also has a montage video showcasing the classroom experience and neighbourhood for each campus. Think of it as a miniature version of the campus details page.

 

Curriculum Unit

Blocks with an overview of the unit, learned skills, and tools used accompanied by a visual (usually a custom animation). The information-dense nature of the components meant that it was very difficult to visually separate the individual units, so I had them alternate between dark and light to clearly mark the end of one unit and the start of another.

 

Testimonials/Social Proof

Social proof is a key part of BrainStation’s marketing strategy so we made sure to insert appropriate testimonials wherever we could. The formula of quote, name, role, logo, picture could be adapted to student (peer) or instructor (authoritative) testimonials.

 

Call-To-Actions

These components hook users in with the program package to create a touch point between them and the learning advisors. Metrics showed that live, 1-to-1 calls with learning advisors generated more sales and the quality of students entering the programs were much higher (people committed to actively participating in classes, beginning to end). Getting contact information is so important that we have these forms on the top, middle, and end of every bootcamp/course page.

 

Retrospective

Overall, this was a straightforward design process. A new business goal would come from above, and I would work with the product manager to determine how to achieve that on the site. I think there was a solid attempt to streamline the page creation process with the library of components. But often the content was subtly different or we needed to differentiate the component and most of the site ended up being bespoke anyways.

 

Example Page