MoodHelper has been part of a mental health research study for many years and the application has taken many forms over this time. The curriculum behind the design of MoodHelper has been developed by top researchers at the Kaiser Permanente Center for Health Research. The purpose for this project was to refresh the design and functionality of the application. The MoodHelper web-application was created within an forms development stack and it was expected to do these enhancements within the original solution.

I worked closely with project management and application engineering stakeholders. As part of the web-design team, I created wireframes describing proposed layouts, use cases, and aesthetic strategies. Light, “guerilla” usability testing took place to answer some usability questions that surfaced throughout the design phase. Following the design phase, I built the proposed layouts and components via HTML5, SCSS (CSS3) and JavaScript/JQuery within the original solution.

Near the completion of my front-end development efforts I assisted an application engineer as he provided server-side functionality. MoodHelper is owned by Kaiser Permanente and is a private site designated for prescribed members to help reduce the time and cost of routine visits with their psychiatric providers. The video on this page provides a brief tour of the MoodHelper web-application.


  • User Research Report & Design Recommendations
  • Wireframes: High and Low Fidelity
  • Completed Web Application

Tools & Methods

  • Adobe InDesign CC
  • HTML5, SCSS/CSS3, JQuery/JavaScript
  • ASP.Net/Web Forms Development Stack
  • Telerik Tools
  • Bootstrap
  • Visual Studio