Helping parents ensure healthy baby growth

Mockup of the baby development app

HaloBeba

HaloBeba is a go-to support center for early child care run by public health institutions and UNICEF in Serbia. Their 24/7 call center addresses parents’ urgent concerns, while their website offers articles on baby development and wellbeing.

Users

Many parents throughout the country see HaloBeba as a trusted advisor in the challenging times of early parenthood. User base was about to grow further as the client was preparing to invite all new mothers to use the service we were creating.

Goal

The goal was to help parents track baby’s growth and development, and access personalized resources. The solution I worked on was a baby journal and repository of articles in the form of a mobile app.

My role

I was part of a UX team of two at Alpha Design Studio, a boutique design agency. The team lead (Milovan Jovicic) was responsible for product design and communication with stakeholders. In close collaboration with him, I was in charge of:

Process

Discovery & initial ideation

I joined the project after the team lead made low-fidelity wireframes based on interviews with stakeholders and client’s research.

I conducted a competitive analysis to understand the unique value of the service we were designing, and then worked with the team lead to refine information architecture and user flows.

We didn’t create personas per se but whenever we brainstormed an issue, we drew on the experience of our friends and family who recently became parents and asked ourselves how they would react.

Whiteboard sketches of information architecture

Sketching on the whiteboard helps us see all the content and reorganize it quickly as we brainstorm.

User flow diagram

A user flow helps us identify the actions and paths people can take in the app.

Designing the interface

We designed one cross-platform UI due to budget and time constraints. I relied on iOS patterns but kept the visual language simple to make it easy to use on both iOS and Android.

As the UI evolved, I created a design system with a library of styles and UI patterns to keep everything consistent and scalable.

Preview of UI components

Components from a UI kit helped me quickly set up screen blueprints.

Iterations

I worked in 1- to 2-week sprints and designed high-fidelity prototypes for presentations to the client and domain experts. The polished interface helped stakeholders imagine the final experience and give us valuable feedback.

Managing research constraints

In this project I didn’t have the opportunity to conduct usability testing so instead, I suggested creating guidelines for future tests. We outlined scenarios and best practices and provided them to the client.

We also designed in-app surveys and feedback forms that give client the opportunity to inexpensively gather feedback in the future.

Hand-off

After the design phase was completed, I prepared a detailed hand-off for developers, including inspectable prototypes, flow diagrams and feature lists.

Preview of flow diagrams

Flow diagrams show all elements on a screen and their interaction.

Final touches

After we completed the project, I continued to work on the design as a side project and translated the original text from Serbian to English. The final deliverables you're seeing here are my personal work.

TL;DR

Short on time?

Jump to final design

Focus of my work:
Crafting the baby journal

Challenge 1 • Setting the scene

The idea of the journal was that parents could track baby’s growth and doctor’s visits. These two sections were part of the same screen and my goal was to visually distinguish them so people could instantly notice their different focus.

Mockup of initial Baby journal screen including Growth and Doctor's visits

Challenge 2 • Expanding the scope

When my team realized the journal started to focus on past data, we shifted to a more forward-looking direction.

I designed a section on development milestones to prepare parents for baby’s development and let them assess changes such as sitting up or eating solid food.

Mockup of Development milestones screen

I also worked with the team lead to list all future vaccines and offer parents timely information on this sensitive matter.

Mockups of Vaccines screens

Challenge 3 • From prescription to support

The team lead and I worked together to design red flag states for when baby’s data diverged from average values. After we learned from domain experts that parents were already very concerned for the well-being of their children, I instantly realized how these red flags would add to their anxiety. I went on to create messages that simply provide facts and give a heads up.

Preview of growth states before and after changes

Fast forward to my final designI again redesigned these states and removed all growth labels. My goal was to 1) acknowledge each baby's unique pace of growth and 2) empower parents to assess the situation themselves based on informed insight.

Preview of final growth states

Challenge 4 • Consistency

Finally, I made the journal sections more consistent so people could find information they need easily. The distinctions between sections were valuable in the beginning, but in the final, more complex journal they might create cognitive load and lower adoption rates. My goal was to avoid this scenario by providing a more intuitive experience.

Mockups of Doctor's visits screens
Mockups of Growth screens
Mockups of Vaccines screens
Mockups of Development milestones screens

Going one step further

After the project, I refined the design further as a personal challenge. I had two goals: 1) take the design from done to polished and 2) reflect the new brand identity. The client launched their new website towards the end of my team's work, which left us no time to adapt. I took this as an opportunity to grow my mobile design skills.

Screenshots of client's new website

Client’s new website featured pastel colors and playful typography.

Final design

Baby journal

Mockups of Baby journal screens

Primary tab bar at the bottom allows navigation between areas of the entire app.
Secondary tab bar
 at the top enables switching between sections of the journal.

Articles

Mockups of Articles screens

When baby reaches an age of important changes, custom articles show on top with handy advice.

Breadcrumbs help people find their way arond easily when they’re reading and exploring articles.

When baby reaches an age of important changes, custom articles show on top with handy advice.

Breadcrumbs help people find their way arond easily when they’re reading and exploring articles.

Final prototype

Want to check out the ins and outs of the app?

Go to prototype

Design system

Along with the new design, I updated and expanded the design system.

Design system section on colorsDesign system section on typographyDesign system section on assetsDesign system section on UI components

Outcomes

My work helped HaloBeba successfully expand their role of respected advisor to trusted personal assistant. The app was expected to launch in 2020 as a key component in client’s venture into expanding services and a growing user base.

Lessons learned

In hindsight, I would advocate for a clearer insight into research and earlier usability testing. The research would help us understand users' motivations and make sure we're designing the right thing. Usability testing would help us ensure we're designing the right way before we start building the product.

Finalizing the design on my own helped me grow as a designer. Improving user flows honed my problem-solving skills. Applying visual and mobile design patterns I learned in Learn UI Design course helped me gain greater confidence in my visual design skills.

Other projects

Mobile and desktop mockups of insurance ecommerce website

Reimagining insurance shopping

Read case study
Conceptual illustration of project management app

Evolving traditional workflows

Read case study