About
A socially-minded healthcare company reached out to me and two of my colleagues to help create a breastfeeding app.
Our goal was to reiterate their app to help foster and encourage exclusive breastfeeding among African American and black communities, while providing accessibility from the convenience of their smartphones.
Role
I provided the following services in a team of three designers:
Team Lead
Asset/Component Designer
Competitive Heuristics Researcher
User Experience Interviewer
Timeframe
Five weeks were given, with each team member contributing ten hours of work per week. Three team members total were involved.
I. The Mission: Empowering Communities in Breastfeeding
Barriers for breastfeeding exist on various socio-ecological levels for AA/black parents, and studies show there are great benefits for both parents and children who breastfeed.
According to the client’s research and citations, African American and black mothers are the least likely to start breastfeeding and to continue exclusively breast feeding in the United States of America.
Our client’s goal was to encourage and assist AA/black communities with breastfeeding-- specifically, help families achieve exclusive breastfeeding for the first six months of their baby’s life.
That being said, the task at hand not only had to keep the original mission in mind, but was also an exercise in taking an old prototype, modernizing it, and making the app easier to navigate.
II. Lessons from a Prior Prototype
The client provided a prototype and a study they had conducted in 2019, which give me and my team an excellent start point. African American and black moms were interviewed, both as users of the prototype and as moms looking into breastfeeding.
II.a. Research Summary
In this section of product design, I conducted the reading and summary of our findings. Phase I Focus Groups indicated perceptions, and more importantly, pain points that AA/black parents hard regarding breastfeeding. Per research, the following factors were cited as factors for moms avoiding or failing to breastfeed:
In addition, the focus groups revealed that aiming a product specifically towards African American / black parents to address breastfeeding was “marginalizing”. By singling out African American communities, the app may incorrectly suggest that breastfeeding is a problem only for African American / black communities.
II.b. Competitive Heuristics
The client also turned over data from their own competitive research. While the list was large and extensive, our job was to take an overview of competitors. My first step was to examine our top three competitors (determined by app store rating) and their heuristics approach, writing a 20 page report for the client.
2. Irth - Birth without Bias
Aesthetic and Minimalist Design
Help and Documentation
3. Babytime
Aesthetic and Minimalist Design
Flexibility and Ease of Use
Consistency in Standards
When it comes to baby apps, it seems the ones that do the best employ a particular aesthetic with minimal design, with flexibility and ease of use. Consistency in standards and using recognition rather than recall are also important to note.
II.c. Benchmarking
The client had already performed a System Usability Scale test, with a score of 73.8, above average. The SUS measures general product usability ratings from users, with ten questions. Responses can range from Strongly Disagree to Strongly Agree. That being said, the results were not specified any further than that.
In addition, I created comparisons from the old prototype to current frontrunners were made on the basis of usability heuristics, with the following examples:
1. Glow Baby
Aesthetic and Minimalist Design
Recognition Rather Than Recall
Flexibility and Ease of Use
Onboarding from our prototype compared to Babytime and Glowtime had poor visibility of system status. Indications for onboarding progress and additional information for users may be helpful.
Non-article pages exceed recommended word limits for user experience, and either moving information into onboarding or behind other pages could be helpful and bring the product into more consistent standards.
In the feeding log tab, numbers based entries were input on a sliding scale. To remain consistent with industry standards, I recommended switching to an input field with keypad entry.
III. Ideation: the Foundation of the App
It was time to start narrowing our fixes and ideas to a low fidelity wireframe. To give shape to what we would be constructing, we started with two ideas:
With the higher than average SUS score, there is benefit to keeping the same general information architecture with a few exceptions, such as clarifying Info and Media tabs.
Create an app for African American/Black parents without marginalizing or singling out their communities.
II.a. Research Summary
Following the old prototype, my colleagues recreated the previous app architecture.
III.b Personas and Empathy Maps
My colleagues helped create three personas and empathy maps for each of them, based on trends and patterns noted in the previous research article— I helped review and correct mistakes here.
An example of one of our personas, Catherine. She represents a more experienced mother who wants to explore breastfeeding.
Here is Catherine’s empathy map, exemplifying what some of our interviewees encountered in their own struggles with breastfeeding.
III.c Jobs to Be Done Framework
I typed up our Jobs to Be Done framework. Keeping in mind the types of jobs our personas could be tasked with, I created examples of what we might encounter during our sketching phases.
These jobs also corresponded with what we had seen in our client’s prior research, such as the need for feeling safe while using the app.
III.d Customer Journeys
Here is example of a customer journey map that I created, with Catherine as a base persona. The important portion of this demonstration is how our client should meet Catherine’s needs through every step of the journey, and provide as little friction as possible in meeting her goals.
III.e Red Routes and Planning
Putting together our personas, their needs, their journeys, and the information architecture, we were able to gain insight into what people like Catherine, Grace, and Ebony were most likely to do.
Considering our time constraints, we chose four red routes to map for the prototype: onboarding, breast feeding/pumping log, lactation consultant chat, and breastfeeding area locator.
IV. Sketching and Low Fidelity Wireframes
My colleagues and I chose to start with Crazy 8s, a method used to hash out and provide concepts to how important screens may look like.
Afterwards, my colleagues decided on which screens best represented the company brand, while drawing vital screens that come before and after each central screen. Below are examples I sketched within a 20 minute total time frame.
From here, each colleague was assigned a portion of the wireframes - the breast pump log flow was my assigned portion, shown below.
Once we were able to piece together the low fidelity wireframes, I created a functioning lo-fi prototype in Figma, complete with interactivity for users. We were then ready for the next stage of our development-- guerilla testing.
V. Guerilla Testing Before High Fidelity Frames
To get a baseline understanding of how a user may go through our concept, I put together a functioning Figma prototype. Recruitment through Springboard’s Slack Community, as well as recruitment from friends and family, lead us to five participants willing to try the app out.
V.a Gathering Interviewees
Five individuals were recruited, signing up through Calendly for Zoom meetings. Participants were instructed to bring webcam and have the ability to stream their screen through Zoom.
Participants were linked the low fidelity prototype, and instructed to go through scenarios given by me (the interviewer). Participants were encouraged to think out loud, and to remember that we are testing the product, not them.
V.b The Interview Guide
I wrote the interview guide as a standard for each participant interview. While researchers need to remain flexible and follow leads, it’s important to have a standardized set of questions and scenarios to help guide users through.
V.c The Raw Data
Over the course of two days, I was able to interview our five participants. Using audio, video, and Otter.ai transcripts, I passed the information along to my colleagues.
Next I assisted my colleagues in creating an affinity map-- finding patterns in the data and seeing how prevalent these patterns are among our five participants.
Below are examples of pain points found-- one pattern revolving around onboarding, and another example of pain points surrounding chat history and transcripts:
V.c Affinity Mapping Results
Our affinity map presented us with four critical priority pain points, and two major priority pain points. Our information architecture would need to be readjusted, and our onboarding flow would need to be reworked.
Advice and feed back from our client were also implemented, such as our client’s desire for a softer branding with contrasting colors, more visuals and less writing. From there, we created our high fidelity wireframes.
VI. Style Guide and Branding
While I was recruiting and interviewing participants for the guerilla tests, my colleagues got together and hashed out a plan for the style guide and branding of the app.
With client input in combination with our expertise, we were able to present a style guide that matched our client’s needs. The following are examples from our style guide:
First, the branding page, describing brand attributes, personality, and more. Next, color palette and an explanation of how each color will be used.
Lastly, an example of how vertical spacing and size would be used in the app.
It was important to give a sense of security and professionalism, while simultaneously providing a warm and inviting atmosphere. These soft colors paired with round edges and round text should provide a warm atmosphere. Simultaneously, providing information, clarity, and authority on subjects should help parents feel secure in our app.
VII. High Fidelity Frames
Once we had established our guidelines, I created the majority of UI elements and components to help standardize our app. These included animations, buttons, text cards, and more. Once established, we were able to convert our low fidelity wireframes into a high fidelity prototype.
VIII. Conclusions and Afterthoughts
I am grateful to the client, their team, and my colleagues for the opportunity to work on this project. I’ve always enjoyed socially minded work, and I’m excited to see where the team continues with their project.
I also gained valuable experience and insight in working with a team. While I’m proud of the work we did, we did work in a five week constraint. With more time, I would have liked to work on the following:
VII.a Branding Consistency
VII.b Further Primary Research
VII.c Pixels vs. Ratios
Due to time constraints, different art styles and animation styles were used in the prototype to get the intended idea across.
With more time, I would have liked to standardize these across the app.
There was a mention of how African American parents react to content specifically targeted towards them— rather, that targeting the African American community tended to make users feel marginalized.
It would be great if we could do more studies on this.
We did not have the opportunity to work with a coding team this time, but look forward to seeing what their standard for pixels, DPI, PPI, etc. might be.
I would like to ensure that my projects are adaptive to different screens, layouts, and presentations.
Thank you for reading my case study. I hope it provided insight into how I work through projects!