Biochemistry Learning Management System
Six Red Marbles
Team
Project Manager
Senior UX Designer
Learning Strategist
Developers
MacMillan’s Author and Editorial Team
Problem
Create an intuitive learning management system which facilitates the complex biochemistry subject matter, incorporate instructional design, and meet Macmillan’s pedagogical objectives.
Solution
Provided eight storyline-compatible templates with functionalities to facilitate the dynamic biochemistry subject matter. I worked closely with developers to assure all templates were storyline-compatible. The intuitive design facilitated the complex coursework and aligned with the user needs, Macmillan’s objectives and met accessibility standards.
How I contributed
• Built low to high fidelity wireframes which facilitated a quantitative formula function for an interactive user experience.
• Consulted with Tech for All to evaluate prototypes for users requiring accessibility tools.
• Led multi-disciplinary team meetings with client and stakeholders adhering to feasibility restrictions and Macmillan’s pedagogical objectives.
• Wrote the user testing script, coordinated and scheduled user testing sessions to gain insights for actionable improvements.
• Created a high-level plan for template screens functionality, feedback behavior, and content the template will cover.
Design Process
By reviewing examples and additional content, I identified the functionality and accessibility requirements needed for the specific types of simulations required. Early in the design process, I considered branding/style guidelines to determine the organizational components and design elements needed for the templates.
We determined the high-level plan for template screens functionality, feedback behavior, and the content that the template will cover. Cohesively, the templates function as a unit to cover provided content and user needs.
Prototyping and User Testing
I consulted with the Storyline Developer to keep designs aligned with storyline capabilities and constraints and planned functions were within scope. Mid-fidelity wireframes displayed screen states with the color palettes, header styles and other typographic hierarchy guidelines, table styling, and photo treatments from the style guide in Adobe XD.
Mock-ups were then uploaded to Zeplin to provide pixel-perfect references and developer instructions for accurate, consistent hi-fi builds in Storyline.
I spearheaded the user testing process from start to finish. Including researching and writing the script and coordinated the scheduling of user testing sessions. I created user paths with the high-fidelity mock-ups allowing user testers to work through the mock-up, simulating a user journey through the design.
We collated the user testing data and delivered a detailed report, which summed up findings with recommended next steps for making final design and functionality adjustments.
Results
The deliverables were eight storyline-compatible templates with functionalities to facilitate the dynamic biochemistry subject matter. I worked closely with developers to assure all templates were storyline-compatible. The intuitive design facilitated the complex coursework and aligned with the user needs, Macmillan’s objectives and met accessibility standards.
Below are samples of the features included on the templates to improve user experience.
1. Summary screen
The purpose of the Summary button was to aid in students who wanted a quick overview of the lesson to review.
2. Help option
Each lesson has a help screen which the instructor can customize accordingly to aid in the content and/or directions
The content demanded different screen functions to clearly demonstrate each lesson. This shows a multi step process housed within one screen. The user can navigate through the steps by selecting the nodes and use the global navigation at the bottom of the screen.
Many of the assignments were text heavy. We found one of the most effective ways was to utilize a tabbed format which users can simply select the tabs at the top or the arrows on the left and right sides of the tabs. This way the user can toggle back and forth between content easily.