CHANGED + FED: An app for caregivers.

Challenge:

To deliver and pitch a functioning prototype of the app envisioned by our clients, within a 3-week timeframe.

Our clients saw a need for caregivers to have quick access to changing and feeding locations for their newborns. They envisioned a map-based app that would show caregivers places to change and feed around them. The app would build off existing data, and empower the community to add and refine existing locations.

Process:

the team

Our group was comprised of two UI’ers, myself and my beloved partner Lily, along with two UX’ers, Amber and Hugo. This Case study will focus on the UI process.

mood Board: Quilt & Sleek Baby

Our first task was to find a mood to lead our design. We knew already that our clients wanted an app that was professional but whimsical, and at the same time, gender neutral. They wanted to be sure that any caregiver, whether it be Mom, Dad or Grandma, could take advantage of the app.

For color, we gravitated towards blues, teals, whites and grays. Our color pallet was a constantly evolving beast, but here you can see the two mood boards we presented to our client. We called the mood on the left “Quilt” and the mood on the right “Sleek baby”. The Quilt mood was inspired by a real quilt, both in color and the way the shapes are spaced while Sleek baby was sampling a more professional and clean look.

As we developed our mood, we interviewed a sample of users that fit our demographic. We asked questions about what environments they might be in while using a map app, when they may use them and what other apps they use. We learned that most of our controls needed to be near the bottom of the app, so that they can be easily reached with one hand, and elements needed to stand out, when used outdoors.

discover/point/voice

Our app demanded us to work close in hand with the UX team, who have been busy developing the app wireframes while we work out our moods and styles. We wanted an interface that was simple for anybody to understand. Our interface contained elements that married UI and UX and because of this, sitting with our team whenever possible was a high priority. Working together gave us the opportunity to express opinions, and deliver feedback casually on the spot.

peeking card/perched card

It didnt take long for our team to see the value in tight teamwork, and out of it, cards were born.

drop new/locate/amenities

Cards have been used in many ways in design before. Our team chose to view them as a more simple, tactile experience. We were looking for ways to get the information we needed in one place, but also keep our elements near the bottom of the screen. When you tap a pin on the map, a card will pop up from the bottom of the screen, eager for your attention. A card can pop-up a quarter way up the screen, to give you a snippet of info, or swipe it up to reveal more.

login/list/filters

Our cards are first introduced to the user on the login page, where they delightfully and helpfully spring up from the bottom of the screen to present you with your login options. We envisioned that the cards could be swiped up and down to let the user play with and understand how the cards will behave within the app.

buttons/elements

To compliment the cards, we aimed for buttons and that were playful but professional. To accomplish this, we used matte colors with a subtle drop shadow to show the user that the element could be interacted with. The buttons and most of the interface use a font called Rubic. We selected Rubic because it is well spaced, and subtle, allowing the user to focus more on the graphical elements, and less the fonts and text.

iconography

Changed + Fed uses all custom iconography. Due to the tight project deadline, we decided to devide the work with both Lily and myself taking half. To ensure that our styles were not drastically different, we shared many pictures of icons that we felt fit our mood, then developed a set of rules for pixel count, border, spacing, and stroke of each icon. Although many of the icons were challenging, with some still up for debate, the style and mood were achieved.

Action Demo

Aside from the elements themselves, core animation is an important part of the app. Because we chose skeuomorphic elements like cards and buttons, subtle animations when cards pop up or buttons are pushed, are an important part of the interface. When you open the Changed + Fed app, you are immediately presented with a map, with pins that drop onto the map, immediately giving the user an idea of what locations are around them, allowing them to explore.

star baby

Overall, Changed + Fed was a fun design style to work with. When first reviewing the app brief, I thought it would be a big challenge working with a baby themed app, mostly because it’s something I never imagined I would do. After meeting with our clients, we learned how important it was to keep the app clean, and not fall too far into super baby app territory. Ultimately, this led to many learns about spacing and thinking outside the box when facing difficult design decisions.

-Liam