Over the last couple of years, quite a few of our friends have gotten pregnant, so pregnancy has become something we talk about often. And because my wife and I build apps, we found ourselves having lots of discussions with our friends about how disappointing most pregnancy apps are.
Some of the apps we checked out were too technical and complex. Others were the same—stock renders repackaged in a new interface. Most of them were just plain ugly.
Just for fun, we did a Dribbble shot to show our friends how we would make a better pregnancy app.
They loved it! They wound up convincing us to actually make the app.
The idea was to give parents insightful information in a beautiful package. We wanted to get rid of the stock 3D renders and cliches almost all pregnancy apps use.
User testing
We asked our friends to ask their pregnant friends to be a part of our initial user testing group and wound up with 28 women who were eager to help.
Related: How to run data-driven usability testing sessions
We learned that the app had to be powerful, but also very easy to use. Some of the test users weren’t tech-savvy or even interested in apps in the first place. They all loved that they could have their photos from the pregnancy all in one place. The weekly pregnancy update was a plus, but not the main focus.
“You can’t build a great app without first talking to your users.”
Our user testing sessions also taught us that users didn’t want to read boring, long articles with lots of medical jargon. The information had to be condensed to the essentials and presented in a beautiful way. We needed to keep in mind that they were regularly talking to their doctors, so a lot of the information could wind up feeling redundant.
Above all, they just wanted the app to feel personal.
Designing the UI
We didn’t want the app interface to be dark or too technical. We wanted warm tones and gradients almost from the start. After testing a couple of pink gradient varieties, we ended up with an orange-pink gradient. That gradient became a part of the brand—it was warm and friendly.
One of our biggest goals visually was for the colors to really pop and to be recognizable. We asked our developers to create a simple, 1-screen app with the gradients generated in code. Then we tested it on actual devices and found out that some older Android phones displayed very muted colors.
Related: 6 tasty ways for designers and developers to collaborate better
What was also interesting is that when we took screenshots from the gradients and used color pickers, the gradient range colors were different than the ones in code. Both iOS and Android were displaying them their own way.
We tweaked the gradients to be a perfect mix that looked great on most phones.
Making the app memorable
To make the app memorable, we had to really nail the illustrations and 3D renders. The first experience would be virtually built around them. We went through a number of sketches and ended up with this cute little guy:
After almost unanimous approval from our test group, we moved on to designing screens. We wanted to keep the design as simple as possible, and after some pen and paper sketches of the flow, we went straight into the graphic design with Photoshop and then quickly built it for iOS. It was a typical MVP that we wanted to test out on real users before we decided on the final direction and features.
We launched Babynote in late July 2016.
Right away, we noticed that people loved the visuals. But there were some problems.
The main concern—that affected about half of our initial 1500 users—was the week number that tells mothers how far along they are.
The way of calculating the weeks was based on a textbook style calculation called Naegele’s method. Some of our users reported getting a week ahead of what their doctor said. This resulted in plenty of comments—and even anger.
At least we were getting a strong reaction.
The problem was human perception. If you’re on day 3 of week 7, does it mean you’re still in week 7—or did week 7 end and it was already the third day of week 8? Half of our users thought the former, the other half the latter.
Making everyone happy
After a long debate—and reading and replying to comments—we came up with a solution. The users can now also manually set the week and day they’re in. Or if the calculated week was okay, they could still use the wizard.
We did one more test with our group just to make sure, and the new way was confirmed. This solved the problem almost overnight. Negative comments stopped, and we started getting significantly higher app store ratings. (Currently, we have a 4.8 average.)
Version 2.0
The old Photoshop files served as a basic template as we decided to start from scratch using Sketch and InVision. We saw a huge improvement in the whole design process—both Sketch and InVision saved us a ton of time because it was way easier and faster to design and discuss individual screens.
We made notes and posted our thoughts and ideas in comments. Then we tweaked the flow because InVision helped us find some problems both big and small. Some of the UX and flow problems were also reported by the developers.
The idea for version 2.0 was to make it even more personal. Your photos and videos within each of the “informational” parts of the pregnancy. Think of it as your personal pregnancy timeline.
We took the initial InVision prototype on our phone to the test group. They played with the prototype and we observed, and the main feedback we got was about navigational confusions. There was a “now” tab and a timeline tab, from which you can either go to the current week (like in “now”) or any other week. The confusion was that the now screen looked the same as any history screen.
We came back with our user comments and started thinking about a better approach. How can we make the timeline the front-and-center part of the experience? Can we move some of the other, less important screens out of the way?
We did some internal testing first. That led to a more radical approach of removing the tabs entirely so that the timeline could be the main element. From this screen you can get to both your own content and the weekly information, so it served as a hub—the central point of your pregnancy. The timeline became a mix of weekly information and your personal content.
After updating the prototype, we did another round of testing. This time the majority of users quickly understood the new structure. Even though it was so simple, it took us a while to get there.
The next step was about planning. We used Craft to finish the prototype and synced everything to InVision, then we made sure the developers understood the flows. The coding started, and all assets and questions were moved to InVision as well. Since we work remotely, it was a perfect way for everyone to stay on the same page.
It was all going according to plan—our developers started building the functionalities, and we focused on creating micro-interactions.
With the premise of the app being friendly, warm, and “soft,” we wanted a bouncy feel to some of the UI elements. That meant animating the buttons, toggles, and onboarding icons.
The 2.0 version development took almost 6 months. Some of our initial test users already gave birth to beautiful, healthy babies. We added tracking events to the new app functionalities. People were sharing from the app twice as often as before. They were also on average adding 2.5 photos each week.
The future
The app has been downloaded over 12,000 times for both Android and iOS. Apple has also noticed the app and included it on their Medical and Health and Fitness featured lists for pregnancy apps.
What we’ve learned is that when a product is pretty, users are more likely to be engaged by it. Pregnancy is emotional—users don’t want medical journals, and they aren’t happy with ugly 3D renders. They want their pregnancy to be beautiful, as it is indeed a wonderful and miraculous experience. This was the main reason for creating Babynote.
Our users are happy, and so are we—for now. We believe that a product is never done and requires constant engagement from the authors. So we’ll keep improving Babynote—we want it to be the best and most friendly pregnancy companion on the market.
Want to share a recent design project on the InVision Blog? Get in touch.
Diana Malewicz is the art director and lead UI designer with 7 years experience in UX and design. She co-founded HYPE4 and is the driving force behind Babynote and Aureo apps.
Michal Malewicz is the CEO and UX designer that started doing web design work back in 1999. With his wife Diana, he co-founded the HYPE4 agency of 9 people—designing and developing digital products for medtech, fintech, and startups.
