Changed + Fed Case Study
Changed + Fed was started by 2 moms who saw a need to have a location services app for parents and caregivers to find places they can change and feed their babies when they are outside. As new moms, they were anxious when they go to an unfamiliar area and need to find places they feel safe to change and/or feed their babies. Existing location based apps in the market, such as Moms Pump Here, did not have great user experience and overly feminine.
The clients wanted an app that is gender neutral and something that parents and caregivers can use on the go while outside with the babies when they need to change or feed their babies. We had 3 weeks to complete this project.
Meet the Dream Team
We were a team of 2 UX and 2 UI Designers.
User Interviews & Design Inception
From user interviews, we discovered that some caregivers/parents like to plan their trips ahead while others will search for places while they are out and about with the babies. With that in mind, we wanted to create an app that makes parents and caregivers to feel comfortable in public. They should feel relaxed, comfortable, and can be a little whimsical. The app should be simple and easy to use.
We planned using rounded shapes that looked plump. The app should be spacious and organized so users are relaxed and calm when they use the app. The colour palette will be muted and pastel. The app will be fast and popping up.
The clients gave us a mood board, as seen in the picture on the left, at kickoff meeting to give us an idea what they are looking for in terms of UI. It was helpful to visualize what they wanted.
We created 2 art directions 1) Quilt and 2) Sleek
Quilt is built on the foundation of client’s mood board to use similar colour palette. The quilt really caught our eyes.
Sleek was born from knowing that users of this app would want something easy to use if they are on the go. So the UI should be simple and sleek.
We presented Quilt Baby and Sleek Baby as 2 art directions to the clients. They loved both and wanted us to combine the two.
Typography & Colour
The clients were not on board on the typography we chose for the title “Changed + Fed”. Since this was the first thing the user will see, they wanted to make sure we get it right. After searching through dozen of fonts, we chose Itim because it was legible while still a little playful (whimsical).
For body text font, we chose Rubik, a sans serif font that is round which complement the look and feel of the rest of the UI on the app.
Our colour palette deviated from what we had in the mood boards. We chose pastel and muted colours because it reminds us of babies. Originally we had orange as an accent colour because we wanted the app to pop. However, we found the colour to be clashing with the map which is the background for many screens. We used grey as one of the main colours so that it only draws attention when the user is looking for it.
Iconography & Design Collaboration
It was established early on that there will be some custom icons (such as change table, stairs) due to nature of the app. It was a good idea to start to work on icons that were likely to be used.
With references to iOS human interface guidelines, we established that all icons will be 75px*75px. To make styles consistent, we will make sure the icons have all rounded edges.
Nowadays, more and more apps use cards, such as Apple Wallet, as a way to organize information and save space. Since parents often were very busy and needs to find information quickly on the app, we want to give them enough information while not making the app cluttered with too much unnecessary details. Cards would solve this problem.
For example, in screen 1 above from the left side, it was the home screen, which showed locations around. After a location pin is selected, a card comes up with basic information (screen 2). Then for more information such as amenities, and description, flick the card up to see more (screen 3). Tab the go button to see directions how to go (screen 4).
Sticking to the design philosophy for this app, we made location pins, buttons, fields, and cards all rounded and plump. There were no sharp edges.
It was such an honour to work on a project that would make impact once implemented. The clients were happy since we kept them in the loop and they already knew what to expect at the presentation.
One thing I didn’t anticipate was that the thickness of the strokes of the customer icons we created were inconsistent. While we agreed on the standard early on, due to different setup of our laptop screens, we didn’t notice till it was toward the end.
Click here to view Changed + Fed high fidelity interactive prototype. To make the experience more interactive and fun, we added a surprise if you help add a new location or review a location. Play around to find out.