CLIENT

Kellogg's

ROLE

Lead Product Designer

RESPONSIBILITES

Wireframes, Product Design, Prototypes, Design System, Asset Creation

TOOLS

Sketch, Zeplin, Illustrator, InDesign,
InVision

jb-Macbook

joyböl

SUMMARY

Kellogg's was ready to debut a new brand and product: joyböl, a shelf-stable smoothie bowl. Because of the timeline, we needed to work in parallel with the agency that was creating the final brand look and assets. We worked quickly to create a responsive, mobile-first site as well as establishing photography and iconography for the brand. In order to appeal the joyböl audience - on-the-go millenials - we based our design system and strategy on the unexpected, leaning heavily on the "hackable" nature of the product itself. Utilizing texture, surreal photos, and custom icons, we delivered a responsive experience along with a first-in-class Amazon A+ page - a new concept for Kellogg's.

Jb_thumbnail

Discovery & Definition

Jb-uxcomp-sm

Design Process

sketches-comp
Jb-wirecomp-sm

Design Principles

Screen Shot 2018-12-18 at 11.40.29 AM



AUTHENTIC
joyböl is authentic, and speaks to its users on their level. By using textured surfaces in the photography, we're able to incoporate a more tactile feel to the site - making the brand not just feel more real, but grounded in an actual space that the user frequents.
Screen Shot 2018-12-18 at 11.40.35 AM



PLAYFUL
Tying together the colorful personality of the brand with representational spaces creates a playful balance between fun and relatable. We're inspired by the colors featured on the packaging, along with the treatment of type.
Screen Shot 2018-12-18 at 11.40.40 AM


UNEXPECTED
Just like joyböl disrupts the normal morning breakfast routine, we disrupt the expected experience for users without creating a barrier to the product. Each section has its own personality, much like each of the flavors.
Screen Shot 2018-12-18 at 11.40.45 AM



FLUID
We counter the sharp angles and shapes of text elements with round, organic elements and interactions inspired y the "just add water" ease of joyböl. Each interaction is fluid and surprising, mimicking the joyböl creation process.

Design System

jb-systemcomp-sm

Product-Inspired UI

The CTAs on the site were inspired by the mechanic of pouring water into joyböl, but much of the remaining interactions were created to reinforce the hackable, unexpected nature of the product.

jb-btn
jb-producthover-sm
jb-navgif
jb-pdpnav-crop
jb-producthover-row

Photography

jb-photocomp

Typography

JB-type@2x

Iconography

jb-icons2

UI Design

jb-ui-comp-sm
Jb-iphone

ABOUT

I'm a Brooklyn-based product designer and illustrator. I specialize in experience design (UX/UI) as well as digital illustration.

ABOUT

I'm a Brooklyn-based product designer and illustrator. I specialize in experience design (UX/UI) as well as digital illustration.

CONTACT

For inquiries or questions, you can email me at hello [at] carinatous.com. I'm currently available for fulltime and freelance work.

SOCIAL

Interested in seeing me elsewhere? Follow me:
WNW  | Etsy |  Twitter |  Instagram  |  INPRNT

OTHER

Hey, thanks for looking at my work. And for reading everything in the footer, too. You've got an eye for detail.

All work © Carina Tous 2020.

All work © Carina Tous 2018.