Haven is an app designed to provide a supportive and inclusive community for immigrant mothers going through the perinatal journey. Being a new mother in a new place can be challenging, but Haven creates a safe space where women can connect with others who share similar experiences. This is especially helpful for those who are dealing with the postpartum effects of their journey. Haven offers a range of resources and tools to help immigrant mothers navigate the challenges of motherhood in a new country.
This was my first ever protothon, I participated with 4 other wonderful students..
Ocean Vu - Linkedin - Portfolio site
Ian Teodoro - Linkedin - Portfolio site
Zareen Tasnim - Linkedin
Juhi Khare - Linkedin
A wonderful event ran by the great people at DubsTech and Design Buddies. This was a highly competitive event open to anyone around the globe the join, resulting in a field of 600+ designers participating in the event in mostly groups of 5. The event gained so much notoriety that event staff has to waitlist nearly 1200 designers from joining the event due to the fact they were already straining their capacity to run the event at 600+ designers. In the end there was 128 teams of designers that participated in the 24 hour event.
Our approach started by finding our desired theme after most of the morning leading into the early afternoon we landed on our theme (featured above). We were about 4 hours into the protothon and we had found our theme. We began doing competitive analysis as well as researching our topic as a whole trying to find pain points that we could address to make a product for.
After about an 2 hours of research and a lots of ideative talking we landed on a rough idea to create something to both educated and connect mothers to help their prenatal journey. Specifically targeting immigrant parents' as language barriers and cultural differences make it especially hard to find the right resources or connections.
We felt positive about our design direction thus far so we decided to do a round of Crazy-8's to get some rough ideation flowing (our team pre-Crazy-8's featured below). From the result of 8's was a lot of ideas structured around connection, education and safety. A big take-away was (in the bottom right of the image below) the idea of having a safety net or circles of friends that would display and show your inner and outer circles of connections.
Our expanded now late into the night processing how we could design this lose concept of visually showing the connections of your inner circles. Making sure the user could see and feel their safety net of people around them whenever they open the app. Making a few early wireframes to capture our rough ideas.
After about a 6 hour sleep for the group we hopped back on creating more flushed out wireframes to create a cohesive user experience and visual brand. We also then settled on the name haven. siting our app to be a safe-haven for mothers to go to to find the support and community they need. By now we we rushing as time was winding down on our project we quickly began finalizing our frames.
This was one of the most chaotic but redeeming 3 hours of my life, as my team was in the middle finalizing the wireframes I began to prototype the animations. Working roughly two to one wireframes behind them, importing then animating a frame that would jump to the next frame (they frame they would be finishing). So it worked a like a factory production line. From one hand to the next.
In-depth prototype annitote, one of my proudest personal achievements from this project was figuring out a system to prototype the rotating dynamic background for the home page and onboarding landing page. I needed the inner circle group to rotate around the center island (the user's character). The problem is if the group rotates the other character profiles rotate in tandem which results in the characters profiles flipping upside down which is very unpleasant to the viewer. So to achieve the result I created the a number variable that corresponds to the inner group rotation value (for example 301.02). Then I created and instance for the character profiles within the inner group to rotate instantaneously whenever it detected rotation movement on the inner group. I then had the character profiles rotate on the calculation of [-(inner.group-varaible)]. So in this case if the inner circle had rotated 301.02 as mentioned before, the character profiles would then rotate [-(301.02)] resulting in the rotation from the viewers eyes to always be 0 as their rotation values canceled out.
