e-learning

DESIGN &
DEVELOPMENT
OF ONLINE PROGRAM

Client

Yonder is a corporate spin-off of Tecnowise Group and has been developing technological solutions for education and traffic safety for over three decades. Their mission is to reimagine education to save lives and transform technology into engaging experiences. In this project, we worked together to offer an incredible learning journey for 99, one of the biggest ridesharing apps in Brazil.

Objective

Create engaging learning activities and compelling course content to raise awareness of safe driving. Design a consistent user interface across all instructional materials aligned with the company’s visual identity.

Target Audience

Rideshare drivers who are independent contractors, have flexible worked-hours, want to provide a more casual and social experience for their riders, and know how to use mobile apps and websites.

UI Design and Branding

We created a Visual Identity Manual to maintain visual communication consistent across all materials. The manual was validated and revised through an iterative process to guarantee accurate alignment between the program and the company’s visual ID.

See below selected pages from the Visual ID Manual:

The Dos and Don’ts for iconography selection.
Single-line icons with one element in yellow (brand color pallete).
The Dos and Don’ts for designing characters (warm versus cold colors).

Instructional materials

The program is 100% online with self-paced modules and activities. We developed a package of instructional contents composed of the following media: interactive content, video cases, illustrations, icons, infographics, take away videos, and e-books.

Interactive content

We used Younder Learning Management System to host the program. The platform provides templates ready-to-use and high responsiveness across different devices (click here to see the design of the LMS). The interactive content includes carousel for cycling through a series of contents, hoverable dropdown-content, among others interaction features.

See below layouts for lesson opening page, learning objectives and carousel content:

Video case

Due to time and budget constraint to shoot movies, we used parallex techniques to give movements to static pictures. We also applied motion graphics to give a sense of humor to the videos. Learners start each lesson by watching a storytelling video that presents a common situation in the traffic in Brazil. Throughout the lesson, learners are encouraged to reflect on the story.

Illustrations and icons

99 has a colorful brand guide composed of vibrant warm colors to promote movement, enthusiasm, and humor. We used their color pallets to represent the positive attitudes and connect the company’s essence with the ideal driving behavior. In contrast, we used grayscale background to represent the negative attitudes and also to dissociate the brand from negatives behaviors.

Infographics

We created various infographics to present statistical data about traffic safety in Brazil. The goal is to promote a safer driving behavior and show the negative impact of distracted and aggressive driving.

Sample of infographic about high-risk driving attitudes.

Take away video

The program is composed of four modules and each module includes 3 or 4 lessons. At the end of each module, learners can access a take away video that features the key information presented in the lessons. We used motion graphics to compose each video.

E-books

We wanted to offer the most accessible course to our end-users. Thus, in addition to the online materials, we developed e-books, which can be downloaded and used offline. The e-books included all contents from each of the five modules.

How does your instruction look like?
I help people offer incredible learning experiences with engaging instructional materials. I would love to create the Visual Identity, learning strategies, and instructional multimedia materials for your organization.