SpotOn

2017     |    Brand Design and UX / UI Design
SpotOn is a period tracking app designed for the modern woman by women.​ Elegantly track your period and maintain your bodily health without the fuss.

NEEDFINDING

The story of SpotOn is pretty personal to me, as I'm sure every woman's experience with their period is. Birth control? IUD? When did you last start your cycle? These questions become more and more important (and frequent) as we more and more learn to make decisions for our body.

So it came as a surprise that when I searched for an app to assist in my self care, no existing app in the market sufficed. They were either over sexualized, aesthetically demeaning, planning for ovulation, or difficult to read. Perusing through Twitter, I found I wasn't the only one perplexed at the current assortment of period apps.

MARKET RESEARCH

A major point of frustration were the aesthetics Some reactions that stood out to me were, "Why are there flowers?" "Are those ... emojis?" It's hard to believe it's so comical, so I've included screen grabs of current frontrunners in the market and their UI. Yes, those are flowers. And yes, someone somewhere had decided that little orbs labeled with emojis were the best way for women to log how they were feeling during their most irritable time of the month.

These designs also fed the demeaning definitions feminists are seeking so hard to change. Women we spoke to when first performing market research described how these apps made them feel like "being female meant being frilly." To see how we could create a product that felt more attuned to what women really wanted, we decided to redesign Planned Parenthood's SpotOn app.

UX RESEARCH

My team and I spoke to real women to better answer what women would want to see as their period app. We made sure to keep checking in with this group of women at every milestone.

Samantha W.
Classically trained singer, tea lover, and active reader
Amber Y.
Business pro, fashionista, and globe trotter
Tori T.
Opera singer, whale watcher, and sex-ed advocate
Sarah R.
Motion graphics engineer, avid thrifter, and life of the party
Annie H.
Data engineer, jet setter, and incredible cook
Ryanne B.
Future lawyer, frequent hiker, and kombucha’s biggest fan

DEFINING IDENTITY
and style guide

Some surprises? Pink was a fine color, just not with flowers and butterflies. Refinery 29 has done a remarkable job of branding what "feminine" can look like while still being empowering. Seeing content from other women (ie. learning tips and tricks from your Mom) is considered valuable and better than Cosmo's 20 hacks. Modern chic is very in.

With this feedback in mind, we created moodboards to explore what themes could accomplish these descriptors successfully. We sourced from brands we admired, and took traditionally "masculine" colors to counter the complaints we heard resounding in the internet space.

We arrived on a combination of golds, roses, and dark navies that was elegant yet strong. Lucky for us, there has been a dialogue around how women should be portrayed in media. Drawing from icons such as Serena Williams and Emma Watson and the sort of branding that happens around them, we could get an idea of what female identity we wanted Spot On to reflect.

Designing UI / UX

The use case that kept recurring as we began to build the user experience and appropriate user interface was that of the doctor's visit. Every friend, mother, aunt, instructor we spoke to recalled the question: when was the date of your last period? For those unfamiliar, this question occurs somewhere between "when was your last check-up" and "how much do you weigh." An uncanny 100% of the women we spoke to then said they either had to take out their phone or their planner to go back and check the date of their last period. Usually, the person hadn't logged the date of their last period explicitly, but instead would see a meeting or event they remembered they had their period during.

This isn't exactly an accurate method, and for many health concerns, knowing exact dates and symptoms can be extremely helpful or critical. This formed our UI and UX requirements:

-  Needs to show a calendar.
-  Needs to be directly readable.
​-  User should be able to view cycle holistically.

BRAINSTORMING
CALENDAr ui

INITIAL WIREFRAMES

ui: iteration 1.

USER TESTING

The first iteration compiled all our insights with our research and offered three main features: a landing page that informs the user of where they were in their cycle, what that day may entail in terms of hormones and physical requirements, and a calendar that clearly marked when they had had their periods. The design emphasized minimalism and elegance. We tested this against real women and received the following feedback during user testing:

What if I want to know about my ovulation?
Tori T.
What does the stagnant 3PM tell me?
Sarah R.

UI IMPROVEMENTS

So back to the drawing board. In our four iterations, we confronted the following needs: birth control notifications, contraception-related notifications, detailed but easy onboarding that allows the user to share health-related needs and decisions, ovulation indication, and a birth control reminder. In accessory items, we added some element sizing changes, a manual period toggle, and end page quotes.

ui: iteration 2.

END RESULTS

We received incredibly positive feedback to SpotOn's redesign. Women felt that they could open the app in a meeting, unashamed of the taboo around women's menstrual cycles. Women learned more about what their cycle could tell them, such as higher estrogen levels that boost their mood around the eighth day. Women appreciated how the app felt professional and informative, instead of making their body's natural process feel like a gimmick.

I’d definitely use this! It matches my planner.
Samantha W.
This feels mature, sexy, and appealing!
Tori T.
I can open this app in a meeting and not feel weird.
Amber Y.
I didn’t know that my cycle could tell me so much.
Sarah R.
I like that it uses language that’s honest and direct.
Annie H.
I don’t feel patronized. There aren’t flowers. Here for it.
Ryanne B.

to be continued ...

If I had the opportunity to expand this project, I would want the next iteration to include the perspectives of transgender and non-binary people who also menstruate. The women and their unique perspectives included in this project were what made it so rewarding, and I’d be eager to continue the inclusive conversation.

Made by yours truly 💚