Cake

iOS app for a social media platform

Cake Screenshots

Brief

Cake is a fun social media app that kids can use to share their moods with their friends. They can pick from a variety of characters to choose their current mood. Then they post to their network and their friends can like or comment on their post. They can also see what other people nearby are posting and make new friends in the app.

My Role: I was brought in to lead the user interface and interaction design of this product while working with developers and the product manager. This iOS app was developed by T5 Labs, Inc.

Customize Your Mood

1    Taking Stock

Heuristic Review

T5 Labs, Inc. had already developed a working prototype but felt the product lacked an intuitive interface and deeper design consideration. To understand what they had built, I first performed a heuristic review of the entire app, noting problem areas in the user experience.

Heuristic Review in Progress

Background

I also gathered as much information as possible about what other work contributed to the current state of the product, talking to the product manager at length about the visual and interaction design work leading up to when I joined the team.

2    Interaction Design

With the results of the heuristic review in mind along with the conversations I had with the product team, I began mapping out the high level information architecture of the app. While doing so, I noted down ideas for micro interactions on each screen. After the map was created I began filling in the visual design details.

3    Visual Design

Since Cake is a kids' app, the visual design is bright and bold with large fonts. It already had an established color palette, but I took this opportunity to also clean up the visual language of the app by refining the palette, designating certain colors for interaction, and creating rules for when and where certain colors would be used. This helped the overall visual design language have a more consistent feel and facilitate a better user experience.

Styleguide
Visual Designs

4    Motion Design

Onboarding Micro-interactions Choose a Mood Interaction