Giovanni.ioGiovanni.io

Who i am

My name is Giovanni Hobbins. I was born in Italy and grew up in Wisconsin. More?

What i do

Product Designer at FullStory.
Co-founded and sold Campus Bubble andNightly Labs.

Recognition
Get in touch

I’d love to hear about what you’re
working on. contact(at)giovanni.io

path-2 Created with Sketch.
Currently living in
Atlanta, GA.
path-2 Created with Sketch.
Born in
Milano
path-2 Created with Sketch.
path-2 Created with Sketch.
Grew up in
Wisconsin

A bit more about me

Since you asked. I learned to love design when I realized it was about solving problems for people and not just “graphics.” Studying philosophy in college, I grew to see beauty in systems of thought. A great product needs to be a coherent, consistent system. Good design enables this.

I live in sunny Atlanta where I enjoy walking on the beltline, playing soccer, and spending time with friends. I also own a cat named Micia. She’s a bit grumpy.

Giovanni.ioCocaCola

Coca-Cola

UI/UX DESIGN | PROTOTYPING | TUTORIAL WRITING

Conceptualizing, designing, and prototying Coke’s internal learning and collaboration platform.

View Prototype
Imported Layers Created with Sketch.
Campusbubble
Wela

I jumped at thet opportunity to work with Coke on an internal project born out of a simple frustration: too many emails.

Coke has internal teams for everything from branding, to digital signage, to public relations, and beyond. Every team has valuable resources like graphics, videos, data, and documents that other teams constantly request access to.

So Coke saw a need for an internal repository of resources each team could curates and updates. On top of that, Coke wanted to provide vetted educational materials on the topics like CSS3, SVG, and Javascript to its digital teams.

I was tasked with conceptualizing, designing, and prototyping an internal tool to meet these needs and create high quality tutorial content.

The need:

A central place for coke’s teams, resources, and tutorial content. Coke also asked us to kick start the content side by providing six full-fledged tutorials on CSS3 and SVG.

The solution:

After interviews and discussions with Coke UX team members and stakeholders from other teams, the idea surfaced for a “internal digital directory” - a one stop shop for finding the team or resource you need to work with.

Interactive

The name became Coca-Cola Interactive, Coke’s Internal Digital Directory. Each internal team gets an “agency” page where they provide resources, a request form for custom work, and some biographical information.

Each resource (e.g. CSS3) contains 2 tutorials (beginner and advanced) and a final project with an interactive demo. Coke wanted each demo to be Coke-branded and vetted by it’s UX team.

Coke wanted to handle the front end coding internally, so my job was to provide the design files (Sketch) for desktop and mobile and create testable prototypes (Invision).

Designs for the Styleguides, UI Patterns, SVG, and CSS3 microsites were created. 6 tutorials and 3 interactive demos

Style Guides

The Style Guide microsite was designed to be easily filter and browse a high volume of brands while maintaining each brand’s unique look and feel. Each brand’s Style Guide contained colors, typography, usage guidelines, and a variety of downloads.

UI Patterns

The UI Pattern microsite was designed to act as Coke’s internal codepen. The design had to accommodate a large variety of elements of varying categories and applications.

Tutorials

The CSS3 and SVG microsites housed a working demo and 3 in-depth tutorials covering each topic. The tutorials contained code examples, downloadable resources, and interactive learning tools.

Mobile

Coca-Cola Interactive needed to be fully responsive and retain solid UX on mobile devices.

The vending machine demo was created for the CSS3 tutorial. The demo contains 4000 lines of CSS and even got some attention on Twitter and Codepen.

Users can choose a soda from 4 options and drink it.

Try it out!

See the Pen

See the Pen

The loading animation demo was created for the SVG tutorial. The animation was designed to complement and longer load time.

A reset loop was implemented for the codepen demo.

Try it out!
Imported Layers Created with Sketch.
Campusbubble
Wela