MyBabyBook
This project was created as a part of my exam for the Udacity UX Nanodegree course. For my case study on MyBabyBook I did a complete end-to-end process of designing a digital product for creating baby photobooks. I was responsible for all the key activities which included the following phases: Research, Discovery, Prototyping, and Usability Testing over a period of 10 weeks. I used various skills such as communications skills, analytical skills, visual design skills and behavioural phycology.
DURATION:
10 weeks
TOOLS:
Figma, Miro, Zeplin, Lookback Participate, Photoshop, Illustrator
YEAR:
2020
Challenge or Problem Overview
Mobile phones have changed the way we capture and keep our memories. They enabled us to take many photos but with that came the challenges of storing digital information and keeping them for many years to come. This can be a problem for parents who want to keep the memories of their little ones safe and also displayed nicely.
The digital product MyBabyBook is intended for parents, especially young mothers who want to create unique physical records of their baby’s special moments and milestones while aiming to optimize the time needed to create one.
Discovery: Research & Analysis
During the research process I aimed to discover what are mothers’ expectations of a baby photobook, what would be its main features and what needs exist for another photobook product.
First, I created a research plan, then recruited participants, and ran the qualitative study. Using a 30 minute in person and remote semi-structured interview I interviewed 5 mothers with children of age 0-3y on their needs, pain points and on how they use existing digital products to create photo books.
I used affinity diagram to identify any patterns or key findings that exist in the data.
The key findings were that mothers have very limited time want to create unique and creative photobooks for their babies but also wish to be able to add notes to the photos of special moments.
These findings were then validated by a Survey.
Affinity diagram
Design: Concepts & Sketching
During the synthesis phase I collected notes from user interviews using active listening technique and grouped them into related themes from which I synthesized and ideated features the app could have. Using prioritization matrix I landed on the following features:
• creating image with automatically suggested stickers based on baby profile info age
• premade stickers and frames for photo design
• creation of baby profiles with baby details
Using the selected features I made the sketches of the application using different techniques such as Crazy8s sketching, Layout sketches etc. Using Figma I created the low-fidelity screens and a clickable low-fidelity prototype of the application. Having defined the User flow I conducted Usability Study testing sessions in order to see how well my prototype did and identify areas of improvement.
Feature ideation and prioritization. Initial screen sketches
Develop: Prototyping
During the high-fidelity prototyping phase I created a Style guide that included:
• Typography (sizes, weights, and styles)
• Colours (How foreground colours and background colours interact)
• UI Elements and Styles
• Imagery/Illustrations
• Icons
A Pattern Library was also created including buttons, navigation and other UI elements. Using elements from Style Guide and the Pattern Library I created the following High-fidelity clickable prototype.
Style Guide
Test: Validation, Usability, Feedback
After looking for opportunities to improve Accessibility on the high-fidelity prototype I made improvements that were meeting the https://webaim.org/ AAA rating accessibility standards.
Then, I conducted Usability Testing sessions with 10 participants using the Lookback Participate tool. Using the feedback gathered I came to a conclusion that there is a 50% drop off rate at the creating a baby profile part of the flow. The hypothesis was that users have a problem to move on from this step because they can’t find where to click next to continue.
The proposed solution to this problem was to place the NEXT button below the form and also making it bigger to make it stand out.
Improved accessibility after 50% drop off rate
Design: Iteration
The new and improved design had a much clearer NEXT button at creating a baby profile part of the flow making it more usable, findable and accessible to users allowing them to move forward and complete the tasks.
The improved app also included accessibility improvements to meet the AAA Accessibility Rating which meant changing the foreground and the background colour of the UI elements such as text and buttons.
Besides that the size of the fonts for the body text has been increased as well as the surface area of the button to make it easier to press on mobile screens.
Design iteration - old vs. improved design
Solution & Impact Overview
After iterations based on users feedback the final solution was doing better at meeting the needs and goals of the target users. It was also more accessible and increased the task success rate by 50%.
Final solution screens