Maison-Autelier: A Fashionably Discreet Domestic Violence Prevention Web App

Hackers: Alex Wu, Chirasree Mandal, Jake Fletcher, Jennifer Huang - UC Berkeley ’22

Github Repository Youtube Demo

Introduction:

  • Domestic Violence is a pressing issue in the United States, affecting people of all genders, races, classes, and sexual orientations.

    On average, nearly 20 people per minute are physically abused by an intimate partner in the United States. During one year, this equates to more than 10 million women and men. source

    • Survivors of domestic violence experience lasting physical and emotional violence, lasting economic damages, and often lose their sense of security for themselves and their loved ones.
    • Many resources like hotlines, search engines, and websites, and apps exist to help people who are being experiencing domestic violence, but some people may have their internet activity monitored by their abuser and will have difficulty accessing these resources. > For example, many informational pages and hotlines will have escape buttons or disclaimer messages such as: Safety Alert from the National Domestic Violence Hotline webpage
    • > When apps try and use this “disguise” approach, the app’s UI gets in the way of its purpose or is publicized too much to be useful to survivors Top 2 “most helpful” reviews in a popular domestic violence prevention app with a similar premise.

Design Question

Can we engineer a domestic violence resource portal that is discreet, untraceable and stress-free for the user?

Introducing Maison-Autelier, a boutique fashion house that doesn’t exist. We designed a boutique website that showcases several collections from this “designer”. Underneath, this web app is a portal to personalized domestic violence resources that are delivered with a discreet phone call.
_ How it works: _ Upon trying to purchase any item of clothing, a user is prompted to input their phone number for more information. Utilizing the Twilio API and BeautifulSoup for webscraping, the user is then called discreetly with information on how to access the top three domestic violence shelters, websites, or hotlines in their area.

About Our Name:

Maison - Autelier

home + portmanteau(auxiliary = aid, assistance, atelier = workshop of a designer)

Domain Name: www.maison-autelier.com We wanted to evoke a sense of luxury through our domain name, pared-down shopping path, and clean UI. On the surface, we are a typical online boutique clothing brand, but if you look deeper into our name, you'll find the purpose intentionally hidden in our design. Maison is French for "home", and "autelier" is our play on combining "auxili" (latin for help, remedy) and "atelier" (French for workshop, typically referring to design and fashion).

UX Walkthrough

Front page of the Maison-Autelier online boutique

Front page of the Maison-Autelier online boutique

Hover text reveals the true purpose of each collection. The Fall Winter 18 collection will connect the user to 3 domestic violence shelters in their area.

Hover text reveals the true purpose of each collection. The Fall Winter 18 collection will connect the user to 3 domestic violence shelters in their area.

Each collection page features unique interactive content.

Each collection page features unique interactive content.

Upon clicking on a product name, the user is prompted for their phone number. While this looks like they’re making a purchase inquiry, our backend will be gathering personalized information and calling them in a matter of seconds

Upon clicking on a product name, the user is prompted for their phone number. While this looks like they’re making a purchase inquiry, our backend will be gathering personalized information and calling them in a matter of seconds.

The user gets a discreet call with 3 listed resources of the specified type.

The user gets a discreet call with 3 listed resources of the specified type.

link to example call audio and UX walkthrough video

Video

Tech Stack

  • Python Flask for the backend with HTML, CSS, JavaScript, and Bootstrap on the frontend
  • BeautifulSoup, Selenium, and Google Chrome Canary for serverless webscraping
  • APIs
    • ipinfo - discreet location services
    • Twilio - communications

Media and Attributions

  • all images are labeled for reuse from Google Images or Unsplash

What We're Most Proud Of

We're very proud of being able to produce our minimum viable product, with a solid user flow from the front page of the web application to a phone call with personalized resources. Delivering a working product that has the ability to change someone's life in a dangerous situation.

Technical Highlights:

  • Selenium works and we were able to do it on headless browser, meaning there is no record of the user's browser accessing domestic violence resources
  • Functioning use of the click to call Twilio API
  • integration of frontend and Flask backend using Jinja.

Experiential Highlights:

  • team bonding and a fun experience
  • collaboration and technical growth
  • designing a realistic brand with a logo and creative content

Issues We Had

Using Google Cloud Platform to host our web app was difficult

Whats Next?

  • supporting different languages
  • adding increased accessibility support for the UI
  • adding a panic button to alert emergency services
  • interviewing domestic violence survivors and those who work with them to improve our user experience
  • implementing Twilio API to take in user keys and dial different hotlines for users
Share this project:

Updates