The design of the ‘Why is my Baby Crying?’ app is part of the Coursera Capstone Project for the Interactive Design Certification

WHY IS MY BABY CRYING?

An app for first time moms

My wife and I became first time parents around a year and a half ago. While looking for inspiration and on the first stages of the ideation process, it was clear to me that any need I wanted to solve in a shape of a digital product would be inexorably related to our beautiful but at times stressful experience with our baby.

Definition of the Point of View

Based on some observations and interviews conducted to some friends and acquaintances with babies, I was able to narrow down the main POV to be based on the need of first time moms (and dads) to optimize the time they spend with their baby by leveraging Artificial Intelligence to solve repetitive and stressful tasks such as guessing the reason why the baby’s crying at any given time.

Inspiration board used in the ideation stage of the project

A few iterations later I came up with a more synthesized version of the POV copy which is action driven and was proved to be highly effective in the User Testing stage of the project:

Imagine that you are a sleep deprived first time mom and you are trying to find out why your baby is crying…

Storyboards and Prototypes

After having clear the POV, the next step in the project was start creating some user cases and early prototypes that showed how the app should perform in its real context. The core functionality of this app is to be able to record and identify the reasons why a baby is crying either by using Artificial Intelligence –hypothetical case– or by comparing the baby’s cry record to a database with thousand or millions of other recordings to find a common pattern and identify the reasons of the crying.

Storyboard screenshot for the app

Even though the prototypes were at an early stage, they conveyed the key functionalities of the app based on the efficiency and ease of use. After some iterations and polishing, these initial screens were part of the final design solution.

Early paper prototypes

Heuristics

Being receptive to critique and open to change is part to any design process nowadays. By applying a comprehensive Heuristic Evaluation to the prototypes and receiving some feedback from peers I was able to identify the main pain points on the current prototype design and made significant changes that definitely improved the usability and flow of the app.

Skeleton and Functional Prototype

The first polished iteration of the prototype was created based on the aforementioned feedback from peers. A name, logo and color scheme were created for the app. This first iteration also included some functionality recommendations such as simplifying and provide visual cues of the steps involved in the recording process. As complementary features, the possibility of saving the cry in different audio file formats, sharing on social media and see a cry history were added too.

Screen sequence of the first high fidelity prototype

In Person Prototype Testing

Once the screen designs were completed, an interactive prototype was built using MarvelApp, which allows to add hotspots and transitions that mimic the most common interaction patterns on mobile devices. Having class peers and friends take a look and interact with a High Fidelity prototype brought me mix feelings. In one hand, having compliments about how polished the design was and how close to a real app it felt was really great; on the other hand, I started noticing some comments from peers about a lack of interaction and an unnecessary complexity in the main navigation. Also, it looked like the use of dummy text was annoying some people.

After acknowledging that this prototype was not meeting the expectation of most of the in person testers, I decided to revamp the design and made some drastic changes to the structure and visual design of the app right before the user testing assignment.

Final redesign of the High Fidelity prototype

The main changes done in the redesign of the interface were:

• Moving the main menu to the top section of the screen and have all the extra functionality consolidated in one panel, right under the hamburger icon.
• Make more cohesive the recording screen by showing the progress of it in one circled element along with the duration and the sound waves.
• On the cry recording results screen, the icon showing the main reason of the crying was moved on top of the screen and right after that were placed the icons associated with actions the user can make such as replay, share, export and delete. An edit icon was created to facilitate to the user the action of renaming the audio file that was just recorded.
• On the cry recording results screen, a visual cue was created so the user knows there is more scrollable content right below the icons.
• A pop up screen was created so the user can pick from different audio format to export to.
• On the settings screen, the sliders were made more thumb friendly and plus(+) and minus(–) icons were added to clearly indicate the increase and decrease direction of the slider. Under the time recording slider, a number was added right below the slider that visually indicates the duration of the recording in seconds.
• FAQs screen was created using an expand/collapse functionality.
• A comprehensive search within the app functionality was included.
• Confirmation pop-up screens were added after each critical action (i.e. deleting an audio file, save settings, renaming an audio file, etc)

User Testing

With the final redesign in place, it was very satisfying to see completely random people interacting and understanding the main purpose and functionality of the app. Most of the testers were able to say at a glance the main purpose of the app and some of them praised the idea and ease of use. There are still some details and minor issues to be fixed for sure but overall I think the app could solve a problem and I’m looking forward to make it fully functional in the near future.

A prototype of the app can be seen here:

https://marvelapp.com/90c8a96

or you can scan the QR code below and preview it on your mobile device.