home / Hooptap

Design in a business process. From B2B to product philosophy.

The context

Hooptap was a startup focused on providing solutions for engament. Based on game mechanics and other features, the goal was to increase engaging numbers, and the formula was...

The very beginning

At his early stages the startup was working on his own app inside a "B2C" business model. Brands could subscribe to in-app campaigns. It was downloadable from the stores and users could win prizes and offers from this brand campaigns. At this time I was freelancing and started collaborating doing UI work, for both Android and IOS platforms.

The Golden Age

Soon the business model pivoted to “B2B” – means that you are selling a product or service to other businesses. This model of custom B2B apps worked much better. We developed app’s for big companies, and also big brands such Discovery Channel, Nickelodeon, Rtve ClanTv, Heineken, Travel Club, MTS, Teletica, TVI, Canal 13, Danone, MasterChef, Consum.. and a lot of other companies. At this moment the company was closer to “break even”.

Brands & companies
Some great brands & companies we worked for (Case studies available on demand).
Modular design for business efficiency

But there was a big problem: scalability. The team could not make app’s as fast as the business model needed. We started to work on modular components, and also the design evolved this way, and started to build modular design for reuse. The idea was to integrate a unique back-office environment, but to deliver a custom interface for each business customer. Same tools, same core features and same technologies were tailored to specific clients with custom look and feel, custom workflow, and custom server infrastructure.

All the core features were broken into components, the content consumption into different repeatable layouts, and all the ui elements into atoms. I am talking about design systems and atomic design.

The team worked hard to build a large number of features that included profile status, notification system, recent activity feed, friend network, ranking(s), news feed, reward system (points, badges and prizes), quests, marketplace, second screen experience, voice recognition.. and by the other side a dashboard for content management that we friendly referred as “Skynet” 🤖.

Product philosophy, API & SDK’s

No matter how fast you release new features, you’ll never be able to meet the needs of every single customer. But having an API gives your customers (and their development partners) the freedom to customize your software and build the exact solution they need today, not when you release the next version of your software.

Mockup's, prototypes & live demos

Internally, it can be hard to show progress.

This might not be an issue in all companies, but it was in our case. Executives love demos to see progress, and these demos are usually based around the product’s user interface. The challenge with APIs is that they don’t have a UI—it’s just code. And for most people, it’s hard to see progress just by looking at code.

So we decided to mockup a sample using the new javascript sdk that was connected to the new API. After some validations, research and benchmarking the challenge was to make a web-based widget that included all the main core features.

We had all the features (almost) ready, and our user workflows were defined, so I started to design all the elements (atoms), components, templates and screens.

First Prototype
UI sample of main screens and interface elements.

Then started prototyping to test meaningful interactions, behaviours, and for product testing pourposes. The idea was well received, and the marketing team was interested in exploring more the possibilities of this demo.

First Prototype
Early stage Principle prototype showing basic interactions.

So we began to code a live sample using the new sdk, and api. It was based on javascript, and implemented a simple template system based on underscore.js to manage views and data. Technically it was nothing fancy, but the live prototype was superuseful for testing behaviours, and developing UI and microinteractions.

HTML & JS live prototype for testing pourposes.

Then implemented more complex features, such login. This allowed the team to test and get feedback about implementation issues related to sdk complexity.

HTML & JS prototype for testing & validation pourposes.

Finally we implemented the widget inside a website and demonstrated the capabilities of the SDK and the API. You can trigger any action, like click, visit a page, scroll, etc and call the API to send and return data.

We worked, just for testing and validation pourposes, on a ficticious client which has an ecommerce inside entertainment/music industry. Our client is interested in rewarding key actions to his visitors, so we defined a strategic plan to engage the user.

We defined user journeys and targeted key user actions related to content and others related to core features:

SDK integration on a live demo website. Testing & validation.
Key learnings

Startups are hard. We made a bunch of great apps, but the latest product here described never made it into the hands of our customers. I'm proud of the work the team did and grateful for the opportunity. I'd like to specially thank the dev team for all of their lessons, for sharing their knowledge and for helping me to shape as the designer I am today.