Umbel Engagement Builder

Umbel Engagement Builder


Umbel is a platform created to help marketers in the sports, media, and entertainment industries grow their fanbase, target their fans, provide them with better in-venue experiences, and sell more tickets. Umbel achieved this by allowing marketers to import all of their fan data from disparate systems and consolidate that data down to the single fan level providing a rich profile about each fan.

In the product, marketers could view how segments differed or compared to their audience as a whole to find cohorts of people to market to on Facebook, email or other social networks and then view any Facebook campaign results in the app. Umbel also helped marketers acquire new fan data via our hosted “Activations” we called Activators (later referred to as “Engagements”). These were micro-sites we hosted for our clients usually consisting of enter-to-win contests or giveaways our users could launch in just a few minutes with a goal of collecting a users information for the chance to win or receive a prize.



Umbel Engagements are Umbel hosted contests, giveaways, and other promotions created by our clients to engage with their fans in order to collect data about them and better understand who they are demographically, geographically, and socially.

The previous version of how you create an Umbel Fan Engagement involved lots of steps. This often made it a bit confusing for our users to understand exactly what was being created. Most importantly however, we needed to rebuild them to make them more stable, scalable, and provide them with the ability to create Umbel Premium Engagements that were currently custom designed/developed in house at a cost to the client. In addition, we wanted to improve what all these engagements looked like once they were live. With the rise in Engagement creation due to a recent update that provided our clients with a better way to view the success of their Umbel Engagements, the need to improve the way they created Engagements was finally getting some prioritization.




  • Unify and streamline the creation process of Simple and Premium Engagements. We didn’t make it clear how each Simple Engagement was different or why the creation process differed so it made it confusing for the user to understand why we offered various types of engagements. We will need to evaluate the Premium Engagement process to see where the commonalities are compared to Simple Engagements.
  • Merge the creation process into a single flow. We wanted it all to feel like one experience instead of having 2 different areas for creating a Simple or Premium engagement.
  • Make creating a Premium Engagement self-serve. These were all created in-house by our Engagement Design Team and we wanted to offer a self-serve option.


  • Help the user better understand what the live version of an Engagement looks like. In order to speed up the creation of each Engagement we felt we could do a better job of showing them how each customization they made to an Engagement manifested itself for their fans.



This one would take a great deal of organization, iteration, and flat out stamina to come up with a system that met all the requirements. I would have to spend a great deal of time talking with stake holders and our clients. A good place to start would be to begin organizing/synthesizing notes from previous Engagement interviews and testing to see what issues had  surfaced over the past year and a half and were still relevant as well as digging into the aggregate usage data in Pendo to see what some that might show.

I’d start by watching how our users created Simple Engagements and how our internal team created Premium Engagements then synthesize those findings to discover commonalities. That would help me figure out what our design priorities would be. With those in place, I could then dive into the concept phase like I typically do. I’d start on paper, then move to low-fidelity wireframes to flush out some of these ideas quickly, and then conduct an internal round of feedback with those who build these for our clients to gauge direction.

After I find a direction to head in, I can then start iterate and test with our clients until we get to a place we are starting to feel comfortable. At that point development can start to get involved and discuss what we can start to build on the backend while I start to polish the look and feel of it. Once it was in an Alpha phase, we could do more client testing to continue to finesse the experience.


  • Creating any engagement should feel like it’s all the same system. The components of each one might be slightly different, but the primary flow of creating both Simple and Premium Engagements should remain the same.
  • Improve the “preview mode” and make it responsive. Help the user understand what pages that exist in an engagement so they have an idea what the live version will be like on various screen sizes.
  • Make selecting different engagement types more flexible as well as the engagements themselves. It should be easy to switch between creating different types of engagements and not require the user to start from scratch if they selected the wrong type of engagement. The engagements should also be flexible in the pages that exists to allow for flexibility in how our clients would use them to collect data.
  • Make data collection that isn’t always necessary an optional step. The “form” step should be optional and only needed if the client is looking to collect additional data from the user that they wouldn’t get from Authentication via Facebook, Twitter, or LinkedIn.
  • Editing color scheme, fonts and other settings should be in a consolidated area. This was currently spread out and would help with IA expectations of users.



I came up with the idea for a “page builder” editor so the user could see what they were building in almost a “live view”. This new editor would provide users with more control over various things like text area editing and branding colors/fonts. This view also allowed me to surface settings and other pertinent options in a single frame instead of in multiple steps, as well as add some of the configurations that would appear in-page to be edited where they would actually appear once it was live. As a whole, we were able to consolidate and simply all engagements while still retaining the uniqueness of each different type. In addition they are able to drag their browser to view how the engagement looks at smaller screen sizes all the down to the mobile view.


  • Feature discovery via user studies
  • Interviews (internal & with clients) about Umbel Engagements in general
  • Digital prototype review with users (internal & with clients)
  • UI/UX design
  • Requirement documentation/tickets for development