Motrain Incentive Platform
A complete redesign of the admin experience for educators and managers
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.
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.
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
I began the project by conducting a UX audit on the existing product to review key concerns and functionality
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.
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.
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.
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.
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.
.png)
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.
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.
.png)
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.
Create a dedicated section for the Store, Store list of items, and constrain the focus to one screen for item creation and editing.
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.
Provide dedicated areas to manage Teams and Stores independently, and provide flexibility for multiple stores to be mapped to a team.
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
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.
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.
