Relias Learning Application UI/UX Design
Relias Learning provides online training to organizations in health care, public safety, and insurance; helping them meet critical compliance needs, while reducing employee turnover and increasing quality of service. Relias Learning asked Axis41 to overhaul their online desktop application in order to expand features in response to growing needs in their industry.
My Role: Lead UX Designer
1) Working Session
We started with a two-day on-site working session with Relias stakeholders and subject matter experts (SMEs). Through this process, five user types were uncovered, along with 40+ possible tasks to be supported by the new application design.
2) User Paths
Tasks were broken down into detailed user paths, which allowed us to estimate the number of screens needing to be designed. Shown below are three pages from the 14-page document.
3) Designs & Prototypes
Screens were organized by user paths and assigned to sprints, moving from low-fidelity wireframes, to high-fidelity designs, and finally to development. All designs were reviewed and approved by several stakeholders and SMEs, ensuring business objectives and user needs were met.
Learner user paths fell into these main categories: manage personal account, take assigned courses, and take elective courses. Below are two of the many screens supporting these tasks.
Supervisor user paths fell into these main categories: user management, enrollment, curriculum completion approval, and reporting. Below are a few of the many screens supporting these tasks.
Administrator user paths fell into these main categories: initial system setup, creation and management of courses, and creation and management of curricula. Below are a few of the many screens supporting these tasks.
Beyond complex administrative and e-learning functionality, an important new feature we designed into the interface was customization. It was important for organizations adopting the Relias Learning system to present learning programs to their employees in a way that felt unanimous with their company brand. This was accomplished through a customization feature that allows organizations to insert their logo into the header of the application, and allows them to apply custom colors to certain elements of the interface. In order to preserve usability, elements tied to core interactivity and functionality of the application, such a buttons and form fields, could not be customized. However, these elements were designed using neutral colors so that other customizable elements could accept a wide range of color pallets without clashing with more neutral foundational elements.
Throughout the design process, iconography was developed and refined, leading to a custom set of icons with consistent styling and meaning.