Legal Compliance Self-Assessment Chatbot


Timeline

Jan-Apr 2020

Role

UI Designer, Front-end Developer, Animator

Teammates

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

Client

Pacific Legal Education and Outreach Society(PLEO)



Brief


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


Background


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.


Solution


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



Research


Goals

•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.





Animations


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