Case study on how I designed an app for women that allows them to crowdsource fitness training sessions near them during a hackathon.
MusFit—designed app in a hackathon to empower women’s personal fitness choices
There is a distinct lack of women-only fitness classes that have convenient schedules or nearby locations.
Fahima, our hackathon teammate, looked for fitness alternatives outside her home, she realized her options were limited. Women-only gyms like Lucille Roberts didn’t provide a space for modestly dressed or conservative women to participate in a private setting. And if she wanted to book a studio with friends, it was an arduous process involving Google Maps and several Yelp searches. Then, coordinating time slots with her friends turned into a stressful stream of text messages. By the time she was able to set up a fitness session, she wondered if there was a better way.
Her personal experience with the problem made her startup idea an attractive challenge to work on.
Let’s validate the problem
To drill down and validate Fahima’s experience, and the viability of our assumptions of the problem, our team created a quick survey using Google Form. We polled 14 anonymous Muslim women at the hackathon. With 10 questions with built-in assumptions and collection, and a follow-up survey of 5 questions to refine assumptions, we set out to collect data.
We needed to test our theory: Why aren’t Muslim women working out?
Our survey data revealed that Muslim women did work out more than once a week, usually near home or at a gym, and were split on women-only classes. Our insights revealed that Muslim women prioritize time, location, and women-only classes as the three most important factors when determining where to workout.
How often do you work out?
Where do you work out?
Does it matter who is in your class?
We recognized that we had a small sample set of data to work from. Still, by validating our startup idea’s viability as a real product, we were able to move forward with a clear urgency to solve the problem.
What's the solution?
An app for women that allows them to crowdsource fitness training sessions near them.
Our survey data helped us nail down our audience, minimum viable functionality, and user flow.
While some of our teammates work on the slide deck, others worked on the business plan.
I used the hackathon was an opportunity to push myself and my design skills further. I took responsibility for sketching out the main screens of the app and bringing the design to life.
Instead of my typical workflow of Illustrator for wireframing and InDesign for the design phase, I decided to learn a new tool in a few hours. I used Omnigraffle to sketch out and design the screens. While a bit unorthodox, Omnigraffle is a fantastic app that provides the flexibility to wireframe quickly and easily.
I was learning the tool and sketching at the same time. I ran into a few snags with the app’s quirks. Keyboard shortcuts, menus, and UI drawers were not exactly where I expected them. Also, due to my limited understanding of Omnigraffle’s artboard capabilities, I had to export the image and crop them in Photoshop. While my workflow was stuck in traffic, it was an exciting challenge to birth an app using a new tool while racing the clock.
Design and prototype
To help test our app’s flow and functionality, I created an InVision prototype.
It was really exciting to see our app come to life. The prototype was alive and working on the phone and all of our teammates were able to use it. There was a sense of joy and glee from being able to play with the “app.”
As our hackathon’s timer ran down, we put our finishing touches on the presentation and did a mock runthrough. Finally, we got up on stage and divied up the speaking roles. I presented the demo for the application using the InVision prototype, an iPhone, and the Quicktime view on a mac.
Our team won first place!
After we presented, it was such a sigh of relief. All of our hard work culminated into a glorious end.
But the journey was only beginning. We would be presenting on Google’s Demo Day along with the 2nd and 3rd place team. Oh, and we’d only have 5 minutes.
Rebuild the app, same challenge to keep it going
When we regrouped at my workplace, we developed a fresh timeline to address our new audience: Google engineers.
Our small presentation time meant extra focus on the design and functionality. We also tightened up our slides to cater to our short talk.
As an additional hackathon challenge to myself, I went from wireframing in Omnigraffle to designing in Sketch to prototyping in Invision, to presentation ready in about 5 hours.
I pulled apart the working elements of the original design and studied how to reassemble for a better fit. The end result was less screens, clarified functionality, and a ownable brand.
Google Demo day was a success!
Entering Google’s office for the first time was experiencing Willy Wonka’s Chocolate Factory come to life. Arcade buttons that animate together to create lo-fi pixel art. Ladders to climb between floors. Pulleys to transport laptops as well. Scooters to traverse the building. Hammocks on the 10th floor. All you can eat food all-day, every day.
As we were led into a room teeming with engineers, we had butterflies in our stomach. But we took charge of the stage, running through our presentation with poise and presence.
Our mentors and our audience gave us a round of applause of a solid execution, a clear purpose, and a vision for a full app.
After one great idea, two versions, two presentations, countless cups of coffee and slices of pizza later, we did it! Our app MusFit demonstrated a unique opportunity to empower women and their personal fitness choices. By shaping the narrative, we can help align to a woman’s personal choices, fitness, and wellness.
In addition, participating in a hackathon served as my rite of passage into the world of technology. I scratched together a fantastic idea from the ground up with a great team. We delivered on a solid presentation to two diverse audiences. And all fueled by Red Bull and pizza. It’s a testament to the triumph that us humans can build on demand, when given a prompt and a fire under our ass.
What did I learn?
When I stare at a blank page, sometimes, it doesn’t feel like my brain cells are working. It’s incredible how a stopwatch can ignite a fury of ideas. The hackathon gave me the confidence to rapidly iterate an idea in a short amount of time. Meshing with new team members to produce a minimum viable product proved to be a learning moment: a test of patience, diligence, and respect to produce the very best work quickly.
In addition, having a judging panel to validate our idea provided a great feedback loop. By not worrying too much about getting it right, I was able to hone in on the idea and help shape its narrative through our design and our slides. I was able to iterate over and over again without the penalty of perfectionism.
It culminated to an exciting product with two versions, two presentations, and a happy team ready to tackle the next hackathon on the block.
The premise of HalalHackathon was simple: analyze a societal problem and propose a solution using technology at its core. About 50 participants were asked to come up with ideas and submit them to the curators. Then, the judges lined up the idea makers and gave us a hot Q&A, testing us on the problem, the target audience, the solution, and the viability of the idea. Once the judges came up with six core ideas, they left idea makers to advocate their idea to others and attract teammates.
For sketching and wireframing, OneNote and OmniGraffle were indispensable along with my iPad Pro and Apple Pencil. To translate from idea to digital napkin sketch in a hot second was a time saver. Photoshop make quick work of chopping pixels when I hit roadblocks. Noun Project and their incredible resource of icons were lifesavers. InVision for hashing out the quickest, highest fidelity prototypes. And of course, the collaboration kings: Google Docs and Google Slides.