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.ioCampus Bubble

Campus Bubble

Co-founder | Lead Product | Sole Creative

This is the story of taking an idea from a class project to a funded startup with clients nationwide, award-winning design, and eight employees.

View LiveView Prototype
Imported Layers Created with Sketch.
Redwood
NYC
Cocacola
Chapter one
Chapter 1
2012-13 | Beta
Launch the beta
backed by emory
Chapter 2
2013-14 | Vers.1
Raise seed round
redesign the product
Chapter 3
2014-15 | Vers.2
Launch the beta
backed by emory

Humble beginnings

As freshmen in college, my roommate and I started Nightly Labs. What began as a way to explore our shared passion for building stuff on the web gradually became a steady stream of client work and ultimately a way for me to keep up with tuition. More importantly, we gained a skillset that would prove useful when trying to build a startup selling private social networks to universities.

Fast forward a few years, Campus Bubble is born as a class project in an entrepreneurship course. We believed campus communication was broken. We envisioned and prototyped a private social network of groups (“bubbles”) where students and faculty could communicate and collaborate on the go.

Encouraged by our professor, we entered a business plan competition and won a prize. We saw potential for a real business and we could use our own campus as a testing ground. So we teamed up with Emory’s Campus Life department and secured a seed investment - the first and only investment Emory has made in an undergraduate venture.

We had no idea what we were getting into. The path ahead involved many twists, turns, and stumbles. We finally had a real opportunity, now it was time to figure out how to design and build a product.

Beta Timeline
Sep 2012

Idea born in business
school class at
Emory University

Business plan
wins prize at QEC
competition.

Jan 2012
Jun 2012

Alpha 1 relased.
Small friends and
family fundraising round.

NY Times
coverage

Jul 2012
Sep 2012

Alpha 2 released.
Increased adoption.
User research lessons.

Emory invests
$150k as partner &
first customer.

May 2012
Sep 2013

Beta launched.
Technical difficulties.
Tough lesssons learned.

Building the beta

With Emory's backing we got our chance. It was time to build a real, live product. No more pitching mockups, focus groups, and conversations with administrators. It was time to build.

We spent the summer before our senior year desperately hacking together Emory Bubble Beta. Our vision was a private social network designed for the needs of Emory’s student organization communication needs including robust group management, realtime messaging, and events. Sounds a bit too ambitious for 3 months? It was.

Starting from scratch
The Brand

My goal with the brand was to make the product feel Emory exclusive, student-friendly, and social. We distilled our product into three value propositions and the call to action, “Find Your Niche.”

Marketing Page

On the marketing page I strived to distill the experience into a few a calls to action. We produced a video the generated excitement and helped our launch marketing efforts.

Application UI

My first foray into UI design was both exciting and daunting. I had to learn how to prirotize information, interactions, and get the user to the value.

Marketing Collateral Side A

Early on, we found it difficult to explain what the product did and why it was helpful to students. My early efforts at collateral were clumsy. Continued on next slide.

Marketing Collateral Side B

Our marketing language was convoluted because we did not set out to test a clear cut hypothesis. Instead we were replacing deprecated software and didn't both to understand if there was still a need for it.

Mobile App

Our first mobile app never quite made made it to market. We realized just building a responsive design was not good enough. Performance, connection speed, and browser variation considerations were key.

Postmortem

A rocky launch fraught with slow loadtimes and a buggy mobile app revealed that our Meteor based web app could not scale and needed to be rewritten from the ground up. What’s more, we found out through surveying and our usage data that students weren’t very receptive to a messaging app that was controlled by their university.

So we decided to pull the Beta after collecting a couple of months of trying to patch up the bugs and lots of negative feedback. We couldn’t waste our time any longer. It was time examine what we had learned and start again, hardened by our experiences.

Survey ResultsTest Drive

Lessons learned(by failing)

How do we build something scalable and usable?

We were building in hackathon mode and that doesn’t work in real life. We weren’t building prototypes anymore.

We institute an agile development process.

With the help of a new CTO, we instituted two week sprints with a specs writing process, user research, unit testing, and a QA period.

How do we provide
real value to our customer?

Emory wasn’t sure how to implement the software and expected the network to take off organically.

We focus on solving problems that affect ROI.

It wasn’t enough to “increase engagement,” we needed to build something that helps the customer do their job.

How do we provide real value to the end user (student)?

The typical students isn’t interested in participating in a social network controlled by their university.

We focus on addressing an unmet need.

Students don’t need another group messaging app but they do need way to find out what’s happening on campus.

How do we establish and active feedback loop with users?

How do we separate need and want? How do we avoid feature creep and focus on delivering value rather than features.

We focus on learning about customer pains.

Through customer discovery conversations, focus groups, and user research we sought to define a new hypothesis.

Version 1 Timeline
Nov 2013

Intensive user testing
with Beta users.
Agile sprint process defined.

Rebrand to Campus Bubble
and app redesign.

Dec 2013
Feb 2013

Raised $500k seed round.
Advisory board established.

Early Vers. 1 limited
test release at Emory.

Mar 2013
May 2013

New product roadmap
based on insights from
early users and data.

Morehouse College
becomes second partner.

May 2013
Sep 2014

Version 1 released
at Emory University
and Morehouse College.

Chapter Two
Chapter 1
2012-13 | Beta
Launch the beta
backed by emory
Chapter 2
2013-14 | Vers.1
Raise seed round
redesign the product
Chapter 3
2014-15 | Vers.2
Launch the beta
backed by emory

A second chance

We had a tough start but many lessons were learned. It was time to pick up the pieces and start over. What were the positives? We had a much a better idea of what it would take to build a scalable product (ie it’s hard). We also had a time to rethink our approach fundamentally from a product, design, and technical side.

What problem are we solving? Is the problem specific to Emory? How did our solution stack up against the competition? Working with advisors, Emory staff, and test users, we formulated a new hypothesis. Campus Bubble needed to be a highly configurable communication tool for the customer. They needed to get actionable data and reach students where they are (instead of email). In terms of the end user, students want a central place to find out what’s happening on campus and keep with their groups.

With new insight and new resolve, we set out raise money and build a company the right way. In 2013, we graduated and Campus Bubble became a full time operation. We hired a CTO, grew the development team, managed interns, and worked out of our house. We knew it would be hard but nothing anyone could say could have prepared for the road ahead. The highs, the lows, the wins, and the bad days. “Livin’ the dream,” as they say.

After raising a $500k seed round from friends, family, and local angels, we were able to scale up our marketing and sales efforts. Morehouse College became our second partner institution as we geared up to launch our new and improved product.

We had traction, but the long road of product-market fit was still ahead. The important thing was to stay humble and listen to our early adopters.

It’s branding time

Now that we were a “real company” it was time to create a serious brand. Until this point, I had focused on the Emory Bubble brand since that was all our users would see. But as we raised money and expanded to other schools, we needed a polished company brand that felt fresh, student-friendly, and appropriate for the higher ed industry.

The previous logo was very literal, cartoonish, and too complex to work as an icon or without color. My goal was to find a new direction that was simple enough to work on any medium and bold enough to stand out from our competitors. A varied color palette was chosen to force the logo to work alongside our app’s branding system (which generates an app UI palette based on any customer’s school colors). The new band became the basis for a whole new round of marketing collateral, sales materials, and product sub-brands.

Before and After
New Logo
Old Logo
Color Palette
Typography

As a company, we weren’t just building something for our alma mater any more. It was our first foray into the world of fundraising, hiring, dealing with lawyers, defining processes, redefining processes, marketing, sales, customer success, support, and the list goes on. Each of these activities benefitted from a consistent design language and aesthetic making intelligent use of the brand. My goal was to ensure consistency. Above all else, I strived for a high standard of polish and clarity across every medium.

Rebranding Campus Bubble
A new identity

A new look, a new identity, a new future. Campus Bubble was official and it was time for an offical brand.

Marketing Page

The company's new direction culminated in an award-winning new marketing site.

New approach

We now had a better idea of how to address our customers, speak their language, and sell them on value rather than features.

Focus on pains

Implementation was major pain for many customers so we laid out instituted a comprehensive implementation plan we called "Our Process."

Sales Collateral

I developed a new batch of sales sheets, trade show banners, and a support site to assist lead generation and customer success.

Swag

Of course, any good marketing plan involves quality swag. Tshirts, stickers, bottle openers, sunglasses, etc. Students love free stuff.

Lessons in & from UX research

It turns out getting valuable feedback is not straightforward. I tried Typeform surveys, Verify A/B testing, focus groups, Silverback testing, and even just stopping people on campus to ask them a few questions about using Bubble. In the end, the best insight came from one on one phone calls where I could personalize questions based on usage and groupthink was taken out of the equation. The data gathered can be distilled into three main insights:

Problem

Students aren’t interested in a joining a network owned and operated by their university unless there’s a reason they need to. The customer will only implement the network as an official resource if it’s worth the effort. We are not really B2C despite what we may have thought.

Solution

The product must be built from the ground up to solve the problems of the administrators (our customers). So we decided to focus on improving existing processes like student organization registration and event registration.

1

Students are already using services like Facebook groups and Groupme to communicate with their study groups and organizations. Switch over cost is high.

Problem

Customers didn’t have a way of proving to their bosses that Campus Bubble was working at their school. We weren’t providing obvious and measurable ROI.

Solution

We had to build effective reports and focus on making the customer’s job easier. We were too quick to focus on the student experience when in reality the customer is far more important.

2

Customers needed to understand the value of the product. Why go through all the trouble of launching a private social network? What do they get out of it?

Problem

Customers are struggling to reach their students. Emails doesn’t work and keeping up with social networks is too hard for most schools.

Solution

We needed to use this overarching pain to drive all of our product roadmap decisions. Fixing campus communication through student engagement - that’s who we are.

3

The pain is there. Universities administrators are struggling to reach students as they increasingly ignore email and Facebook moving onto new networks like Snapchat.

Building Version 1

Every day was an adventure and a learning experience. But this time around, I felt there was a direction we had validated. I had to understand how our product fit into the the market. How did we stack up to our competitors? How do we define a product roadmap that balances customer needs, user needs, and even investor needs?

After internal discussions, consulting advisors, and reviewing our user research, a new product roadmap was established. We would rebuild in Python, React, and PostrgesSQL. Two week sprint cycles, formal specs, bug tracking, and a QA process were implemented. Based on user research, we decided to focus on a powerful customer administrative panel, events, and a robust cross-platform experience.

Desigining Version 1
A new UI, a better UX

After learning our lessons from the first launch, it was time to rethink the experience based on our user research. Above is a timelapse of iterations.

All about the feed

Our hypothesis was that students wanted greater control over the information they received. With the Feed, they could customize what they saw according to interests, organization membership, and more.

Easy to get involved

We wanted students to discover what their campus had to offer. The explore page featured prominent bubbles (groups) that offered valuable content like classifieds, events, and free food.

Message anyone

Early on in testing, users expressed interest in being able to message anyone at their schools without having to friend them on Facebook.

Academic Identity

We believed that if Facebook was for your social identity, LinkedIn was for your professional identity, then Bubble was for your academic identity.

A Better mobile app

This time around, we shipped a fully-functional mobile app through Phonegap. Notification and swipe event interactions helped make the app more engaging.

Admin panel

Working with our early adopter's feedback, we built the foundation of administrative panel that allows admins to moderate content, monitor usage, and configure the social network

Conclusions

Finally we were feeling on the right track. Two real customers, a working product, and a foreseeable runway. Most of the work was ahead of us but at least we were doing things the right way.

The launches at Emory and Morehouse went reasonably well as we saw between 25-35% of campus active every week. This number fluctuated depending academic seasonality and how often university administrators posted important content. With more active users, we were able to learn more about how the app was being used. Even more importantly, customers were happy because they were reaching students in a way they engaged with. We used this opportunity to produce testimonials and secure referrals.

Test Drive
Chapter Three
Chapter 1
2012-13 | Beta
Launch the beta
backed by emory
Chapter 2
2013-14 | Vers.1
Raise seed round
redesign the product
Chapter 3
2014-15 | Vers.2
Launch the beta
backed by emory

Gaining momentum

With two successful launches under our belt, we felt we had something to build on. We had a validated direction, two happy customers, and solid internal processes for building, maintaining, and supporting the product. Now it was time to double down on our marketing and sales efforts. On the product side, we had two partner schools and an active user base of more than 5,000 students across both networks. Real data and customer insight to shape the future of the product.

Now it was time to grow. My focus became identifying what was working and what wasn’t. Between making sense of Google Analytics, running focus groups, and regularly calling users I started to understand where there was room to improve. Students wanted a snappier, easier to use mobile app. Administrators wanted clear cut ROI and needed more help implementing the product than we had anticipated.

We had a foothold now. A growing user based, engaged customers, and the beginnings of data-validated decision making. The higher education sales cycle remained a slog (8-12 months). Efforts were concentrated on generating leads, attending trade shows, and fine tuning our marketing language.

Ver.2 Timeline
Sep 2014

Successful launches at
Emory and Morehouse.
Room to improve.

New UX insights
and mobile app
redesign

Nov 2014
Jan 2012

Nightly Labs digital
agency is started to
bring in cash.

Leads generated
throughNASPA
conference

Mar 2015
May 2015

12 new partner
universities join.
Gaining momentum.

Morehouse admissions
bubble successful

July 2015
Sep 2015

Indiana State and UNG
join as admissions
customers.

Evolving the product

Post launch user testing immediately revealed we had our work cut out for us. With a small team and in-house Python expertise, we had decided to build a web app and use Phonegap to create mobile apps for iOS and Android. However, besides adding push notifications, we did nothing other than design and build a responsive front end. This was a mistake. Users complained the app was slow and buggy. They felt it was difficult to navigate and unintuitive. This was a “stop everything and fix it” kind of issue.

So we decided to dedicate several sprints to creating a brand new, optimized for mobile application workflow. Completely different navigation, workflows and forms. Every step of the way, we tested with students and customers to ensure we weren’t shooting in the dark. On top of the redesign, we spent time speeding up the app by addressing technical debt and using mobile native elements and interactions. The end result was received positively and dramatically improved app engagement among mobile users.

Designing version 2
App redesign part 1

Feedback from students was overwhelming: they needed a better mobile app. After testing several prototypes, I settled on a new direction.

App redesign part 2

A new mobile-friendly navigation, simplified user flows, and native menus were among the major improvements made.

Wireframing Marketing Site

We learned a lot from our first customers and from trial and error during sales. It was time to rethink the corporate site.

Mocking Marketing Site

It was important to implement our new knowledge of our customers, the industry, and the problem we're solving.

Wireframing customer page

We needed a way to showcase all our partners and display case studies. We produced a testimonial video that helped us educate potential customers.

Mocking Up Customer Page

The final result was a cleaner, simpler, conversion-optimized marketing page that won us a few awards. More importantly, it helped us generate leads.

Wireframing Admin Panel

Our first attempt at an administrative panel allowed us to test with real customers and develop plan forward. A flexible design built on Flask Admin was needed.

Mocking Up Admin Panel

My goal with Admin Panel was to provide the clearest possible UX while leaving lots of room for growth as we added functionality and responded to customer needs.

Wireframing landing pages

Anayltics indicated that many students would reach the homepage of the Bubble and never sign in. Further research indicated that students needed to understand what the service was before buying in.

Mocking up landing pages

So I designed and A/B tested new landing pages and surfaced important information without having to login. We saw conversion go up after a few rounds of iteration.

Better icons

On top of the new app design, I developed a custom icon set to ensure a consistent look and feel throughout the product.

Focus on the customer

As our first customers began to truly use Bubble, we began to learn what customer success was. Implementation, training, and support are all crucial to ensuring a happy customer, an engaged userbase, and a successful product. We had to learn how each customer defined success and deliver proof convincingly.

Every month, we sent detailed reports for each customer summarizing traffic, engagement, and insights on how students used the network. We established a roundtable of power users consisting of administrators and students to help us shape the product roadmap and identify key areas of improvement.

Based on the insight gathered from user research and analysis of usage data, we planned, spec’d, and shipped a host of functionality meant to solve customer problems.

Events

Event check in functionality allowed customers to take attendance at events without bulking card swiping hardware and clumsy sign in sheets. An all new calendar UX made browsing events on the app seamless and intuitive.

Events

Reports

Automatically generated reports detailing student “engagement score,” DAU/WAU/MAU, and trending content helped customers prioritize communication efforts and prove the product’s worth to higher ups.

Reports

Branding

An advanced branding engine allowed us to customize the look and feel of each app the school’s colors, feature needs, and special requests. This differentiated our product from competition and gave the customer a sense of ownership.

Branding

Segments

Our new and improved Admin Panel gave administrators the power to segment students according to profile fields and behavior. This allowed for targeted communication and more intelligent reporting.

Segements

Integrations

Integrating into school’s single sign on systems and CRMs helped us make the sale and ingratiate the product. Importing content from existing event feeds and blogs helped the customer centralize content and speed up implementation.

Integrations

Paperless

Facilitating on existing processes like organization registration, event registration, voting, and event check ins transitioned customers to paperless processes. Moreover, customers gained a better sense of what their students were doing and interested in.

Paperless

As we tested and released the new features and enhancements, the results were very encouraging. Customers were delighted by the concrete ROI and wanted to purchase new integrations/customizations. Happy customers became happy referrals as we grew to 12 university partners over the course of six months. We hired more developers and a customer success specialist. We had identified the pain and were reaching some level of product-market fit.

Try out the demo

What’s next?

We have momentum but it’s only the start. Campus Bubble has a long way to go and the product has lots of room for improvement.

In collaboration with Morehouse’s admissions department, we were able to experiment with using Bubble for admitted students. Divided into bubbles according to their homestate and declared major, admitted students used Morehouse Bubble to connect with other incoming students, find roommates, and ask questions about attending Morehouse. To our surprise, it was a successful pilot and lead to increased enrollment yield. Since then, we’ve signed two new partners that will be using Bubble for admissions.

Until this point, we have focused on solving problems for Student Affairs/Campus Life departments. But admissions departments are ROI-centric and make decisions quickly. So a new challenge faces us but we’re excited to explore a new space and continue solving problems for universities.

Sign up for our newsletter
Redwood
NYC
Cocacola