Legal Compliance Self-Assessment Chatbot


Jan-Apr 2020


UI Designer, Front-end Developer, Animator


Courtney Clarkson, Ye Lan, Lena Atzaba,Sumaer Hussain, Anastasiya


Pacific Legal Education and Outreach Society(PLEO)


Build on an existing non-profit legal compliance self-assessment tool to increase engagement, retention, and provide “real-time” results.


Small non-profit organizations are chronically short on time and resources - which makes finding time to review legal compliance challenging. Due to the lack of accessible resources to view general compliance rules in one location, many of these organizations do not realize they are missing critical information. Without knowing their compliance blind spots, non-profit organizations could be putting themselves at risk.

Problem Statement

How might we empower non-profit organizations to understand basic legal compliance through an engaging and accessible web tool? The client provided a usability study conducted on the initial tool, which helped us identity the key issues:

Users agreed that this concept was valuable and validated the need for a compliance self- assessment. Users were confused by the legal jargon and complex terms. Users wanted access to results immediately. Users wanted to share the results with board members easily.


An engaging, web-based legal compliance self-assessment that empowers nonprofits to assess risk, address vulnerable areas, and easily share findings.



•Identify barriers for non-profits when finding legal information

•Identify the gaps in available information and common concerns

•Define the needs of non-profit directors when assessing legal compliance

•Understand how non-profit director’s currently access legal information

•Review examples of interactive forum UX and identify strengths/weaknesses

Empathy Map

After reviewing the findings from the first iteration, we conducted a series of interviews with non-profit users and subject matter experts. We organized our interview findings into an empathy map to help understand the needs of the user.

Design Sprint

We conducted a Design Sprint as a team to begin visualizing our solution. This process helped us align the full team with the project goals and start the project off on a creative note. The Design Sprint was an adapted version of exercises taught through the Design Sprint certification course by Time Factory.The team worked collaboratively to expand our idea generation and create a full sketched prototype, which provided the foundation for our first design iteration.

Question Flow Chart

We created question flowcharts for the module broken into submodules and wrote the copy for the questions, responses, and to-do list items based on the client’s content.

Prototype Iterations

There are several iterations of the chatbot page.


I tried two ways to do the animation. As a front-end developer, the first way I tried is to animate with Typescript SVG Animation. However, after finishing several parts and testing the effects, the development team agreed that using this method might not be flexible enough for our website because this method has a high demand for position adjustment. So I switched to another common-used way to export as a gif.

Technical Development

At a high level, the survey is modelled as a graph and held in a structured JSON file. The application loads the JSON file into typescript objects, each object representing a message or question in the survey and linked together as a graph data structure. At runtime, graphs are traversed dynamically, collecting a set of survey results, as the user answers the survey questions.

Final Design

User Flow

Final Presentation