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 assessing ACEs
Responsibilities: Instructional design, icon illustration, storyboarding, scripting, visual and graphic design
Tools Used: Articulate Storyline 360, Adobe Illustrator
Vision & Execution
I created this interactive ACE Score calculator to help healthcare professionals practice assessing adverse childhood experiences in a realistic, low-risk environment. The tool guides users through three patient scenarios and dynamically calculates an ACE score using Storyline variables based on the selections made. This gives learners immediate feedback while reinforcing real-world scoring principles. I also incorporated text-to-speech narration and closed captions to support accessibility and 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 custom-designed all 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 header text, and Open Sans body text to create a clear, modern, and trauma-informed learner experience.
