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.
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.
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. I started to see a large amount of scope creep at this stage, so I emphasized focusing on higher use features and shipping a V1 solution to get customer feedback.
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
We leveraged an existing design system (Tailwind UI) 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.
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.
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.
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.
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 very recently, and we are currently collecting feedback from existing customers who are being upgraded to the new experience. The new version will be promoted to encourage other customers to upgrade.
This solution is being used to enter a new vertical: virtual events. The client is seeing enormous interest in the product from some of the biggest event organizers in the space.
With the foundation solidified, we will continue to get feedback and make updates, build new features, measure and iterate.