Disclaimer: I am in no way affiliated with Kindara. I’m just a self-taught designer with an insatiable curiosity.
About three months ago, I decided to stop taking hormonal birth control (HBC). And, no, I’m not trying to get pregnant. I was just tired of dealing with the side effects of putting artificial hormones into my body every day. After doing A LOT of research on other methods of birth control, I made the decision that I wanted to go all natural. Enter Kindara.
“Kindara is a fertility tracking app that uses proven science to help you get pregnant faster, avoid pregnancy naturally or better understand your body. “
Intrigued, I downloaded the app and have been using it daily since late September 2017.
Though I’m a huge supporter of Kindara’s mission,“to offer women the tools, knowledge, and support to understand how their fertility works, take ownership of their reproductive health, and meet their fertility goals,” there are some parts of the app that bother me — particularly the onboarding process.
Since my first experience with Kindara paralleled my transition into the field of UX, it seemed only natural to merge the two.
So, without further ado, here is my very first UX case study.
Step 1: Empathize
“Understand people within the context of your design challenge.”
Me as a User
My first step was to articulate my own frustrations with the Kindara app. I dissected every screen and wrote down anything that confused, frustrated, or pleased me about it. Then, I questioned myself. I tried to separate Sarah the designer from Sarah the user.
Here are some of my initial hypotheses:
- Women who are downloading Kindara are most likely stressed, overwhelmed and anxious because they are either: 1) having difficulty getting pregnant or 2) wanting to avoid pregnancy naturally, without birth control.
- The onboarding process doesn’t provide enough information about how to use the app. It also seems to favor users that are trying to get pregnant over those who are trying to avoid pregnancy.
- The app has a lot of information, which, though potentially helpful, might be too overwhelming for new users.
For reference, this is the current Kindara onboarding flow:
And here’s a look inside the rest of the app:
User Needs
I wanted to do some research to see if other users felt the same way I did. I sought out reviews of the Kindara app as well as their new fertility thermometer, Wink, on Amazon, Youtube, various blogs, and within the Kindara community.
Here are some of my discoveries:
“Maybe I’m just slow, but it’s taken me a while to understand the bar graph mentality of tracking your cervical fluid and menstruation. It was confusing to me that the cervical fluid bar went up when there was less of it, and down when there was more of it. We are so programmed to think higher bars = higher measurement that got really confusing. It seems so counterintuitive to me to have low bars be high and high bars be low. Not wrong, just unnecessarily complicated.” // Source: Appleseed Fertility Blog
“I thought the app would be a little bit more insightful and pick up on changes in my temperature and give some insight into what those things mean. However, you have to enter and interpret all of your own data. The app doesn’t do any of that for you. It simply records your temperature and other data and then you do the rest, which is slightly disappointing.” // Source: Amazon Review
“First chart off hormonal birth control. Feeling very overwhelmed with the terms, rules, levels of cervical fluid, and my chart. Any recommendations would be greatly appreciated.” // Source: Kindara Community
Business Needs
After gathering insights from other users, I did some research on the company itself. I wanted to gather enough insight about Kindara to help ensure my plans to enhance the experience for their users also aligned with their business needs. I learned about their mission, the science behind their app, and their team.
I even stumbled upon the original UI design plan for the Kindara app. (Thank you, Behance.)
Having the opportunity to read about how the design originated gave me a greater understanding of the company’s challenges and highlighted some areas for potential growth.
User Interviews
Though I gained a lot of valuable insight from reading reviews online, I wanted to get in front of some users and talk about Kindara face-to-face.
Thanks to my neighborhood Facebook page, I found four users of various ages and backgrounds that were willing to sit down with me. I read several articles on interview best practices, wrote a script, and scheduled my interviews.
Stanford d.school had some great interview advice for this newbie:
“Prepare some questions but expect to let the conversation deviate from them.”
And man, were they right. Some of the most fascinating conversations I had were the product of going off-script.
I also took a lot of notes and recorded users as they downloaded and interacted with Kindara for the first time.
Here’s a clip from Patrice’s interview:
It was so fascinating to watch someone else interact with the app, to see which parts made them laugh and which parts made them pause or question themselves. I was glad to have recorded this part of the interviews because it was extremely helpful to have footage to refer back to throughout my design process.
I ended each interview with a quick debrief, some Q&A, and a Starbucks gift card to thank participants for their time.
Step 2: Define
“Define the challenge based on what you’ve learned about your users.”
Unpack
Armed with an arsenal of insight, I set out to unpack everything I had learned from my users. I needed to get all the information out of my head and onto a wall. I started by printing out images of my users and placing them on my wall because, as Jesse James Garrett said:
“Having faces of users surrounding us while we design for them effects how we solve problems.”
I wrote down everything that was either emotionally-charged or that seemed important on a post-it note and placed them around each user’s photo. The pink post-its represent general feelings about fertility and the blue post-its represent specific feedback about the Kindara app.
Personas
Using what I had learned about my users, I used Xtensio to create two personas: Ilana and Abbi. Both personas were created based off the feedback I collected from my interviews because, as I learned from Joel Marsh,
“If you can’t back it up with research, you’re making it up.”
Ilana represents women who are trying to avoid pregnancy (TTA) and Abbi represents women who are trying to conceive (TTC). Though I probably could have created a few more personas, Ilana and Abbi were the types of users I wanted to focus on for this project. Ilana served as my primary persona and Abbi as my secondary.
After decorating my walls with user faces and creating backstories for Ilana and Abbi, I started to realize how vital these women would be to my design. I was designing for them. It was my job to create the best possible experience for them. They weren’t just data. They are strong, intelligent women who had a problem.
And I needed to solve it.
Define The Problem
With a much clearer understanding of who I was designing for, I moved on to trying to clarify what they needed from the app.
I started by developing some user need statements:
- “I’m interested in learning how to take control of my fertility, but this app is too complex and I don’t have time to figure out how to use it.”
- “I would love to take a more natural approach to brith control, but I’m worried I would mess up and get pregnant.”
- “I’ve been trying to get pregnant for months. I’ve tried everything, but nothing is working. Something must be wrong with me.”
These concepts eventually transformed into my POV for this project:
How might I improve the Kindara app to help empower new users to take control of their fertility?
Emphasis on empower.
I wanted to create an onboarding experience that gave users the all the tools they needed and then sit back and watch them build.
I had a pretty solid understanding of what my users needed, but I also had to be able convince Kindara why they should make the changes I was proposing (hypothetically speaking, of course). I tried to think about the types of metrics and KPIs that might give value to my design intention. I wanted to figure out a way that I could align the goals of my users with Kindara’s business goals.
I hypothesized that as users started to feel empowered about their fertility via the Kindara app, they would probably share their experience with other women, who might then download Kindara for themselves. Empowered users would probably also be more likely to upgrade to Kindara premium or purchase Kindara’s thermometer, Wink. In this way, I could fulfill both user and business needs simultaneously. My success in achieving this could easily be measured via Kindara turnover rates (which should decrease, if I’m successful) and by the number of new users downloading the app for the first time (which should increase, if I’m successful).
Step 3: Ideate
“Idea generation that will provide fuel and source material for getting innovative solutions to your users.”
Making Connections
Time to connect the dots. I took some colored pens and started marking up my user post-it wall. I used red to indicate problems with the app and purple to indicate emotional responses. I also used yellow post-its to write out each emotionally-charged word that was expressed during my interviews. I added those emotions to my wall to help me keep user needs at the center of my design.
Next, I moved the most compelling responses to the left of my wall so I could start to form a clearer understanding of the biggest issues. I analyzed this new group of responses and used an orange marker to circle any themes and patterns that emerged.
Then, I began to brainstorm solutions. I started adding new yellow post-its with as many solutions to my design problem as I could think of.
Sketch
After my wall was completely covered in post-it notes, I moved to my trusty moleskine for some much needed sketching time. I started by writing out each step of the current Kindara onboarding process for both iOS and Android devices. Then I transitioned to storyboarding:
Current Process:
- Ilana is tired of dealing with the side effects of her birth control, but she is not willing to risk getting pregnant right now.
- Ilana looks for more natural approaches to avoiding pregnancy.
- Ilana comes across the Kindara app and is intrigued.
- Ilana downloads the Kindara app. She tries to navigate around and understand how the app works, but fails. Feeling stupid and frustrated, she deletes the app.
Intended Process:
4. Ilana downloads the Kindara app and goes through a quick, informative onboarding process. As she navigates the app, she quickly starts to understand how it works and she feels empowered to take control of her fertility.
Next, I sketched out a rough draft of the IA for my intended onboarding process:
After deciding on the basic flow of information, I went back and added notes on how I wanted users to feel at each interaction. Having both my literal and emotional intentions set was really helpful when I moved to the prototyping stage.
I also created some quick sketches of what I envisioned for each of the touchpoints in my proposed solution.
Step 4: Prototype
“The iterative generation of artifacts intended to answer questions that get you closer to your final solution.”
Paper Prototype
The prototyping stage was my chance to put everything I had learned so far to work. Not as simple as it sounds. I needed to take my user needs, Kindara’s business needs, and my proposed solution and funnel them all into a working, testable product. Piece of cake. 🍰
I started out with a paper prototype, complete with moving iPhone screen and pop-up inserts.
This really helped me visualize the flow of my intended onboarding process. It was also my first attempt at writing copy for each screen. Luckily, I had some more great advice from Joel Marsh to help guide me.
Here are some of my faves:
“Engage your user immediately and then remove any obvious objections they might have.”
“Create rapport by using familiar language and show what the user has in common with your customers.”
“Provide waves of information that lead users from the basics to the details, making sure they understand each step.”
“Ask for commitment and don’t overcomplicate it.”
👆This guy knows what he’s talking about.
This paper prototype was surprisingly enjoyable to create and play around with. It also made it much easier to transition into designing in Sketch.
Digital Prototype — Low Fidelity
Upon completing my paper prototype, I put away my scissors and glue and opened up Sketch. (This was actually my first experience using Sketch, as I had previously only designed in Adobe. I have to say, I really enjoyed it.)
For my low-fidelity prototype, I used a very limited color palette, one typeface, and (almost) no design.
I started with the onboarding screens:
And then moved on to show how new users would interact with the app after they completed the onboarding process:
I also started to flush out the copy a bit more in this step. I thought about how I could use copy (and eventually images) to guide users through what would hopefully be a delightful onboarding experience. One nugget of advice from Springboard’s UX Design Guide, which I read just prior to starting this project, came to mind here:
“Good UX is like good parenting. Guide them, but don’t get in their way. Give them feedback, but don’t make them feel stupid. Set them up for success. And be human.”
I mean, wow. That is some delicious advice.
Before moving on to my high-fidelity prototype, I referred back to my user needs yet again. I wanted to make sure I was advocating for them through my design. So, I came up with a few buzzwords that would help remind me of what my users needed and give a specific purpose to each touchpoint I would design for them.
But more on that later. 🙃
Illustrations
Another design component that was vital to the success of my onboarding flow was illustration. Since my UI was very minimal, I wanted to create some illustrations that would add a pop of color to my design.
The illustrations serve two purposes:
1) They add some playfulness and approachability to what was formerly a minimal, content-rich design.
2) They visually reinforce the copy, strengthening the universality of the app.
I started with the rich purple and turquoise colors from the Kindara logo and added a few others of my own. I made the conscious decision to stray away from “normal” skin tones for a more inclusive design experience.
Digital Prototype — High Fidelity
After I had committed to the basic structure for my onboarding flow, I moved on to flushing out the design by making a high-fidelity prototype. I started by choosing my color palette, fonts, and the voice for my copy.
My main concern was designing a great onboarding experience for my users. My intention for this part of the design was to explain how the app works and show the value that Kindara brings. I wanted new users to finish this onboarding flow feeling excited and confident in their ability to take ownership of their fertility.
Here’s my onboarding flowchart:
As you can see, women who are trying to get pregnant and women who are trying to avoid pregnancy are split up and follow similar, but different paths. By making this separation, I was able to cater the copy and images to each user, making them feel understood and valued.
Oh, and remember those buzzwords from earlier? Here’s a look at the role they played in my final design.
🎉 Excite: Because fertility can be an overwhelming subject for some, I knew I wanted to excite new users right away, the very first time they interacted with the app. To do this, I used energizing copy like “Are you ready to take control of your fertility?” and “Let’s do this” on the launch screen.
👍 Reassure: Because Kindara can be used for two very distinct purposes, I wanted to reassure both women who are trying to conceive (TTC) and women who are trying to avoid pregnancy (TTA) that they are in the right place. To do this, I presented users with two very clear (and equally important) options as buttons, “Get Pregnant” and “Avoid Pregnancy.”
🍷Comfort: Aware that many new users might be stressed out prior to even downloading the app, I wanted to comfort both types of users by showing some empathy. To do this, I used genuine, relatable copy for the TTA and TTC welcome screens. I wanted users to almost feel as though they were talking to a friend.
💁♀️ Inform: After helping new users to feel at home within the app, I wanted to inform them of how Kindara works and illustrate the value that it brings. To do this, I outlined 3 simple steps that users could swipe through at their own pace. For each step, I tried to create illustrations that were as informative as the copy.
👏 Encourage: When users had reached the end of their onboarding flow, I wanted to encourage them to give Kindara a try. To do this, I used some motivating copy like “High Five” and “You’re only one step away from taking control of your fertility.” I also removed anything that might distract or confuse users at this step.
I didn’t want new users to feel abandoned once they created an account, so I designed some concepts for a post-onboarding experience as well. I wanted to provide as much guidance for users as I could without getting in their way. As Sarah Doody says,
“Anticipate people’s needs. Give them what they want, before they ask for it.”
My intent for this part of the design was to reinforce the confidence instilled in the onboarding process via an approachable UI that allows users to effortlessly explore and learn the basics on their own, but also provides resources for those who want to take a deeper dive.
Throughout my design process, I used the Sketch Mirror app via Bohemian Coding to check size, spacing, and overall layout on my phone.
Seeing my design in actual size on my iPhone screen really helped to keep my priorities in check. Using Mirror, I noticed things that I might not have otherwise, like copy that was too lengthy to read comfortably or awkward spacing between elements. I quickly learned that a little bit of extra space can go a long way.
Erik Kennedy gave some awesome advice on whitespace that really helped a sister out:
”Everything you add to your design is a conscious whitespace-removing decision.” [and] “Good, generous white space can make even the messiest interfaces inviting.”
Interactions
Finally, I added some links, hotspots, and interactions to my design via the InVision Craft extension for Sketch. I kept the interactions fairly simple, opting for well-known design patterns to allow the content to shine. It was nice to be able to test out my interactions via InVision and even download a desktop prototype to view.
If you’d like to test out the final prototype for yourself (and see it in higher quality), click here. If not, please enjoy these (slightly blurred) gifs.
TTA Onboarding Prototype:
TTC Onboarding Prototype:
Post-Onboarding Prototype:
Step 5: Test
The final step in this process would be to test out my prototype with some users and iterate my design based on their feedback. Though I have not yet completed this step, I do feel like I was able get some practice with testing during my user interviews at the start of this project. So for now, I’ll just end here.
Conclusions
Upon completing this project, (and most certainly after writing this post) I’m amazed by how much I’ve learned. I made several mistakes and there are surely things I would go back and change, but overall I am really happy with where things are now.
I can’t possibly wrap things up without giving a shout out to all the UXers, designers, developers, and mentors who, knowingly or unknowingly, supported me throughout this process. You guys rock. ❤️
- Jake Brokaw: Designer, developer, BFF, etc.
- Jon Izquierdo: Designer/developer + great advice giver
- Joel Marsh: Author of The Hipper Element + the UX Crash Course
- Erik Kennedy: UI designer + author of 7 Rules for Creating Gorgeous UI
- Sarah Doody: UX designer + author of The UX Notebook
- Chris Liu + Jonathan Shariat: Hosts of The Design Review podcast
- Wesley Noble: Host of The UX Intern podcast
- Stanford d.school: Creators of An Introduction to Design Thinking
- Springboard: Creators of A Beginner’s Guide to Careers in UX Design
- IDEO: Creators of Design Kit
- Scott Klemmer: Teacher of Coursera’s Human-Centered Design course
- Lis Hubert: Teacher of Treehouse’s UX Basics course
- Sarah Parmenter:Teacher of Treehouse’s Mobile App Design for iOS course
- Christopher Downer: Teacher of Treehouse’s Sketch Basics course
- Tulsa UX Meetup: Local UX group led by one cool cat
- My amazing users: Tiffany, Patrice, Nicole, and Tara
- and of course, Kindara
💕 If you were even slightly entertained by this post, please consider showing some love by 👏👏👏 or sharing it on your favorite social platform. Bonus points if you can spare any advice for this UX newbie in the comment section below! 🤓
This story is published in Noteworthy, where 10,000+ readers come every day to learn about the people & ideas shaping the products we love.
Follow our publication to see more product & design stories featured by the Journal team.
