Partnering with developers to design and produce a platform supporting new mothers.

A new experience

I participated in Hydrangea Hacks, the Bay Area’s largest hackathon for women and non-binary individuals. It was my very first hackathon and I went in without a team or knowing anyone. 

I partnered up with three amazing developers who had little to no experience working with a designer and I was excited to show them the design process!

An idea to help support new mothers

Using Miro for collaboration, we brainstormed a few ideas for our project. We settled on an application that could help new mothers, or anyone who identified as a new mother through community involvement and mental health/wellness resources.

The pain points in motherhood & creating a solution

Diving deeper into the topic, I created a survey for new mothers. I provided questions on support, ranking the level of support, pain-points as a new mother and what applications they enjoyed using. 

The results helped us solidify the problem and the pain-points:

Looking Outward

I took a look at other applications for mothers and noticed that they utilize connections through community, but the one thing missing was the access to specialists. There are apps out there like BetterHelp and Talkspace that solely focus on mental health but those come at a cost/or access to insurance. I thought - what way could we introduce specialists to our users and have it be accessible for everybody? Sites like Reddit or Elpha came to mind - where they host weekly AMAs or ask me anything. And that’s when we decided to use that as one of our features. 

‍

The “winning” feature

We decided to create a web application - a safe space for expectant mothers, new mothers, and anyone associated with motherhood to build connections, ask questions and find support.

Based on the pain-points, the application will be community-based where users can connect with other new mothers in communities of interest. Due to cost, insurance, and other factors, we know how hard it is for mothers to find resources for mental health and wellness. Through our Weekly Ask feature we want to provide everyone access to these specialists starting with the first "Hello!

But what should we focus on?

Due to the limited time of this hackathon, we could only focus on a few features. So I created this Priority Matrix and discussed with the team on what was high priority versus what could wait in the back burner. We ended up deciding to focus on the Weekly Ask and the feed.

‍

Putting the concept into wireframes

I started the initial wireframes using Balsamiq. When the user is taken to their main feed, they will see the communities they are part of and all of the corresponding posts. Users can filter posts, reply and create their own.

‍

How usable is this?

Before moving on to the mid-high fidelity prototype, I created a clickable prototype and tested it out with the developers and the mothers I interviewed previously. 

Below is a tester's journey:

‍

The average time spent on this feature was 16.5 seconds and the misclick rate was 0%

‍

Introducing Figma to developers who have never used Figma before!

All three developers have not had the chance to use Figma before and I was excited to show them all of its features through my mid-high fidelity prototype. 

‍

The handoff

I wanted to make sure they had everything they needed before the start of the hackathon, so they can seamlessly work on the product without any roadblocks. I created the following page in the Figma file to make sure I have included everything from error states to hover states, fonts and images.

‍

Watching the magic happen

I did a walk through of my Figma file and sent it to the developers. From there, they were allotted 2 days to complete as much of the development as possible. They used html, css, javascript and React. 

Our final demo video

Click below to see a full run-through of our project!

An unexpected surprise!

We ended up winning 2nd best hack overall! I was very grateful to have participated in this challenge and see my designs come to life! 

Conclusion and Next Steps

I worked through many new experiences during this project - first hackathon, developers at varying levels and fitting research and design in an extremely short sprint. Time management and valuing a collaborative environment was what helped us in the end!

We all still keep in touch! And I’m hoping to continue this idea and design a mobile app!