Changed + Fed Case Study
A mobile app for parents and caregivers on the go
This was my first client project. 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 good UI.
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 the project and present to the client.
Meet the Dream Team
User Interviews & Design Inception
From user interviews, we found out that some users like to plan ahead while others will go with the flow and search for places on the go. 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 to the clients. They wanted us to combine the 2.
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
Since the bulk of the work on Photoshop cannot be done before the wireframes were sketched. I directed my focus on iconography. 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 practice my Adobe Illustrator skills and start to work on icons that were likely to be used.
Between my UI teammate and I, we established some guidelines, such as how big the icons will be (75px*75px recommended by iOS guidelines), the style (rounded), etc. The result: all icons in the high fidelity prototype were created by us.
While I was having so much fun creating icons, the UX designers on my team were working hard on their end in order to give us wireframes as early as possible. They ran into some hurdles with some screens and invited us to join them for design studio, in which all 4 of us draw our ideas individually for 5 minutes and then come together and discuss our ideas, most notably, the concept of “cards”.
This was a major turning point for the team. Many of the screens that ended up in the final version of wireframe and prototype were results of ideas from all 4 of us. From this point on, we really understood and valued the collaboration between UX and UI. I became aware of that UX and UI are really the same thing. I cannot create a screen without taking into consideration of user experience, while UX designers cannot proceed without keeping in mind how the wireframes would look to the user since it is part of the experience.
Nowadays, more and more apps use cards, such as Apple Wallet, as a way to organize information and space saver. In one design studio session, card was born in the Changed + Fed app. 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 solves 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.
I am very proud of the end product. Teamwork played a very big role in the success of the project. The clients were happy since we kept them in the loop and they already knew what to expect at the presentation.
One key takeaway is that UX and UI really go hand in hand. At the end of the day, UX designers and UI designers have the same goal in mind, which is to design for the users. If there’s one thing I could change, I wished we collaborated even earlier. It would also be great to sit in on UX’s user interviews which will help UI process as well.
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.