Project Description

back to portfolio
back to portfolio

Baby Book App

Viget Field Experience Case Study

( By, Nura Hill )

CHALLENGE: To create an app that helps parents keep track of their families’ memories and milestones.

PROCESS: Conduct competitive research analysis, a design workshop, user-flow creations, in order to find the most important aspects to use for the app.

SOLUTION: Created an app that helps families manage their memories with simple and quick use. After curating what is already on the market and doing some user research, I consolidated the best ideas to create an app that was easy and useful for parents to use.

Nura Hill Design

                             View Wireframes

Project Summary

This project was created with the supervision of a team of senior UX designers at Viget, as part of a Field Experience program. The goal was to create an app that helps parents keep track of their families memories and milestones beyond the typical tangible baby book. Being a mom of two, I realized that keeping track of both my kids baby books was nearly impossible, and after looking through what was offered online, finding something that served the purpose I wanted it to serve, was difficult. This is what inspired me to embark on this project.

After some research, I found that although there are other apps out there that serve a similar purpose, most were missing one or more key elements that a parent would want in an app of this kind. The design process for this project was done in the following order:

                – Problem ideation and identification
                – Competitive research analysis
                – User research
                – Design studio (concept ideation)
                – User-flow creations
                – Wireframing

Competetive Research Analysis

For the competitive research analysis, I looked for apps that offered a similar product. I focused on five apps and identified six different aspects of each app in order to gather information on what is already out on the market.  The six different aspects that I looked at were:

                – What they offer
                – Marketing positioning
                – Key features
                – What do they do well
                – Opportunities to do better
                – Table stakes features

After conducting the competitive analysis I was able to get a better understanding on the similar apps that already exist. Most apps were missing one or two key elements. One had a texting feature where the app would text the user and ask questions about their family. Another app had an involved milestones page for parents to fill out about their children. One app had well designed and thought out printing options. While another one had powerful filtering features. The goal was to figure out a way to add most of these elements into one app. This process allowed me to see what parts were missing in each product to then be able to make a more complete app.

Design Studio

A design studio was conducted to get a better understanding of what others find necessary for an app of this kind. The design studio was facilitated at the Viget office with both site supervisors and two other Viget employees who were also parents. I presented to the group who this app was meant for and the idea that we are now in a completely different generation, where something such as a tangible baby book, isn’t as practical as it use to be. I posed this question to the group to help everyone start the ideation process.

“How might we improve the process of making the baby book,

so that it feels less time consuming and more manageable?”

The structure of the design studio was done in the following order, twice:

                – Prompt
                – 8 minute ideation
                – 3 minutes of sharing
                – 5 minute break

Prompt 1 asked: Keeping in mind the busy working parent: How might an app prompt you to save information about your baby?

         Best Outcomes:

                – Randomly remind parents to capture things they wouldn’t normally – like the messy living room, the
                  2am breastfeeding session, the long packing list for a  trip, sibling fights, etc.

                – Capture some things about parents lives, not just baby’s – this adds interesting context.

Although there were many ideas gathered from this prompt, these two were the ones that helped me see the app in a different perspective, where not only are we creating a baby book app, we should also make it be more of a journal style app and remind parents to capture the true reality of parenthood rather than only the nice and perfect parts. Most parents want to look back and remember the whole experience, the good, bad, messy, and beautiful.

Prompt 2 asked: Keeping in mind the busy working parent: How might the app organize content to make it useful to you or others later?

         Best Outcomes:

                – Organize monthly albums automatically
                – Tags for themes – like “parties” or “grandma” or whatever
                – Be able to sort by a type – ie: sort for all video, images, audio, journal entry, author.
                – Possibly tag by something like mood, as another layer of context and also as an interesting way to sort.

With all of this information given I was able to pick apart the features that seemed to be the most relevant and also ones that would set the app apart from other app likes this one.

This design studio was very eye-opening for me because it helped me gain a better understanding of what other parents might find useful for an app of this kind. It allowed for me to ‘get out of my own head’ so to speak, and fill in the gaps.

Viget Field Experience Case study session1
Viget Field Experience Case study session2
Viget Field Experience Case study Nura Hill

Wireflows

Before starting with wireframes I designed some user flows and wireflows to help tease out some key objectives. Some of the user flow ideas that I worked on were:

                – As a parent, I want to add content to my journal.
                – As a parent, I want to sort through my entries, so that I can easily find what I am looking for.
                – As a parent, I want to share my entries with people.
                – As a parent, I want to be reminded to add entries about my child and experiences as a parent.

Here, wireflows show the process of how to add content and how to tag an entry.

Nura Hill Design

Once these were thought through, the wireframing process began. The first set of wireframes was focused on the home page which took many iterations until we reached the right structure.

Here are the first and second versions of wireframes for the homepage:

Nura Hill Design

Version 1.:  I wanted the user to be able to make an entry, view a compilation of entries, and have the buttons in the bottom to be the place where the user could view questions, reminders, calendar, book printing options, and settings.

Version 1.2: This version is similar to the first, however, it also shows a list of unanswered questions for the user to view. Instead of the button to the bottom, this version has scrollable tabs at the top with the same options.

Here is the third version of wireframes for the homepage:

Nura Hill Design

Version 2.2: After some consultation, we decided to further refine what I had created initially. The previous version had items that took to much real estate on the screen, such as the video montage, and entry buttons. We decided that minimum effort for the user would be the best way to go, so we got rid of all of the buttons and simplified it to just two buttons, an entry button and a questions button. We also decided to add all entries on the homepage rather than having the user search through the app.

The progression of the buttons went like this:

Nura Hill DesignWireframes to make a journal entry:

Nura Hill Design

In order for the user to make an entry, in this version, the user would press the + button until the two bubbles pop up. One bubble is for entry while the other is to view questions. If the entry button is pressed it takes you to the third screen where text can be entered and photo, video, and audio can be added or ‘attached’ to each entry. The user can also tag an entry or ‘heart’ it on the bottom left of the screen.

Questions wireframe:

Nura Hill Design

If the user clicks on the question mark from the first screen to the left, it will then take the user to a screen with a list of questions about your child that they haven’t answered yet. They can toggle to a list of answered questions by pressing the button on the middle top that says ‘Answered’. The third screen shows what happens if a question is clicked on. The user could click on another tab such as ‘milestones’ to answer those questions. The following tab shows questions about the parents. The last wireframe displays a daily barometer which lets the user enter what their day was like with the option of adding a text entry.

Final Wireframe Compilations

After more deliberation we decided to further change the wireframes:

Nura Hill Design

The homepage now has a smaller display of the montage. The home screen is the place where the user can view all entries. They can use the filter icon to filter through all entries based on entry type, favorites, tags, dates, and author.

Adding Entries:

Nura Hill Design

We decided that rather than having two bubbles, one being for entry and the other to answer questions, we would instead have three bubbles; one to save media (photo, video, audio), the other is for text entry, and the last one involves tracking and metrics.

Media Entry:

Nura Hill Design

This set of wireframes shows what would happen if the user decides to add images. When the user presses on the image icon, it takes the user directly to their photo library on their phones, they select photos they want to add to the app, press ‘select’ then if confirms the selection and allows the user to enter text for context and tagging options. If they want to add a new tag, they would click on the + button and it will take them to a page to add the tag. The final screen shows the confirmation of the entry.

Journal text entry:

Nura Hill Design

When the user wants to add a text entry, it will first show them the “questions of the day” which if they press it will open up a text box to answer the questions. They can also swipe on the question to view other unanswered questions. The second screen is the same as the first, but it’s worded differently in the case that a user might have multiples children. Then confirmation of entry is shown.

Tracking metrics:

Nura Hill Design

Finally, the tracking metrics button takes you to these screens. The user can log the type of day they were having by using the ‘daily barometer’. Then the user can add milestones based on; cognition, firsts, fine motor, gross motor, communication, social, reading. The second screen shows what it would look like if the user had multiple children. They can toggle between children when entering the data (e.g.: where the names ‘Lily’ and ‘Alex’ appear).

Personal Learnings

Because I had the opportunity to work under the supervision of two senior UX designers, I got great exposure in multiple areas of a UX process. A few learning highlights for me involved:

                – What the deliberation process would look like when putting together a project of this type.
                – Each step of the process, from competitive research analysis to the final wireframe process I was able to
                   tease out more and more information that helped me create a more concise and final product.
                – I was pushed to further minimize and consolidate information that was being displayed on wireframes
                   in order to achieve a simple but powerful product.
                – I gained a better understanding on how much is too much to display on a screen (screen ‘real estate’).
                – How to always advocate for the user and be sure that the design is easy to use by minimizing the number
of screens they have to go through to get to what they want.
                – Being sure to always ask myself, why am I making the decisions that I am making in terms of design
placement.
                – How to conduct a successful design studio and ask the right questions, in order to get the information I
need.

Overall, this experience was very enriching for me and it allowed me to see a glimpse of what a real UX project would entail.

If you are interested in viewing all the wireframes for this project, click the link below to view!

View All Wireframes!