Street Grace

UX Designer & Visual Designer ········· Rayne Schulman
Visual Designer ········· Christine Seungmin Roh
UX Designer ········· Ying Chen
UX Researcher ········· Fengyue Kiana Hu

Street Grace is a non-profit organization that enables law enforcement and other organizations to disrupt human and sex trafficking. They developed a language model program that allows survivors to write potential responses to criminals, but had no idea how to translate something so technical into a user-friendly platform.

Understand the code in the language model and design a user-firendly platform that allows members of survivor groups to be able to use the progeam developed by the Street Grace team.

Previous Designs.
Before our team picked up this project, there had already been an attempt from other designers to create the interface of the program. However, their designs were a direct translation of the code file and was still not user-friendly for the members of the survivor groups, who did not have technical backgrounds. 

User Flow &
Before we could even start designing, we had to understand the coding files that our designs would be based on. This alone took our team over a month. None of us have any coding background, and even engineers brought in were having a hard time understanding the logic. In the end, we mapped out how the program worked and reworked the language to be more user-friendly and understandable. 

Direct Code Flow

User-Friendly Flow

Lo & Mid-Fi
After understanding the source material, we started on the ideation process. Because we had a very specific user group in mind, we wanted to make sure that the program would be right for them. We decided that the best way to visualize writing responses for a chat bot would be to make the interface similar to a chat. 

Hi-Fi Wireframes.
For the Hi-Fi designs we opted to use the lightest blue shades from the Street Grace brand guide to keep a calming and soothing tone for users who are dealing with heavy subject matter.

Final Prototype.