Motrain Gamification Platform

A complete redesign of the admin experience for educators and managers
Screen of an Item detail page with information about an item in the store
Web application redesign

Admin Dashboard

Motrain is a robust B2B learning platform that enables organizations to deliver gamified content to learners to create more engagement. Traditionally designed to integrate with learning management systems, the platform was starting to see interest in different verticals for different business needs.

Jump to prototypes
Store listing screen showing items in the store

Goals

This project was a redesign intended to address several issues impacting the scalability and traction of the product. The main goals were to clean up and improve key workflows, create a credible and trustworthy product experience, and design a scalable foundation for future development and growth.

Current pain points

The client (Jeff) is a user and in direct contact with customers, so he came to me with a list of frustrations with the current design

  • Dashboard menu is cluttered and difficult to navigate
  • Admins have to monitor that they are in the correct account constantly due to the design for account selection
  • Managing stores and store items isn't flexible and a store item can only be added to a single store
  • Feature development is blocked due to the design
Role Product Designer
Date 2022
My contribution
Discovery, Job Stories, Product Requirements, Information Architecture, Wireframes, Prototypes, Usability Testing
Team
Developer, Stakeholder/CEO

Approach

Heuristic review

I began the project by conducting a UX audit on the existing product to review key concerns and functionality

  • Lack of hierarchy and way-finding creates unclear orientation for the user
  • Menu labels create ambiguity and repeat terms (e.g. Sections, Users and Dashboard Users)
  • Design doesn't follow design conventions (e.g. editing items in list view), which creates learnability issues
  • UI is noisy and cluttered which adds cognitive load

Design Principles

After conducting a UX audit on the existing product, I spent some time thinking about design principles for the design vision to help inform design decisions.

Efficient - Flexible - Focused

Job stories and requirements

Jeff is an educator by profession who works with his customers directly, so we worked together to write job stories and product requirements. First, we defined different permission levels for the product to determine what kinds of functionality each of these users would need. From there, we wrote specific job stories and requirements.

Sticky notes showing examples of Job Stories

Information architecture

The core function of Motrain is creating stores of items for learners to shop at and purchase items with the currency they earned throughout a course.

In the previous state, One Section (renamed to Team) maps to one Store. To grant multiple teams access to an individual Store, the admin would have to make duplicates of the Store for each Team to access, which is tedious to maintain.

A mapping diagram showing one team mapped to one storeA diagram showing mapping from two teams to three different stores

I introduced the concept of decoupling the 1:1 mapping of Stores and Teams and mapping 1:many, to provide more flexibility and scalability. This solution unlocked key backend limitations that were causing challenges for feature development.

I also implemented a more structured and deeper information architecture to create a clearer distinction between category names, since the shallow IA and repetitive category names increased cognitive effort to navigate the UI.

Sitemap showing the structure of the new information architecture

Ideation

When I started to think about the design, I imagined a right-hand drawer to help bring up contextual actions for key screens, where a user could quickly make edits while staying in the main table view. However, once I started to understand the depth of the information and tasks for this panel, I realized that dedicated pages with tabs to navigate across a category would be more suitable. 

Photos of sketches showing exploration I made to imagine table views and side panel views

Systems approach for multiple use types

I took a systems approach to the design patterns and created a consistent hierarchy and flow across the category sections. From there, we designed and iterated based on the original job stories and as more requirements started to come up.

Since there was a desire to have the product work well for both small and large accounts, I grounded design discussions around common use cases for focus.

A series of screens showing different pages in wireframes

User testing

We ran usability tests with three customers with the tasks of creating a team, creating a new store, adding an item, and connecting the store to the team

Customer feedback
  • Customers found the flow intuitive to create a team and connect it to a store
  • They  liked the store item list page as it was much cleaner and easier to see all of the listed items
  • One customer suggested that creating a store from the team area should automatically link to the store to the team, which is is valuable feedback, however it would be difficult to implement due to technical constraints

Hi-fidelity design

We leveraged an existing design system to speed up our design and development efforts. I chose a grayscale palette to be as flexible as possible for white-labelling and integrating with other platforms. From there, I added custom components where needed for the Figma component library.

Key flows

Account selection

For admins who access and manage several (sometimes hundreds) accounts, selecting the correct account from the account dropdown is challenging and leads to errors on the wrong account.

Solution

Introduce an account selection step on login, with the ability to quickly filter through long lists of accounts to select the correct account. For users with a single account, they are taken directly into the dashboard of the account they have access to.

After
Before
Previous old shift modals showing 3 steps Account selection flow
Store and Item management

Adding items and viewing the list of items happen on one screen, with form inputs at the top, and the list of items below. There's a lack of visibility into the system status when an item is added or duplicated. The form expands to the full width of the viewport, creating weak affordances for inputs.

Solution

Create a dedicated section for the Store, Store list of items, and constrain the focus to one screen for item creation and editing.

After
Before
Store item creation flow
Team and Store management

Admins creating a Section (called Team in the new version) connect to one store, with Users (Players) assigned to that section. Similar to the account selection, it's very easy to make changes on the wrong Section due to the lack of hierarchy and poor visibility of the store selection dropdown.

Solution

Provide dedicated areas to manage Teams and Stores independently, and provide flexibility for multiple stores to be mapped to a team.

After
Before
Old screenshot showing the dropdown for selecting stores Animated flow showing how to add stores to a team

Handoff and review

Once the designs were approved, I organized all the Figma files and wrote documentation for the engineer. I included several comprehensive Loom videos speaking to design and product rationale to front-load answers to questions he might have.

Quote from developer saying great handoff
Motrain dashboard screens showing interface and components

Outcome

This project shipped recently and has received a lot of positive feedback from customers who've been upgraded to the new experience.

This solution is being used in new vertical: virtual events. The client is seeing enormous interest in the product from some of the biggest event organizers in the space and is closing new deals.