Creating expressive and delightful monster stickers for the Coco app

Overview

 

Synopsis

Coco app is a free messaging app that allows users to chat, call or voice call their friends for free. While at Coco, I helped clean up and re-design various screens to fit the re-brand and improve the user experience.

Details

Team: Coco

Platforms: IOS/ Android/Web

Role: Product Designer

Timeline: 2 weeks

Skils: Visual design

Lorettamay-design-Coco-app-screens.png

Company Problem

 In 2014, Coco brought stickers into their app to allow users to communicate with fun expressions. The Lil’ Monsters pack was the first in-house pack, designed by myself. After learning about all the requirements that go into creating a successful sticker pack, I designed a sticker design guideline for all future sticker artists.

Sketches

I learned that it wasn’t enough to create delightful characters. They each had to express an emotion that people want to communicate in every day life. I started with the basics, such as happiness, sadness, laughter, fear, anger, and sleepiness. Some of them I added words or lines to add to the emotion.

The key is to over-exaggerate the details (like the ice cream cone, the rain drops, and the spider) because they are viewed on small Screen sizes.

sketches.png

Final designs

We analyzed other market places like Airbnb, Etsy, Getaround, and thumbtack for ideas on how we could improve our messaging around pricing. Airbnb has a really great example of how to provide the right amount of context. They also force a host to determine pricing settings in the listing flow, which creates additional friction but sets a host up for success.

Lorettamay-design-Coco-app-stickers.jpg
 

Learnings

  • Most sticker packs are of one character in different emotions.

    1. Consider what emotions/situations people want to use to express themselves, and also tailor them to the personality of your character(s). Hunger, Fear, Sleepiness, happiness, sadness, anger, laughter, No, Yes, Ok, LOL… etc

    2. If you do multi character packs, choose to unify them with line quality, eyes, markings, teeth, color etc. Make sure they look like they all belong together.

    3. Over exaggerate the details because they will be viewed on small screen resolutions.

    4. There will most likely be other assets you need to create (icons, banners, thumbnail sizes etc)

    5. Most stickers require a thick white stroke around them. Make sure this is smooth and even around your character.

Previous
Previous

Babycenter app spot illustrations

Next
Next

Increasing trust in Turo pricing