Wings

Find your wings--or any other products--when you need them, all just a click away.

Comment

Inspiration

Periods impact everyone, no matter the circumstance, cause, or perceived identity. As a team of developers and designers who both have periods or have never experienced them, we wanted to create a solution for UCI students who have periods and might need period products unexpectedly. Period products should never be gatekept, and the current methods to locate menstrual product dispensers on campus are inefficient, hard to read, and difficult to navigate, which when confronted with an emergency, might not be the best solution to providing products to those who need them most.

Our story and our inspiration comes from our firsthand experiences of needing emergency period products, but not having the resources or means to access them with ease. We believe that no one should have to feel like they have to jump through hoops to access menstrual products, nor that they should have to feel inconvenienced as students here as UCI when there are plenty of resources that ensure period equity.

After recognizing how much of a pain-point this current system is, we wanted to make the lives of period-havers at UCI easier, connecting students to active resources, while also facilitating a helping nature amongst those who need menstrual products. This app is a product of our frustrations with the lack of clarity the menstrual product dispenser website provides, because we are tired of having to figure out how to navigate a map that is not dynamic and a master list that is too long to actually sift through. Wings is our way to solving that problem, making a resource that UCI already provides accessible, which is always welcome.

What it does

Wings is a platform for those with periods to find free menstruation product dispensers on campus at UCI, by allowing users to check locations and bathrooms with available dispensers, products, and stock, making emergencies or period product changes an easier process.

By analyzing the master document of all menstrual product dispensers on campus, we create an interactive map for students to check all of the details they need, allowing them to navigate to the nearest pad/tampon station. We also aim to use our geolocation services to allow students to find the bathrooms nearest to them, removing the hassle of searching for specific dispensers by providing options that—when in need—might be easier to access.

Our platform also provides a log-in feature that allows users to ping nearby people in order to see if anyone has a period product they’d be willing to share, circumventing the trek to the nearest restroom with a dispenser if the situation is dire, and allowing our students to foster a sense of generosity and empathy during an emergency or time of need.

We also wanted to create this sense of community by allowing users to chat quickly about their period product needs, as well as reporting when products are in and out of stock, allowing both a dynamic change of stocking and one that is reflective of our actual user base and the dispensers they encounter.

How we built it

While we took on the front-end as a team, we did still split our development process based on our respective strengths, with two of us taking on the frontend, and the other two working on the backend functionality. We landed on a website, which we one day hope to also implement as a mobile app, because we reasoned that most people using our platform would be in class or on-campus on their laptops, which is what we noticed a lot of students use to navigate in a crunch.

In order to actually have a clean UI, we went ahead and began prototyping our design through Figma, using an interactive design process to ensure that all screens were up to a standard both the front-end and back-end developers were proud of. There were many screens and flows we ended up discarding and some that we invented as we went along with the product creation process, but we adhered to our styling guidelines in our Figma as best as possible.

For the frontend, we used React to create the styling and interactive user interface, styling each and every component of the screen with CSS (which took longer than anticipated from time to time). We used Figma’s developer-ready plugin to assist us with some of the styling, making sure that we stayed true to the idea we envisioned for the user interface. We also made sure that any of the APIs or interactive features we had aligned visually with our branding; for example, we modified the styling of the Google Maps API we used to ensure that the map was visually consistent with the rest of the webpages. We implemented the Google Maps API, which is very accurate in terms of localization and used that to both guide our user base to the nearest restroom, while also using its geolocation features to actively track our location as we navigate through the website.

For the backend, we built it using Flask and connecting it to a Postgres database, generating users by sending information from the front-end to the back-end. We essentially used a restful APi to create the log-in/sign-up features, which allows users to create their user token that allows our website to remember that the user is logged-in for the duration of their visit on the Wings website. Eventually, we do want to implement the Duo 2FA so that UCI students know that this website is secure and protected for them, as well as ensuring that the chat features can only be accessed by UCI students, which can be verified through their UCINetID.

We had a lot of successfully moving parts, which we are very proud of, as our implementation is clean and easy to use without having too many issues impacting our overall functionality.

Challenges we ran into

While we have a bit of experience with using React and design an interface, actually implementing them was a bit of struggle, as we had issues with making fonts consistent, making form boxes consistent rounding-wise, and generally making sure that our designs were dynamic enough to work on everyone’s machines and screen sizes. We had to shift a lot of our interface components from being absolute and fixed points on the page and did go back and add a LOT of dynamic display capabilities, because we initially did not have dynamic interfaces.

Our screens ended up looking okay on some devices, while really stretched out and compacted on others, so we took it upon ourselves to keep iterating and fixing pages as much as we could. Another issue we had in the front-end side pertained to styling our components, because our chatbox feature for some reason began changing the styling of our aspects of our website, which took us a while to figure out and troubleshoot given that we never imported the chatbox styling into any of the other CSS styles we had created. Controlling our components and ensuring consistency was quite the task, but it was one we tried to handle as best we could.

Another issue we encountered was with the Google Maps API, since a lot of its functionality was a bit glitchy when it came to tracking the location of our devices. The API was implemented with relative ease, but actually controlling the attributes of the map was a bit of a challenge, since the location services led us to decide between having an exact location marker or a general location radius. There were some issues that we definitely could troubleshoot, but since the meat and potatoes of our project is this map, we did feel a bit worried about the accuracy of the API as we refreshed our pages to work on them.

Finally, we did have some problems with the backend, because our backend developer had some trouble generating and privatizing the user password tokens, which is something that we wanted to implement to ensure that you need a UCI or email account to access more of the private features. We figured out the work through password hashing, but it was a bit nerve wracking to feel like we couldn’t get the password functionality working in time.

Accomplishments that we're proud of

We are extremely proud of our front-end because we translated our Figma designs pretty accurately, while also using technologies that for some of us, were completely and totally new.

Our front-end demonstrates the love and care we put into our project, especially since we wanted our UI to be humanized, warm, and aesthetically pleasing, reinforcing our mission to ensure that period resources are accessible to all UCI students who may experience periods.

We also learned how to adequately integrate third-party APIs, something that most of us have never done before for our hackathon projects. We feel that the amount of work we put into it was extremely impressive, not just because of how quick and streamlined it was to develop and bounce off of each other, but because the tech stack we implemented was simply complex, and deploying it on Vercel was no easy feat.

We would’ve never imagined that we could implement a project so complex and yet so visually pleasing, and we are extremely proud of showcasing this at VenusHacks.

What we learned

We learned that we should never underestimate ourselves or our capabilities, especially when working in a team that has such a good working chemistry. We were extremely motivated to get a project that we were passionate about, which allowed us to be capable of creating a fully-fleshed out app when you have a team of motivated developers pushing you along.

We also learned how to work with animations on React, which added a personalized touch to our project—something that we really wanted to implement even before we had an idea in mind. We received some feedback from a mentor that told us “you can tell humans made it” which we took as motivation and as a complement, especially in an age where good UI is being handed off to AI tools. We also learned how to work with the Google Maps API, which really gave us the meat of our project. Styling it to match our branding, working to make it centralized to UCI, and ensuring that every fix was universal on each machine.

Finally, we learned that LiveShare is not the best tool, as we became Git warriors, pushing and pulling (we had about 90 commits by the end of this!).

What's next for Wings

Eventually, we do want to implement the Duo 2FA so that UCI students know that this website is secure and protected for them, as well as ensuring that the chat features can only be accessed by UCI students, which can be verified through their UCINetID. We one day hope to also implement Wings as a mobile app, allowing for this resource to become even more accessible, even when in a time crunch.

Share this project:

Updates