baby buddy

user interface prototype - spring 2016

created for

6.813 User Interface Design & Implementation Class

tools used

HTML, JavaScript/jQuery, CSS


"Best Aesthetic" Class Award

view prototype   >

Baby Buddy is a prototype of a web application to help manage aspects of life while pregnant. Working in a team of four for MIT's User Interface Design and Implementation class, my group focused on a user-centered design process, designed around a problem for a target population, developed several iterations of prototypes, and performed user tests and heuristic evaluations. We designed Baby Buddy for individuals going through pregnancy to have a consolidated way of managing their lifestyle throughout pregnancy, by designing tools for logging daily thoughts, tracking aspects of health, and keeping tabs on important reminders and to-dos.

the problem

Many health tracking apps on the market end up marginalizing certain user populations - notable examples include those that exclude women, often because designers/developers make stereotypical assumptions about their user population, or neglect certain demographics entirely. We wanted to use this chance to create a health tracking app directed towards women (or rather, individuals going through pregnancy) to help manage their life in light of new challenges.


We found that those we interviewed wanted to track their weight/diet, keep track of important reminders set by their doctors, and get quick information about their baby's development through their stage of pregnancy. We also wanted to consider a way for individuals to share selected aspects of their health information with their partners or relevant loved ones, in order to keep them on track with their health.


We wanted a playful color palette and font choice that was friendly and playful, but did not fall into the category of a stereotypically pink-purple interface of many current health-tracking apps designed for women. Our group generated several wireframes to communicate our problem and tasks - we ended up deciding on a dashboard layout as a way to glean daily information at a glance. The user's name would greet them at the top, followed by quick bulleted information about their current stage of pregnancy. We offered options to track aspects of their health for the day, including their mood, weight, and calorie intake, as well as panels for reminders and to-dos, to record and recollect key recommendations set by their doctors.


paper prototype and digital prototype

Our very first prototype consisted of a paper representation of our interface, outlining the interactions required for our key tasks: entering the interface, logging weight/mood/calories, and adding new reminders and to-dos.

Eventually we used the feedback given by our user testing sessions from paper prototyping to make improvements in our digital prototypes, implementing our design using HTML, CSS, JavaScript, and several JavaScript/jQuery plugins into a static, high-fidelity in look and feel and low-fidelity in depth web-interface.

The first iteration of our digital prototype - we created separate visual sections for each task.

Our final iteration of our digital prototype - we made slight modifications to typography and color palette, as well as designed some of our UI elements to be more explicitly interactive.

my contributions

I contributed heavily on designing the key look and feel of the user interface, choosing a color scheme and font combination, illustrating graphics used throughout the interface, and refining subtle interactions like hovering to capture the playful feel that we wanted for our application. I then implemented these design choices through global CSS style classes in order to modularize the styles for use throughout the interface.

I also worked in depth on a journaling section as part of the "track your thoughts" feature. I wanted to design a diary which made it easy to jot down current thoughts while tracing back to previous ones. I implemented the journal shallowly on the frontend, simulating a user's diary being added to the webpage by rendering it as a new element on the screen, and simulating journal editing as modifying the content within the element.

final considerations

Although we presented our final version of the prototype at the end of the semester, there were still a lot of areas we could have improved our process. For example, all of the women we interviewed were Caucasian, professional, and generally tech-savvy women working within the MIT community - for sake of time, our group was not able to find interview candidates outside of the MIT community.

I think to truly work on an app gained at making life more easier for pregnant women, it'd be extremely important to interview candidates from underrepresented social groups as well, as they may likely have unique obstacles to overcome. Learning about them would definitely help inform how a pregnancy-tracking app could be beneficial for a greater range of people.

related work