ACE Score Calculator
I designed this ACE Score Calculator to give healthcare professionals a hands-on, trauma-informed way to practice identifying adverse childhood experiences across multiple patient scenarios. The calculator walks learners through each ACE category step-by-step to help them identify their score and understand the impact of early experiences.
Audience: Healthcare professionals seeking hands-on practice assessing adverse childhood experiences (ACEs)
Responsibilities: Instructional design, icon illustration, storyboarding, scripting, visual and graphic design
Tools Used: Articulate Storyline 360, Adobe Illustrator
Vision & Execution
The ACE Score calculator guides healthcare professionals through realistic, low-risk patient scenarios, dynamically calculating ACE scores using Storyline variables and providing immediate feedback. Text-to-speech narration and closed captions support diverse learning needs.
Visual Mockups
For the visual mockups, I developed a cohesive trauma-informed design system using a custom palette of deep green-blue hues, coral accents, and warm neutrals. I refined the palette with the support of ChatGPT to ensure strong contrast, emotional appropriateness, and accessibility across all interface states.
I designed ten ACE icons in Adobe Illustrator and embedded them into a vector-based calculator layout to keep the interface clean, scalable, and consistent. I also incorporated and customized Storyline’s illustrated characters, using a deep charcoal grey for the base details and a warm terracotta-orange highlight to add subtle emphasis and visual balance across the interface.
After importing the assets into Storyline, I built normal, hover, and selected states for each icon and button, aligning everything with the project’s visual system. The final UI combines soft teal gradients, coral-outlined icons, Montserrat Semibold header text, and Open Sans body text to create a clear, modern, and trauma-informed learner experience.
