Cosmos (2).png

Project Background

The FemTech Collaborative has been developing and evaluating a suite of tools focused around helping people clarify their reproductive health goals, values, and preferences, navigate preference-sensitive decisions, mitigate risk for poor reproductive outcomes, and communicate with their provider. The team has identified the need to offer the contraceptive education, comparison, and selection function of these tools for users to access at home.

The Challenge

Design a mobile application that allows people of any gender, in relationships or single, to learn about, compare, & choose from available birth control methods.

Details

Interaction Design Studio at Carnegie Mellon University


Duration: 5 weeks,

Spring 2020

Role

Tools

Team

Interaction Design
UI/UX Design

Adobe XD

Figma

Christina Ip

Ivar Dameron

Mica Loosemore

Matthew Muenzer

The Outcome

The Outcome

header 1.png
Clay iPhone Learn Left 1.png

Welcome to Cosmos

Cosmos is a mobile application empowering individuals to freely discover and decide their own choices about birth control through user-defined exploration.
Vector (2).png

Start with a short quiz

Answer a few background questions to help us get to know you to personalize the experience and for the best suggestions.
High Fidelity - 3.png
High Fidelity - 4.png
Frame 21.png
Frame 21.png
Group 113.png
Group 127.png

Browse and compare

See all available options and select the best choices through filters. Compare and contrast methods quickly with side by side comparisons.

It's all for you

Frame 21.png
Not sure about something? Define words
that seem unfamiliar and keep notes with
your saved methods in your own account.
Group 137.png
Group 130.png
Frame 14.png

Birth control can be intimidating. Let's talk about it.

Frame 14.png

The Design Process + Timeline

Frame 13 (3).png

Defining the Project Scope

Our research began with investigating online resources such as Planned Parenthood and Bedsider to gain a better understanding of what available resources existed. Quickly, we discovered that it could quite intimidating and overwhelming, especially for first-time users.

To further explore, our team conducted evaluative interviews with two women, a college student and a young professional. The findings are summarized below: 

  • Needs were dependent on the circumstances and could change at any time

  • Information was mainly learned through anecdotes and online research

  • There was a strong desire to feel prepared but there was a lack of knowledge
planned parenthood.png
bedsider-logo.png
Mask Group.png

Our interviewees were in different stages of their life and their preferences would change throughout the years. However, they both mentioned when visiting the doctor's office, they were not sure what questions to ask or what they needed to know. After the doctor's visit, it could be overwhelming and difficult to keep track of all of the options. 

Our design question developed into the following:

How might we assist individuals in navigating birth control independently while feeling secure in doing so?

Defining & Developing

Listening to our interviewers and conducting our own research led us to realize there was an abundance of information about birth control and several questions to ask. Because of this, we decided to start our mobile app with an introductory questionnaire to help the user grow familiar with questions and for us to understand the user needs more confidently. Afterward, the user would move into exploration and independent learning. 

Because situations were always changing, we also created a You page for users to to save their recent searches and have opportunities to answer more questions if needed.

 

Our team worked together to create sketches and wireframes to design the interface.

Medical Mobile System Diagram_Dameron, Ip, Loosemore, Muenzer.png
image 1.png
66283E97-73DB-4C4D-B489-25484101A307IMG_8574.heic
024185BC-844E-48FA-BBD6-10435329907BIMG_8572.heic
Wireframes.png

Early Wireframes

Filtering + Comparing/Contrasting

While sketching, we found that the best way to view the birth control methods was through categorizing information. This way, the user could view and organize choices quickly and easily, especially when they were confident about specific needs. 

With options that had similar qualities, for more clarification, a compare and contrast feature would also be available.

Frame 11.png
Frame 12.png

Creating the Quiz | A/B Testing

As for the quiz, we asked our participants for their feedback on the questions. The quiz's objective was not only learn about the user's needs but also bring a level of comfort and help, especially for new birth control users. We mocked-up two low-fi screen for them to test out. The on the left had questions that laid out suggestions as you type and the one on the right had suggestions that you could tap right away. You were free to create your answer as well. 

 

When shown these screens, our participants preferred the right screen because the suggestions laid out had given them more direction. This was incorporated in

the final design. We also got an idea of their comfort level when answering personal questions.

qs2.png
qs.png

Style Guide

Cosmos is designed to be welcoming since birth control can be an intimidating subject. We wanted individuals to feel empowered as they explore methods on their own terms. To reflect this, we incorporated purple, the color of the women's movement, as the primary color of our mobile experience. Our logo also incorporates cosmos flowers to represent peace and harmony to be comforting and reassuring throughout the mobile experience.

Frame 12.png
Frame 15.png

Font

Frame 16.png

Color

1a.png
header 1.png

App Walkthrough

After reflecting over our interviews and re-examining our research, we designed our mobile experience in a way that assists them but also lets our users make their own choices. The design focuses on independent and user-defined exploration while only proving guidance at the beginning of this stage and when circumstances change. For our onboarding phase, the app briefly introduces itself and its purpose before moving onto the next screens.

Onboarding 4.png
Question - 4.png

Questionnaire Begins 

The app begins with questions to learn the user’s background and history with birth control. These questions have selected options so that the user can go through quickly.

When selecting an answer, the option will be highlighted. There is also an option to skip on each question. On the bottom, there is a progress bar that shows your place along the process. Left and right toggles buttons move forward or back during the process if needed.

Free-type Questions

The last two questions have a free text interface. They allow the user to freely put in answers without any influence.

Suggestions are given if needed. Underneath the text box, the text is clickable. It opens up a box of reasons/factors that the user can choose to help with determine the recommended birth controls.

last-1.png
last-2.png

Results  ➝  Answers  ➝  Explore

last.png
last.png
Group 112.png

At the end of the questionnaire, there is a confirmation for your choices. If everything is correct, the suggested birth controls are then revealed in a way that can be quickly screenshotted for personal use. After this, the information will be saved to your user profile and you can move onto exploring all the methods freely.

 

The first screen after the questionnaire shows suggested birth control option within the Learn section of the app with pre-selected filters corresponding to the answers. Extra filters are introduced here and scrollable (horizontally). From here on, the user is free to explore methods and learn on their own.

Group 120.png

Quick View or Full View

If the user taps on a method within the Learn section, a Quick View overlay slides up with a summary of facts about the method. 

For a more detailed look, the user can select “Learn More” and get a in-depth view of the method, including its efficacy, price, maintenance. 

A Detailed Look

Group 132.png
Group 137.png
Group 134.png

Upon viewing a method in full, users will also be able to save and define terms that seem unfamiliar. On the bottom, they can also see methods that are similar based on the filters. Near the upper right, users can also pin a method to compare and contrast for later.

Compare + Your Account

On the Compare page, view saved methods and their differences. The user can also pin a method to the left column by tapping the upper right portion of that method’s icon to compare across others.

Lastly, save your searches and methods on your personal account. You can also take the questionnaire again if needed or answer more questions to get a more defined search. Cosmos keeps the user informed and is designed to navigate birth control comfortably and independently.

Group 130.png
Frame 19.png
Frame 20.png

Reflection

The objective of our mobile application was to provide reassurance and help users feel less intimidated about birth control. Regardless of what it is, medical visits and advice can be daunting. The main challenge was to understand what users felt when learning about birth control, stay in their comfort zone, and still provide the knowledge in an informative way. 

Our client, FemTech Collaborative, enjoyed how our design approached delivering information in layers instead of all at once. Our team was happy to learn that they would be incoporating parts of our research and design into their existing services.