Inspiration ⭐

As someone who has struggled with disordered eating and finding help for it, I know the importance of enabling easy, user-friendly resource sites to Gen Z and Millenials. Using Montreal's SOS Violence Conjugale as inspiration, I built Hopeline, a visual form of the National Eating Disorder Association (NEDA's) hotline. It is the first website of this kind in the US, meant to use an interactive, approachable interface for eating disorder sufferers.

What it does 🌐

Hopeline makes it easy to find or be redirected to the most important eating disorder resources: intervention, evaluation, and assistance. When the website is loaded, the user will see three buttons prompting different scenarios that they may be going through. Each of these hyperlink to a page with personalized resources and guides to walk through helpful processes. Alternatively, a user can choose to scroll down and view a resource gallery. The first resource is the official NEDA screening tool, a quiz to determine whether a user may be at risk for disordered eating. This is embedded as a JavaScript form with customized results depending on the user's replies. Next, an embedded map can guide a user towards their nearest recovery treatment center. If their center is not on the list, they may click a button to view a NEDA-approved list. Lastly, several hotlines and live support is present for those who need it, including resources for those outside the US.

How I built it 🔨

The website was constructed using HTML, CSS, and JS. There are three HTML files, one for each page: home, helping yourself, and helping others. The glowing buttons and gradient designs were coded into the CSS using -webkit-animation and linear-gradient elements. The screening tool is made using a jQuery plugin, for which all files are found under hopeline/quiz. The format is made to appeal to millennials and generation z, as most people affected by eating disorders are in that demographic. Neon gradient colors, animated buttons, and clean icons form a welcoming view to the user. Scroll animations aid experience as well. The Alexa voiceover in the pitch video was coded using Amazon's Developer Portal.

Challenges I ran into 🏆

The most difficult part was with the jQuery quiz, due to having difficulties making the <script> elements function and link. After starting a side project focused on just getting the quiz to work, I was able to determine the error in my syntax and embed the working quiz into the main Hopeline site.

Accomplishments that I'm proud of 🚀

Making the entire website independently in such a short time frame was a difficult challenge to navigate. I'm proud that I was able to delegate my time and manage my resources to be able to finish the website and create the pitch video on time.

What I learned 🧠

This was my first time working with jQuery, so I learned a lot about how to use plugins and best practices to make things load as quickly as possible. I also learned how to animate buttons, which I had not used before. For resources and support in learning these new topics, I used CodePen, JSFiddle, and Stack Overflow.

What's next for Hopeline 🌎

I hope that programs like Hopeline may be implemented in the coming years to make eating disorder support more user-friendly, especially in COVID times where in-person help is not always possible. In the future, I plan to further develop Hopeline into a more extensively crafted resource database, and potentially reach out to NEDA to ask if they may host this website on their servers.

Source Code


Share this project: