Contact
‘Sup
Clients
Portfolio
About
Home
eye icon
Project 5

Visual Design for expecting moms gets a bump up

client icon black
Client: Tap Nursery
Tap Nursery is a mobile app for under-served expecting mothers to get all the resources and information they need as they navigate the process of pregnancy, child birth, and more. Here’s how I helped deliver a few special moments of my own.
product designer ux ui screenshotpink color swatchblue color swatch
my role icon black
My Role: Onboarding UI, 3D
project type icon black
Project Type: iOS Application

Visual Design for expecting moms gets a bump up

client icon black
Client: Tap Nursery
my role icon black
My Role: Onboarding UI, 3D
project type icon black
Project Type: iOS Application
product designer ux ui screenshot
Tap Nursery is a mobile app for under-served expecting mothers to get all the resources and information they need as they navigate the process of pregnancy, child birth, and more. Here’s how I helped deliver a few special moments of my own.
Humanistic user interface design that radiates character.
While it’s no secret that healthcare experiences tend to be wholly clinical looking, bucking this trend was one of the primary tasks the client wanted me to address. The experience had to reflect the joyous process of becoming a parent. My role in this project was to level-up the visual design of a few key areas. I provided UI for onboarding, 3D illustration, and established a color palette by refining the client’s proposed color palette.
product designer ux ui screenshot
App Detail: Visual design of onboarding screen.
3d rendering of fetus
App Detail: 3D illustration.

kicking onboarding up a notch

With Tap Nursery, expecting moms are first presented with two onboarding screens. I handled the visual design.
Users can swipe through the paginated information accompanied with the 3D illustrations I also created. The illustrations are in a carousel of their own, cycling through each one to give a greater glimpse of the categories at large.
product designer ux ui screenshot

Tapping for Two

Tap Nursery divides providers into color-coded categories, each presented in a modular format. I implemented a color palette—taking care to ensure each color was distinct, but worked well in the broader family of hues (more on this later.)
product designer ux ui screenshot
Modular
After selecting the provider category (screen 1), moms see a modal that contains basic details about the type of provider they’re interested in (screen 2,) along with a highly visual representation of the category.
Informative
I designing the UX and UI of the modal to give moms a clear understanding of how colors are used throughout the experience; a label indicates the color, along with a link to learn more about how Tap Nursery uses color at large.
Bespoke
I then used the color pink to signal app-wide interactions—for example, the primary call to action—so as not to be confused with a provider category.

Creating the 3D illustrations was fun a fun task

Creating the 3D illustrations and animating each of them was a fun task. I suggested a range of icons for each category. One challenge was how to represent each provider type without showing a person, character, avatar, etc. Instead I opted for an object associated with each type. This worked well as it also gave me an opportunity to create compelling icongraphy and animation.
doorbell 3d rendering
Doulas: They’re known for making house calls. A doorbell was a no-brainer.
drops of milk 3d rendering
Lactation: Drops of milk reflect the human body without being overt.
Midwives: A nurse hat for midwives was the perfect fit. Shown animated.
fetus growing animation
Pediatricians: This one was a little more tricky. I created a simplistic fetus and animated it growing larger over time.

Delivering the color palette

Tap Nursery had a set of colors they wanted to use as a starting point. The challenge here was to rework them such that each was unique enough not to be confused with another.
For example, scarlet and red out of context may be considered similar hues. I pushed the vibrance and hue of this pair as far apart as possible while staying true to their respective color. Similarly, blue, turquoise, and indigo are often considered analogous. An icy blue, a soft blue, and a dark blue help separate these three. The names of each of the colors was pre-selected by the client and had accompanying color-theory literature for mom’s to reference inside the app.
vibrant color palette
product designer ux ui screenshot
product designer ux ui screenshot

What worked, and what didn’t

Design
Tap Nursery’s onboarding experience is now fit for expecting moms with up-to-date visual design, bespoke 3D illustration, and a bold color palette. But, as with any project, there are always lessons to learn and improvements to make.
Compliance
These days I always recommend striving for accessibility, especially when it comes to color contrast. Based on the project requirements, this experience falls outside of WCAG guidelines, but as the app evolves and gains traction, greater accessibility will be even more necessary.

View the prototype

arrow
Up Next

Fresh Thinking for an Indoor Farming Dashboard

arrow
©2005-2024