YEAR

2017

ROLE

Brand Design
UX / UI Design

SpotOn

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.

DEFINING IDENTITY
and style guide

My team and I spoke to real women to better answer what women would want to see as their period app. Of the descriptors they provided, we found that these three stood out: informative, direct, womanly.

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:

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.

CONCLUSION

This app is currently still a work in progress, and we especially enjoy hearing feedback. Please contact me if you have a story or support to share. We'd love to hear from you.

Everywhere

@caretoshar

I'm always up for a cup of coffee.

caretoshar@gmail.com
LinkedIn
Instagram