Dump The Bump Case Study
The app was developed for new and existing mothers who are looking to lose weight after giving birth. It was built by developers at California State University, Fullerton, and redesigned by designers. Our team and I primarily focused on the breastfeeding section as well as a different section of our choice, in which I chose to focus on the mood topic.
Year: 2021
Duration: 2 Months
Tools Used: Adobe XD, Miro
Process Overview
- User Personas
- UX/UI Analysis
- Wireframes
- Color
- Typography
- Prototype
- Overall Sitemap
- Breastfeeding and Mood Site Map
- User Flows
User Personas
UI Analysis
In this chart, I compared the user interfaces of four apps. Many apps used orange for the interface, but the colors varied depending on the part of the app. While some baby apps like Baby Daybook and Baby Tracker - Newborn Log have more rounded shapes, others like Baby Tracker by Fitness and Sprout Baby have more angular shapes. The baby apps I researched used a pictorial logomark in most cases and the majority of apps I researched are sans-serif. According to my analysis, three of the apps used horizontal space to display their information, but some used center graphics as well.
UX Analysis
In this chart, I compared the user experiences of four apps. These apps featured an onboarding process for new moms, which included things like the mom's name, date of birth, and the baby's name and date of birth, as well as his or her gender. Baby apps like Baby Daybook and Baby Tracker - Newborn Log have side scrolling menus for their trackers or information, while others like Baby Tracker don't. They all have a bottom navigation bar. Sprout Baby is the only one to integrate a mood tracker, while most other companies include a diaper tracker, feeding tracker, sleeping tracker, and a development tracker. Almost all of the baby apps I researched included a statistics/history section that would allow moms to view their babies' growth over time, as well as the ability to take photos of their babies to savor the moment, and a premium feature that would unlock additional features. Last but not least, only one app provided help and resources for moms who were new or existing.
Color & Type
For this app, I decided to choose colors that represented motherhood. I used mostly light purple while creating the app, as it is my favorite color. Other colors are incorporated in icons. The typeface I chose is Montserrat, which is visually pleasing and easy to read on a dark background.
Sitemap
Here is the overall sitemap for the app. All the highlighted blue boxes are the parts where my team and I worked on. Our main focus was to expand the breastfeeding page because there was a lack of information, tools, and resources for mothers. Our breastfeeding section includes alarms, a bottle-feeding schedule and tracker, as well as information and guides about breastfeeding. With the mood page, I included journal entries, an updated mood tracker, and a helpline for moms in crisis or need.
This sitemap shows the overall view of the breastfeeding tab. We included a breastfeeding/bottle-feeding tracker and schedule, alarms to remind mothers to feed their newborn, and information/guides for mothers on how to breastfeed their babies.
This sitemap displays the overall mood tab view. The statistics include the mothers' mood log. Mothers can view their mood logs on a daily, weekly, or monthly basis. In addition, they have the option to write a journal entry and to view past entries. For mothers who need mental health assistance, OC's Warmline or 911 are available.
User Flows
A new mom is registering an account in this user flow. They are looking for a breastfeeding tracking tool and scheduler. They enter both her daily and weekly feeding schedules into the app.
A new mom is registering an account in this user flow. They are looking for a mood tracker tool as well as a place to log journal entries. The user first enters their mood, then writes a journal entry. Seeing that the app has a calling feature, they decide to call OC's Warmline.
Wireframes
The following screens illustrate the different stages of the onboarding process. The first screen is where the user first lands, greeted by the logomark.
The second screen allows the user to register for an account or choose to log in.
The third screen is where a new user will create their account.
The fourth screen displays the login screen for the user.
In these pages you will find breastfeeding pages. Initially, the user is directed to the breastfeeding homepage, where they can choose which breast they are feeding from or bottle icon to begin tracking their feeding schedule.
The second screen allows the user to schedule a feeding, as well as view feeding statistics by day, week, or month.
The third screen shows the overall view of the alarm/schedule system in greater detail.
The fourth screen gives users the opportunity to view videos or articles to assist them in raising their infants.
These pages feature mood logs/journals. Initially, the user is directed to the mood homepage, where they can select which emoji best fits their mood. In addition, they can post a journal entry or get in touch with a support line.
The second screen lets the user write a daily journal entry.
The third screen informs the user that their entry has been successfully submitted.
The fourth screen provides users with the option of viewing their mood by day, week, or month.
These pages provide a closer look at the support line. The first page of the site gives the user the option of contacting Orange County's Warmline or, if needed, emergency services.
The second page shows Orange County's Warmline call.
The third page shows the view of an emergency service call.
