UX & UI case study
Parents2Be
Web app for expecting parents
The present project explores the needs of expecting parents who want to know more about their new role in life and want to be better prepared for parenting. The goal of this project was to build a mobile web app that will empower, educate and assist parants2be.
Project overview
Background
The present project has been created as a part of the UX course at CareerFoundry that I have attended. It showcases my understanding of UX & UI design processes and the application of designer tools.
Duration: December 2020 - July 2021, 7 months
My role
UX researcher
UX designer
UI designer
Tools
Figma
Miro
UsabilityHub
OptimalSort
Balsamiq
Pen and paper
Problem
Expecting parents are concerned about their new role in life and look for reliable and trustworthy sources of information. They want up-to-date and reliable advice quickly without feeling overwhelmed by information clutter and doubt.
Solution
A web app that offers an information search experience for expecting parents and enables them to find credible information and tools about pregnancy in one soothing and safe place.
Design process
1/5
User research
It is important to talk to users early in the design process
I wanted to understand the needs, concerns, and feelings of expecting parents to get to the core of what triggers their worries and what kind of information they need.
User interviews and online surveys with expecting parents and parents of newborns helped me get a better understanding of the problem.
29
Online survey participants
4
User interviews
User research focus
Behaviour
What kind of information are users looking for?
What information are users missing from their current sources?
How do users feel as expecting parents?
What helps users to overcome their concerns about parenting?
What do users expect from a partner?
Experiences
What is users’ current knowledge about parenting?
What challenges do users face?
Where do they get information regarding pregnancy and parenting?
What do users think about mindfulness during pregnancy?
Values
What are users the most important values during pregnancy and labor experience?
How can I make my product meaningful and helpful for expecting parents?
What would users enjoy about my app and how would I make my app apealing?
Exploring my findings
Affinity mapping
I created affinity mapping to identify patterns and correlations from the feedback. Based on the results I grouped the findings into 3 categories:
behaviors and attitudes
goals and needs
frustrations and challenges
Theme analysis
Once the interview data was organized in the affinity map, I was able to:
observe relations between individual user needs
isolate features and their requirements
Key findings
Inform
Expecting parents would like to know more about relaxing techniques, birthing options, and ways to support their partner.
82% rank "prenatal weekly classes" as essential.
Personalize
Expecting parents need an app that they can personalize for their own usage.
Track
Expecting mothers usually pay more attention to their health and change their lifestyles. They want to monitor their health.
Expecting parents are excited about tracking the progress of pregnancy and baby development over weeks.
2/5
User personas, journeys & flows
Personas
I created two user personas that encapsulated my target audience which I gathered from data obtained during the research phase. To ensure I was solving the right problems, I was constantly referring back to the personas throughout the project.
Sophie
Wants to:
clarify information about pregnancy
calm down in a soothing and safe place
share information with partner
monitor her health
“I want to know my options and consider them before going into labour.””
David
Wants to:
get expert-based information quickly
stay informed about the progress of pregnancy
be supportive to his partner
stay involved
“I want to support and encourage my partner during pregnancy and labour.”
User journey
I used user journey mapping to uncover areas of opportunities for potential improvement of user experience when using app. I analyzed each step and saw where the opportunity lies and how the user experience could be optimized.
User flow
With my two personas and their journeys in mind, I started creating user flows that showed how a user would move from an entry point to success criteria. The aim of this exercise was to drill down into the easiest possible route for a user to complete a task.
3/5
Wireframes & usability testing
Designing solutions
Having a good idea about the ideal experience for my users, I moved on to designing solutions, evaluating them, and iterating based on improvement opportunities. I based my initial design solutions on the findings I uncovered during user research.
To evaluate the design solutions I’ve conducted 5 remote usability tests.
Sketches
First wireframes were hand-drawn sketches with pen and paper, which allowed me a quicker and more organic ideation. These made me easily notice if there was something missing and I could improve the design fast.
Low, mid and high fidelity wireframes
With each iteration, I added more detail to the design and reevaluated my design decisions.
Usability testing
Upon reaching the level of high fidelity prototype, I started to produce a usability plan and recruited 5 participants for a Remote moderated usability test. Each participant was assigned a task that relate to success metrics. The results supported my design decisions that later I explain in more detail.
I prepared a test plan and test script to ensure the usability test would meet the needs of my project.
Steps taken:
test plan and test script
5 remote usability tests
affinity map of user feedback
Rainbow spreadsheet exercise
prioritization of fixes based on the severity of errors
Results helped me
Uncover problems
in the design
Discover opportunities
to improve the design
Learn about the users
behaviour and preferences
4/5
Design decisions and iterations
Landing page iterations
Focus
get a feeling of a pleasant, trustworthy place
understand what the app is about by a glance
quickly starts with the app
Final design as an informative and pleasant experience
filled with big visuals and content
guides users through the experience in an intuitive way
1. Add pregnancy-related text and pictures
replace the word ‘Body’ with ‘Baby’ in the value proposition
add pictures that visually associate words ‘baby’, ‘yourself’, and ‘partner’
2. Switch fonds of the value proposition
‘Stay connected’ is a more important part than the rest of the sentence
3. Let the visual speak
increase the number of content-related images
reduces image transparency
Dashboard iterations
Focus
provide most important information
scannable and balanced screen
Final design as an informative starting point for navigation
easy and quick wayfinding
personalized and informative content
1. Improve the scan ability
Split personal ‘due date’ data and ‘pregnancy content’ into two cards
2. Provide key information clearly
Instead of needing to click to a new screen, display some information about this week directly in this box
3. Content should take priority over headlines
reduce the font size of the titles, content should be the priority
Weight tracker iterations
Focus
provide most important weight-related information
scannable and balanced screen without cognitive clutter
Final design as an informative and pleasant experience
personalized and informative content
1. The most important information for the user
is “You’re good.”
put BMI scale closer to “You’re good.” The information they provide is connected.
2. Chart should be simple and informative
reduce text and speak with visuals
provide only for user most important information
Logo iterations
I wanted the logo to be minimalistic, simple, and recognizable.
Name
It’s always tough coming up with a good name for an app. The name needed to be short, easy to say and spell, and also needed to convey what the actual app was for. After throwing a bunch of ideas around, I combined the words “parents” and number 2 to come up with “Parents2Be”.
Design
I started sketching out some ideas by mixing and matching different symbols. I liked the idea of combining a parent’s and baby shape with a love heart.
Parents2Be design language
To make sure that I delivered a consistent, immersive experience for expecting parents, I created Parents2Be’s design language.
You can view the complete design language below:
5/5
Mockups
Fresh, light style inspired by a nature
Once I tested out all usability mistakes, I started designing the final screens in Figma. I followed a fresh, light style inspired by a nature.
Learnings
Don’t forget the user
It can be easy to forget the main needs of users during the lengthy design process and start applying your own preferences to the features.
Solution: print out the user personas and have them handy.
Negative space is a friend
While designing primarily for mobile the scarcity of space might give the tendency to try and squeeze in as much as possible within the viewport.
Solution: give the design more air through negative space. It makes the information more accessible and creates a calmer, more relaxed experience for the user.
Don’t get attached to your design, iteration is key
It can be difficult to stay objective about your design and accept constructive feedback.
Solution: keep in mind that there is always room for improvement and each iteration will only make the design better.
Final prototype
You can try out the final prototype here!
Note that this prototype showcases only parts of the user experience and is not a fully developed product. In case you get stuck, simply click anywhere on the prototype and the interactive elements will be highlighted in blue.
Did you like Parents2Be?
I hope that you enjoyed the Parents2Be case study and learned more about my process.
Let’s talk about how we can work together!