musfit cover.jpg

MusFit

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

MusFit home screen

MusFit home screen

Sketching out the problem

The problem

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.

Survey says...

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.

Our target audience was modest Muslim women, aged 20-35, who have interest in fitness activities. They were usually found in MSAs (Muslim Student Associations), masjids, and community spaces.

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.

We sketched a user flow of our app’s core functionality. A user should be able to login, find a nearby studio location, pick a time, pay, and reserve a fitness class.

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.”

Demo time!

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.

Selecting a fitness class

Selecting a fitness class

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.

Summary

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.

About HalalHackathon

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.

Colophon

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.