Translator, a diversity & inclusion SaaS startup, needed the initial dashboard and session builder concept screens for their flagship training software to be translated into development-ready mocks.
I was thrilled to be contacted by Translator’s founder and work on a product whose mission I’m passionate about. Their online platform aims to change the learning experience for diversity & inclusion training. With it, training companies could use it as a CMS to create and deliver customized training programs, manage clients, and engage with trainees through Slack integration to provide safe, private support.
The initial build comprised of three components:
Core system for the Translator team to manage D&I (diversity & inclusion) training companies, who would use the software to administer training sessions.
Client system for training companies to manage their clients, the companies whose employees would be receiving the training.
Sessions Manager, a part of the client system where training companies could create, edit, and view data for tailored training programs developed for their clients.
The original mocks needed to be adapted from PowerPoint presentations to desktop-friendly screens for the initial build, after being sold to a client for Translator’s inaugural training session. I needed to stay close to the original designs since they’d been approved by the developer.
In order to minimize the amount of technical debt given the small team and timeframe for building the product, I compiled user flows based on the static mocks. I wanted to find commonalities across different areas of the product to map out similarities by function and layout, so those could be developed into reusable templates.
From 56 static mocks, I narrowed down the general structure into six main templates:
Home, the landing page for logging in and returning to the main dashboard view;
Forms, for entering and managing user information;
Records, for viewing user and session information;
Session Builder, a drag and drop interface for building & editing training sessions;
Live Session, for the client-side view of administering sessions and collecting live information from users via a companion app and Slack channels.
I also added Confirmation screens. These weren’t included in initial mocks, but were added to communicate to users their actions had been completed.
The UI needed to stay similar to the existing designs, but I made minor changes to enhance clarity and usability while translating them to the correct screen dimensions.
Grouped information. I grouped information around the user/logging out together, providing a clear distinction between account management and CRM actions.
Clarified actions. Before, the links for adding a new client and admin in the side menu looked like toggles to expand for more options. I revised this to include clarifying language.
Made clickable items clear. Changed the styling of record names to indicate they could be clicked into for more information.
Remove unnecessary information. Since users could search by name, title, and CSR, they did not need a record number that held no significance or meaning to them.
Lighter contrast UI + scannability. To reduce visual fatigue, I changed the green card background to white and used a light grey background for the site body. I also revised the layout to a one-column format for greater scannability, with section headings outside of the form fields.
Progress disclosure. Users are informed what their next steps will be with clearer, clickable links and allowed to go back a step without cancelling the process.
Clear active state. Revised the design for a clearer active state when modules are being edited.
Editable fields. Previously, the fields didn’t appear editable, which was needed so clients could tailor sessions to specific teams and companies. This is made clearer through text boxes and input options.
Increased space to work. The revised sidebar collapses to leave more space for trainers to work within the Session Builder.
Ideally, before producing designs, I would have wanted to conduct user research with D&I training coaches to determine their needs and pain points, to understand what information they valued and what parts of the process of managing clients and administering training had the most friction.
Additionally, the scope did not account for user testing, which we would have wanted to incorporate before moving into the development phase. The Sessions builder especially could use greater exploration, given research data and time.
I also would have loved to work more closely with the development team, which is planned for our second version.
Delivered to the development team to build version one, and currently planning research and testing for the second iteration.