There was an opportunity to work with the Ourpillar startup on new features to be added to the already existing Ourpillar app….


Our pillar is a free digital support network for happier, healthier mums.

It’s a startup based in east London and it mainly focuses on currently pregnant moms and also moms who have just had a baby. It aims to support moms who are going through emotional roller coasters, and are prone to postpartum depression. The app also enables mom to connect with other moms who are in similar situations.

We had the opportunity to add a health and mood tracker which will help moms monitor and follow their journey through motherhood. The team at Ourpillar will also have the opportunity to connect moms to appropriate support services based on the data provided.

Design Process

We were a team of 4 designers who applied agile methodologies and worked together with the Pillar team for a sprint length of 3 weeks.

1. Competitive Analysis Research

Before anything else we decided to look at competitor apps to see what is currently available on the market for new moms.

We looked at the apps: Ovia , Glow Nurture, Daylio, and similar

  • We found the design was cluttered & it was hard to navigate
  • The focus was on socializing, sharing, support, trackers
  • Mood trackers within the apps provided limited functionality
  • All the apps focused mainly on pregnancy, but not on a postpartum period which happened after the mom gave birth
Competitive Analysis of other apps on the market for new moms

2. User Interviews

After the competitor research we had to focus on users and their thoughts.

We conducted interviews with 14 moms/pregnant moms and came up with some very interesting insights that differentiated from the business needs of our client.

key quote from a mom who was one of our interviewees

3. Affinity Mapping & Synthesis

We did collaborative affinity mapping …

Affinity Mapping with post-its on the white board

… and came up with the following insights:

  • users had mostly a positive experience during and after birth
  • users had a lots of different feelings, doubts, and fears
  • they have the need to communicate and to have support during their journey of motherhood
  • users are not interested in tracking (time consuming)and journaling
  • users are interested in recording milestones (events, notes, photos)

4. Persona

From there we developed a persona called Jess who would be our key target user. We identified her goals and pains.

Jess Persona Profile

5. Experience Map

To get a deeper understanding of what type of journey our user is going through, we created an experience map for Jess which follows her through her journey from the time she found out she is pregnant to the moment she gives birth.

We noticed that Jess was going through a period of consistent low after giving birth, and we felt that was the area to focus on.

But we also wanted to focus on the times when she was going through periods of happiness, like when she was connecting with other fellow moms or when she was getting contractions before giving birth.

Jess Experience Map: Journey Map, Mood Graph and Task Analysis

6. Problem Statement

As a result,we came up with the following problem statement:

Moms and moms-to-be need a way to understand the new journey they’re are going through and know they are not alone, because it might be an unfamiliar and overwhelming experience.

We asked ourselves How Might We:

  • make expressing and sharing feelings a safer place for moms?
  • help women understand and embrace their new journey?
  • encourage moms reflect on their personal journeys?

We came with the following hypothesis statement:

We believe that by encouraging moms and moms-to-be to record and share their milestones and feelings they will be able to embrace their new journey.

We will know this to be true when our Pillar community grows in active and committed users.

7. MVP — Minimum Viable Product

Collaboratively we used the MoSCoW method to decide on which core features to focus for our initial design ideas.

MoSCoW Method for Feature Prioritization

We decided to focus on the following MVP features: Milestones/Moods, Notes, Calendar.

8. Ideation & Design Studio

We decided to set a meeting with our client and do design studio together.

We applied the Crazy 8’s technique which is a core sprint method for sketching out quick ideas for initial wireframes.

Crazy 8’s sprint sketches

We picked three ideas: timeline, mood selector, milestone presets.

chosen ideas from Design Studio

9. User Flow

We have then created a user flow for the scenario where Jess woke up at night because her baby started kicking for the first time. Jess would like to record this milestone and share her experience to get some recommendations from other moms like her.

user flow of Jess using the app

10. Site Map

We created a site map to highlight the MVP features we wanted to focus on for now before starting with our wireframe sketches.

sitemap of the MVP features of the initial app design

11. Wireframes

We came up with the initial wireframe designs. As it can be seen in the wireflow, Jess has access to her own personal timeline where she can record her milestones. She then proceeds to add a moment and another page pops up where she can select from preset milestones. Besides choosing a preset milestone, she can also create her own milestone by assigning a mood to it with a smiley, and she can preview her entry before publishing it.

low fi wireframe sketches

12. Paper Prototyping & Testing

After a round of paper prototype testing, the following problems arose:

  • the user wanted to see an overview of the timeline without scrolling through it entirely
timeline overview too long
  • the preset moments were unclear, there was no text in the boxes and the users didn’t understand that they had to chose a preset
presets unclear
  • The smiley emotion slider was vague, users didn’t know what mood would present itself if they moved the slider back and forth
emotion slider unclear
  • the preview page for the entry was a step too much and the user had privacy concerns as this entry was really private
preview window unnecessary

13. Hi-Fi Digital Wireframes — 1st Iteration

After we implemented these changes we came up with the Hi-Fi Digital Wireframes. We created a calendar as an overview of the timeline, where the user can toggle back and forth between milestones timeline and calendar. The entry page featured both the milestone entry and asking other moms a question all on one page.We also inserted some text in the milestone preset boxes where now the user was able to choose from specific presets for moments and thoughts.

Hi-Fi Digital Wireframes

14. Gorilla Usability Testing

We decided to take our Hi Fi Digital Prototype and do some Gorilla testing with moms outside in public. We did about 7 usability tests and came across the following observations :

  • users were delighted by the smileys, the feature was well liked
  • there was positive feedback on the calendar, users thought it was an important feature (they themselves used a calendar feature to put in doctor appointments or shopping lists)
  • users were concerned about the privacy of their entries, they didn’t like that the moments entry and the question to other moms were on the same page
Gorilla Usability Testing out in public with moms

15. Final Hi-Fi Digital Wireframes — 2nd iteration

We decided to tackle the still existing privacy concern and proceeded to separate out the private moments entry and asking moms a question.

On the timeline page the user is now prompted to ask a question and it pops up as a separate window from creating a moment.

User gets a prompt to ask a question

Once the question has been submitted, the user receives a prompt that the question has been submitted and will be soon reviewed by other moms. In the navigation bar the user sees a notification that the question has been sent.(there was also a concern which arose from the usability testing as in where the question was going after it has been asked).

User gets a notification that the question has been sent

16. Style Guide

We decided to use the existing style guide of Ourpillar.

We opted to keep the Monserrat Font, in regular and bold.

Monserrat Font

We decided to stay with the simple and clean color scheme of Ourpillar.

Color Scheme

We also added additional colors to highlight the moods of the smileys.

smiley moods

17. Final Mockups

At last we came up with final visual design of the new Ourpillar app features.

Final Mockup of Ourpillar

Here is also the link to our final InVision prototype:

18. Next Steps

Our next steps would be:

  • to test existing product in conjunction with the new features
  • to elaborate on adding different types of moments (appointments, milestones, ..)
  • the feature to add photos to moments
  • to attract a new target group -which would be the new mom’s partner/husband/the new dad

19. Presentation

We presented our final design to the Ourpillar team who were very happy with our work and they were considering to implement the new features into the Ourpillar app in the near future.

Thank you for reading my , I hope you enjoyed the design process and I would love to hear any feedback you might have. Please feel free to get in touch!

Source link—-eb297ea1161a—4


Please enter your comment!
Please enter your name here