WhizBang! Retail Training

Custom learning management system for retail stores

Having outgrown the online service they used to deliver custom retail sales training to their clients, WhizBang! Retail Training decided that it was time to build a custom learning platform that could scale with them and provide a more delightful experience for their clients.

Services:
Planning & Strategy
User Experience
Design
Back-end Development
Front-end Development
Migration
Technologies:
React
GraphQL
Project Link:
One flower shop employee completing online training on a computer while the other trains on a tablet.

Project Expertise

Migrations & upgrades

To ensure a seamless upgrade, we migrated all content from the legacy system to the new platform. This included everything from video lesson content to user accounts and training data, allowing the new system to support their existing user base without disruption.

Modern web applications

The original RSA was stitched together using several out-of-the-box services, many of which fell short of WhizBang! Retail Training’s specific needs. The custom application we developed replaced this patchwork with a streamlined solution, eliminating unnecessary features and tailoring the platform precisely to their requirements.

Project Contributors

Mike head and shoulders, with blonde hair, beard, and black dress shirt

Mike Bopp

Senior Developer

Haley head and shoulders, with glasses, brown hair, black shirt with light denim overshirt

Haley Troyer

UX Designer

Project Brief

WhizBang! Retail Training was in need of a new learning management system (LMS) to replace the off-the-shelf service they had used for many years. Their goal was to build something that was easier to use, had a modern design that reflected their brand, and could scale with them as they continued to grow both subscribers and training content. Because this was such a large and complex project, we conduced an extensive project discovery phase to identify the core features that were essential in order to deliver a positive user experience. These features included:

  1. A highly-customized experience based around the user's role and subscription type
  2. A sophisticated course creator that allows not only administrators but also subscribers to create their own custom training materials.
  3. The ability for users to be assigned training, watch lessons, take quizzes, and earn certifications (and for managers to track their team's progress)
Old Retail Sales Academy dashboard
New Retail Sales Academy dashboard

The dashboard before and after the redesign. Our goal was to remove unused options and only present what was necessary to the user.

Discovery Phase

Because of the size and complexity of the project (with many different user types and third party service integrations), we started with a comprehensive discovery and strategic planning effort. The object of this discovery phase was to clearly define needed functionality from the legacy LMS, as well as new and re-envisioned features to enhance the user experience. We vetted the proposed technology stack, defined the target audience and identified each user's specific needs. Based on this information, we defined the minimum viable product, and then created wireframes for the app based on that scope.

Challenge

Representing many different user types

Solution

Creating user stories centered around each user type

Together with the client, we determined that the app had four unique user types. We created a user story for each, detailing the specific ways that the user would use the app and the features required to support the needs of each user type. These user stories were reviewed frequently throughout the design and development phases to ensure that our work was meaningful for our end users.

Challenge

Integrating needed third-party services and apps

Solution

Creating a diagram of services and integrations

This new application is mostly self-contained, but there are a few services it needs to interact with. Among these are a video streaming service (Wistia), the Ontraport CRM for customer profiles and context-sensitive messaging, plus email and SMS messaging services.
The API communicates with external services, including a CRM, email, SMS, and video hosting.

User stories

We created user stories for four unique user scenarios to ensure that our app satisfied the needs of each person using it:

Employee

Employee

Employees are the most basic user type. The employee's main goal is to watch training videos, complete quizzes, and earn certifications.

Manager

Manager

Managers oversee the training of individual employees. The manager's goals are to complete their own training and to ensure their employees are on track with theirs.

Owner

Owner

An owner is the economic buyer of the LMS. The owner's main concerns with the app is account management and billing. They may have several stores and store managers under their purview.

Admin

Admin

Admins are the app's administrators. The admin's main goal is to manage courses offered within the app, handle subscriptions, and resolve support requests submitted by the app's end users.

Technical Requirements

We knew we needed the basic building blocks of most applications: A database to persist data, a scalable back-end that can be adjusted to match usage, and a front-end that was flexible, modern, responsive, intuitive, and easy to use.

We chose to use Symfony as our framework for building the API for the back end. Symfony shares a lot in common with the Drupal CMS with which we are very familiar, but it allows us to focus development effort and server resources toward the only part we needed - the business logic to facilitate communication between the front-end and database.

On the front end, we chose to use the Next.js framework, built on the popular and familiar React.js infrastructure. Next.js provided the developer experience and tooling needed to build out a large site with a large hierarchy of pages, but also provided configurable server-side rendering, which would give us a lot of options when it comes to tuning the performance of the site.

Most training content is in the form of videos, so we needed a robust and reliable way to save and stream these videos on a variety of devices. We knew it would be most cost-effective to leverage a robust, proven service to handle this functionality. We evaluated many prominent providers and ultimately selected Wistia because of its customizable video playing experience. Customization is particularly important for this site as the videos needed to be interactive, prompting input from the user during playback that determined the content best suited to each user.

For sending email, we chose to use Sendgrid, which we have used on most of our projects. And for SMS delivery, we chose Twilio for its developer support and overall reputation in the industry.

The technology stack includes Symfony, GraphQL, React/Next.js, Twilio, SendGrid, Ontraport, and Wistia.

Wireframes

After settling on a desired technical stack and individual user stories, we created basic wireframes that helped visualize the way the app would flow from screen to screen within each specified scenario. These wireframes helped us communicate our ideas to the client without getting hung up on any visual design decisions. We worked with the client to tweak the wireframes to ensure that each user flow was streamlined and intuitive.

An email notification with a link to training that's due soon.
A lesson video with transcript.
Alert stating whether the selected quiz answer is correct or incorrect.
Quiz results screen stating whether the user has passed or failed the quiz.

We started by wireframing several key user flows, including completing a lesson and quiz.

Design Phase

After an extended discovery phase, we felt confident transitioning into the design phase. Knowing that all of the strategic and architectural decisions had been solidified, we were able to fully focus on the visual aesthetic without distraction. 

Challenge

Design needed to be upgraded while still matching the client's brand

Solution

Delivered three unique design concepts, followed by a review/iteration phase

In order to ensure our user interface matched the client's fun/quirky yet professional branding, we delivered three different concepts and allowed WhizBang! to weigh in on each concept's successes/failures. Using their feedback, we created one unified concept and revised it until the client was happy with the design.

Challenge

Large amount of screens to organize

Solution

Utilized shared styles and components whenever possible

In order to keep designs consistent around the large number of mockups, we created a library of type styles, color palettes, and reusable components that could be shared across all screens. This made it easy to update multiple screens at once if one element needed to be updated.

Challenge

Delivering a large number of mockups

Solution

Creating an interactive prototype using Invision

Rather than delivering static JPGs to the client to review, we created an interactive prototype using Invision. This brought our designs to life by allowing the client to click through from screen to screen as though it was a real application. This made the delivery process easy, keeping all screens in one place even while iterating the design.
Course banner with progress and resume training button
Course card
Chapter card with continue button
Progress tracker

We designed many components that could be reused throughout the app, from banners, to cards and charts.

Development Phase

By splitting the development of this project into two primary technologies, we could work on both in parallel with different team members focusing their attention to each. But in order for this to work well, we needed to establish the basics for how the front-end and back-end would communicate with one another. Assumptions would need to be made on both sides in order to limit the number of dependencies between the two.

Challenge

Efficient development of the API and user experience in parallel

Solution

Use GraphQL to define how the server and client would communicate

Popular "JAM Stack" frameworks like Next.js have been optimized for use with a GraphQL API, though REST architecture is also supported. We chose to leverage the GraphQL query language on this project for its ability to provide a customized 'graph' of data for each part of the front end, but could also establish a schema early on that both the front-end and back-end could base assumptions on. Adjustments are inevitable, but this initial graph specification was critical to developing the front-end and back-end in parallel. The Next.js front-end could use mock data in established graph schema, and development of the Symfony back-end could focus itself on building out real data in the form of that same established schema.

Challenge

Maintaining fast performance despite highly-customized experience

Solution

Using the Next.js Framework

The modern "JAM Stack" framework, Next.js, provides the ability for the developer to decide whether it is more efficient to fetch data on the server or client. The are tradeoffs to both, but having the flexibility to decide this for every part of the user experience made it possible for us to ensure the user interface was always responsive regardless of how much data was required from the API.

Challenge

An existing platform with thousands of paying users that need to be transitioned to new application

Solution

Develop a suite of migration utilities

Moving all users from an existing business-critical application to a new system requires a lot of care and thorough testing. If done poorly, the base of paying users could quickly dissolve, leaving a business with difficult decisions on how to win back users and fund future development.

We created a migration plan that paced the transfer of subscribers in definable batches from the old system rather than doing it all in one big process. This served two important purposes:

• During the development phase, we could focus on a representative subset of users to migrate and test rather than needing to transfer everything, every time.

• During the final account migration, we could coordinate a dedicated transition period with account owners to manage expectations. This allowed us to work out issues incrementally rather than introduce a stressful situation where the entire subscriber base needed assistance at once.
"Great people, great project. Fun, professional, smart, and creative, Rapid Development Group has consistently come up with innovative technical solutions to ensure the success of our complex platform. They have been very responsive to our requests and ideas. As we begin the phase 2 expansion of the Retail Training Academy, we are glad to have them on our team!"
Susan Negen Co-Founder, WhizBang! Retail Training