BEN Application

UI/UX and front-end consultancy for the product placement Application.

2014-2019

The Branded Entertainment Network (BEN) is a global entertainment marketing company delivering premium brand integrations across streaming, TV, film, and influencer programming. BEN's mission is to connect global brands with consumers through the power of popular entertainment.

Marzee Labs has been working with BEN since 2014 as a consultant for the BEN Platform. The BEN Interactive Platform provides global brands and media buyers with instant, upstream access to entertainment placement opportunities for international brands. The platform is an efficient solution that enables the creation of media plans, purchase and marketing goals and target audience, while providing comprehensive metrics that enable brands and agencies to effectively track their marketing performance and ROI in real-time. At the same time, the BEN team manages all product placement logistics through the app, managing leads and opportunities while tracking impression delivery across all media.

We work in close collaboration with BEN's development team in order to guarantee an outstanding visual identity and improved user experience for BEN Platform.

BEN Application
  • ReactJS
  • SCSS
  • UI/UX
  • Front End

Project development

  • Design

    For the development of the Platform interface, Marzee Labs handles several types of deliverables and processes.

    We have worked on all aspects of design for the BEN platform, including UX/UI. We design singular components and also full page layouts.

    In order to standardize the app visual identity, the team focused on updating the UI components matching, when possible, with the overall BEN brand guidelines. We have created a sketch library of components that we use to assure consistent elements on the various layouts we create.

    BEN Platform is a complex framework that relies on extensive lists and advanced search capabilities. Each list item displays several data points and there are also nested lists of child entities.

    Each entity is edited using a dedicated long form and one of the main challenges was to design a layout that would serve the various form types. We decided to use clearly defined form sections and a sticky menu to navigate and report errors to users. Consistent form inputs, selectors and checkboxes also helps with UX.

  • Theming

    We work alongside BEN's developers, while their focus is on the functionality and back-end work, our is on writing styles of the components and occasionally writing template code.

    This work can happen in both directions, either we start with basic React component structure and use mock data or the back-end work is done first and we adjust the existing component code.

    Platform performance and maintainability were strong points, and with that in mind we decided to have a very small base of CSS styles and have each component be responsible for its own styling. We used BEM class structure combined with state classes and a shared initialization file is used by all SCSS files in their respective component folder. We also rely on SCSS extends capabilities to deal with repeated code between visually similar components.

    BEN Platform is an organic evolving platform, thus the foundation for our work had to be thought out in advance and have a solid base for a successful future.