November 23, 2022

Case Study.

About the Client

The Brannen Group conducts world-wide executive coaching in multiple languages. Their coaches have expertise in leadership, management, cross-cultural management, general and cross-cultural communication addressing specific issues in organizational development, employee engagement, innovation, managing change, performance management, executive presence, presentation skills and much more.

Project Overview

To digitize The Brannen Group’s coaching materials into an online eLearning program as well as create new branding for the program.

Part 1 - Branding

With the eLearning program’s focus on global management, a primary challenge was to express a “global” feeling without falling into one of the many tropes of corporate branding such as globes, swashes, network nodes, G’s, and of course, arrows in all shapes and sizes. After much experimentation, we arrived at the current design of just the text “GlobalCoach” next to two multicolored double-quotes.

The quotation marks, when placed beside each other, can look like people conversing or speech bubbles. Building on this, we then added multiple colors to the quotation marks, which also had a flag-like appearance, to evoke various national flags. And all the while, of course, the quotes continue to express their normative meaning as a symbol of communication, which worked well with our focus on coaching.

The “GlobalCoach” text is typeset in Calibre by Klim Type Foundry, whose geometric forms offered a serious character in keeping with the corporate audience but also with a friendly and open feeling to suit the educational objective.

The simple red, blue, and orange color palette is used to give a sense of global diversity as well as ease and approachability (making use of the same psychology used in educational materials which also often use primary colors).

The same colors are used throughout the eLearning program with each color representing one of the 3 curriculums available in the program. Unique line art was also created for each of the 3 curriculums to further differentiate them and evoke physical book covers for an academic feeling in the program.

Click to view full size

For the main text, we chose the serif typeface Signifier by Klim Type Foundry. Signifier’s traditional but sharp forms allowed us to express an academic rigor in the program while not feeling antiquated. While secondary text and user interface elements are typeset in Source Sans Pro by Adobe for efficiency at small type sizes.

Part 2 - User Interface

The main challenge in the user interface was providing a sense of place or orientation within deeply nested and variegated data structures. For example, some lessons needed to link to interactive tools which also had multiple pages within them. It was paramount that the user recognize that they had opened a tool as distinct from the lesson, and could go back to the lesson by closing the tool no matter where they were or what they had done. And while each tool varied in its functions, they all needed to conform to a design pattern that could be recognized by the user as a “tool.”

This was accomplished by minimizing the page depth of tools where at all possible while adopting a specific color palette and interface style that was used only by such tools. While doing so, knowing what sort of data the underlying system could handle and what we could build was key to quickly developing practical design solutions.

Within each curriculum, the unique line art and colors are restated in various ways to give a sense of place.

The program required a number of written assessments to be digitized. While assessment results were formerly represented with line charts, we developed a new way to represent the results which was more intuitive and better able to handle multiple sets of data.

We also encountered some challenges in designing an interactive tool with which managers could assess their direct reports as well as have the direct report self-assess themself. The result of the assessment needed to be visualized for comparison but since the assessment contained 30 questions, the results needed to be summarized in some way for the comparison to be easily digestible. We solved this by organizing results into a couple of categories which could each have their score represented by star icons.

Part 3 - Systems Development

We built a prototype of the program, which contained a small subset of its features, using a PHP-based CMS. For the full feature set, however, we determined that we wanted to use a compiled language with type safety. To that end, we chose IHP, a Haskell-based web framework which offers Ruby on Rails-like rapid development but with the type safety of Haskell. IHP also includes SPA-like features such as near-instant page loads and DOM patching, which enabled us to develop a sophisticated program with just one language (Haskell) that was both quick to develop and and robust.

Within the eLearning program, we integrated credit card payments via Stripe as well as PDF generation for downloading reports and certificates of completion. Transactional email delivery was implemented using Postmark.

Thanks to our choice of Haskell and IHP to build GlobalCoach, we have encountered almost no runtime errors since the program launched in May. In addition, these technological choices have enabled us to continue to add new features for the program quickly and with minimal disruption to the end user.

Visit the GlobalCoach Website