lesson builder

DIGIN Lesson Builder

A Drag & Drop Teaching Tool For Educators

Web UX / SaaS / Teaching Tool

BACKGROUND
Group Publishing is committed to creating experiences that move people closer to Jesus. They have an amazing 40-year legacy of building world-class products for vacation Bible school, Sunday school, Bible studies, mission trips, and other resources for spiritual growth.

THE PROJECT
I lead the product owners and the development team to create a highly successful SaaS web application for children’s ministry directors.

THE SOLUTION
We developed an easy-to-use, drag-and-drop lesson builder that provided enough flexibility for teachers and volunteers to quickly build a lesson for their classrooms. Learning activities are already created. All a teacher needs to do is add the activity to the lesson, publish, then teach. It’s that simple. Each activity comes with clear instructions, a script, and a supply list for crafts. Teachers and volunteers love this product.

Lesson Builder

The lesson builder is simple. Once you’ve selected your class type and the program you are teaching within, you can build your lesson. Drag the activity from the left side and drop it in the lesson on the right. You’ll see the overall time increase for the lesson after each activity is added. Preview your lesson before publishing.

Activity Lesson Detail

To learn more about what an activity entails, just hover over the activity icon as shown in this image.

Mobile Process Screens

The steps to create your first lesson are easy:
1. Choose your program
2. Select the type of class you are teaching (e.g., group size and ages)
3. Build your lesson
4. Publish the lesson (send to your teachers)

Lesson Builder Mobile Responsive

Teaching from a printed piece of paper or a laptop is cumbersome. That’s why I created a mobile version of the web experience. Using the device’s controls makes it easier to navigate through each lesson while teaching.

With limited real estate on a mobile device, it was challenging to design how a teacher would add and remove activities to a lesson. I created a solution by showing only the activities on one screen. Think of a toggle between the lessons and the activities in the lesson and not in the lesson. Adding or removing an activity is as simple as tapping the add or remove button. Reorganizing activities is as easy as dragging and dropping the activity.

Visual Style Guide

Whiteboard Wireframe

I sketched the screens at a high-level and created user journeys during the discovery phase of the project.