Gategroup

Gategroup, which delivers training to students 39,000 ft. in the air, needed to improve the effectiveness of its courses.

Gategroup product design and design system development

Project Goals

To streamline and improve the quality of courses provided by Gate Retail Onboard (GRO), a member of Gategroup. GRO had been conducting onsite training for its employees, but this proved to be a costly and inefficient endeavor. To help, my team and I set out to create an effective, easily accessible mobile learning environment.

56

Courses

12087

Learners

24

Airlines

Project Strategy

By utilizing our in-house LMS (learning management system), my team and I would design a mobile learning environment with courseware that could hook into our API. We also needed to build an LRS (learner record store) that was SCORM compliant and could surface learner results to a dashboard that would track the progress and effectiveness of the training.

Strategy

Business Workshop
Brand Partnership
Technical Architecture

Experience

Journey Maps
Empathy Maps
Proto-personas
Task Analysis

Design

Style Guide
Mobile Courseware
Desktop LMS

“I have great relationships with the learners, but I need a way to teach and inspire them that doesn’t require me to physically be there.”
Baden Frosen
A remark that made me realize this product needed a soul.
quote

Data
Collection

Baden Frösén, my client at Gategroup, had just one week with my team in Orlando — so we needed to maximize our time with him. All the project leads came together prior to his arrival to discuss the aspects of the project we needed clarity on. We created a five-day agenda that allowed each of us to focus on specific aspects of the project. The design team was focused on collecting logos, guidelines, photos, fonts, and illustrations from the Gategroup brand team. We also collected user demographics and analytics from the BI team. On the last day we set KPIs and made sure everyone was aligned on the business needs and limitations.


User
Research

Fortunately, we had a lot of great data about the learners based on employee documents and survey data from the in-person courses. We synthesized this data into proto-personas and validated them through learner interviews. Once we felt confident in the findings, we created four empathy maps to reference when developing journey maps and ideating on the interface.

Technical
Structure

Understanding the technical structure was important for us. This information would help us better understand the business rules around SCORM compliance as well as understand the data points we could surface through xAPI. We used this information as reference when creating journey maps and sketching UIs.

Gategroup
Branding

Gategroup had a mature brand guide that was great for branding, print, and course assets, but they had nothing for UI and digital guidelines. Our first step was to work with their brand team and extend the brand guide to an interface style guide. Below are some of the assets we used as a foundation for the UI style guide.

Brandmark
Wordmark
Brandmark

Brand Colors

Color
Grading

We started with expanding the color ranges using the step blend option in Illustrator. We set a high and low tint, then step blended the colors to get a balanced set of light and dark options to choose from. We presented multiple options and landed on the options below.

*The large circles became color tokens in the design system and the ones with black circles around them are original colors from the brand guide.

New Colors

Gradients

Utility Colors

Typography
Choices

We knew the product would exist as a web app and as a native app on Android and iOS products. Apple products use the font San Francisco and Android uses Roboto. Both fonts are neoclassical, so we wanted something similar for the web. We landed on Univers, a neoclassical font with over 20 weights that was adaptable to all our needs.


Mapping the
Typography

After deciding on our font stack, we started mapping them to our components. We created 12 type variables and mapped the styles to the different devices and breakpoints we supported. We defined type sizes, line heights, and kerning for each variable in each device. Then, we created tokens to apply to our components.

*Above is an example of the type styles for iPhone 8 Plus.

Atoms &
Molecules

While focused on our research we also started work on the design system. We took an atomic approach by building up a set of atoms and molecules that would serve as a foundation on which to build our components and templates. While looking at our data structure we could set rules around how to visualize information contextually, with device awareness in mind.

Input Fields
Input filled Input filled
Input active

Input field active

Input Error

Input field Error

Input Success Input field Success
CTAs
Primary CTA

Primary CTA

Video CTA

Video CTA

Secondary CTA

Secondary CTA with icon

Icon CTA

Icon CTA

*This is a subset of atoms and molecules from the design system.

Sketching
the Courseware

As we conducted our research we also started conceptualizing feature flows and the overall design. We began with the learner app experience and worked back to the course development tools. Features were tested at every step of the design process, from sketching with learners to conducting full interactive task-based analysis.


User
Flows

As our hypotheses were being proven through user testing, we starting looking at the design on a macro level. We developed user flows for how a learner would move through the product feature by feature. This helped us define contextual animations and opportunities for delight.


Injecting
Personality

Beyond adding delight, illustrations help visual learners retain information. We knew we needed something fun and bright that we could build at scale. There would be a lot of spot illustrations needed in the courses and we would need non-artistic designers to help generate them. We created a simple framework of basic rules and colors as well as Pinterest boards for inspiration. After some quick training, the designers sat with content creators to devise illustrations that paired well with the course content. All illustrations passed through me for art direction and consistency.

*Here are a few I created to define the direction.

Engaging
With Content

The learner dashboard was designed to be purposeful and actionable. Because the app is an educational tool, we needed to make sure learners clearly understand how to find new courses and start taking them within moments of opening the app.

Engaging With Content

Data
Collection

Data is an important and complex tool that drives learner engagement, and it is accessible and contextual throughout the app. It is used to answer questions for the learner and provide feedback for course creators.

Data Collection

Flash
Cards

Course creators broke content down into smaller, digestible bites that were paired with illustrations. This format keeps the user concentrated on the lesson and reduces fluff in the content. Learners receive a max of 10 cards and are then tested on their ability to retain the information. If a flash card has a piece of info the learner feels is important, they can save the card to their profile.

Flash Cards

Thought-Provoking
Challenges

Challenges were painstakingly designed. We wanted to create interesting, attention-grabbing interactions that were easy for learners to use. In the challenges, feedback is withheld until learners complete all challenges; this prevents them from getting discouraged if they are struggling. Animation is used to give the learner a clear understanding of the fast-paced transitions between course content and challenges throughout the lesson.

Thought-Provoking Challenges

The Learner
Management Tool

Since Baden wouldn’t be training on location, he needed a tool that allowing him to create content and track its effectiveness remotely. Below is the scheduling view that displays when a course is released, what its window for completion is, how many learners have completed the course, and how well they are doing.

A Snapshot of
Courses in Flight

The dashboard is used to get a high-level view of courses learners are taking and see how well they are doing. The course director can get feedback on the course from the learners and reach out to them if they are struggling. This allows the courses to retain that hands-on feel at scale.

View of the course management tool

Course
Creation

Course creation is a critical part of the system. We created a drag-and-drop interface allowing course creators to outline the course into chapters. Each chapter has a lesson consisting of flash cards and an interactive challenge section. Challenge types can be mixed and matched and routed to allow for SCORM compliance and to prevent learners from memorizing answers.

View of the course creation tool

Editing
Modules

Working with challenge modules can quickly become complex. We decided to allow course creators to lay out and route the challenge flow in the main area of the view that we called the grid. When the edit icon is pressed, a drawer opens in the right side of the view where categories, questions, and possible answers can be added.

Editing a course from the dashboard

Learners
in Focus

After speaking with Baden and the students, we knew the personal aspect of the training was important to everyone — so creating a remote system was a concern for us. However, by using data and rich learner profiles, we were able to give Baden and course creators the ability to be alerted when a learner is struggling or excelling so they can reach out and offer help or praise. This serves to keep learners engaged and gives them the sense that the training matters and someone cares about their progress.

Learner card on the management tool

Final
Thoughts

In retrospect, I’m very proud of the work we did for Gategroup. I think spending time talking with the learners and ensuring we were creating something useful for them was critical to our success. I also think that sketching, prototyping, and testing the platform’s many complex interactions allowed us to take something that could have been daunting and instead make it simple and intuitive.