UI/UX and Front-End Consultancy for a Product Placement Application

Marzee labs square logo
Marzee Labs SL
  • Score Awaiting client review
    n/a
  • Date Published
  • Reading Time 3-Minute Read
BEN

Working in close collaboration with the Branded Entertainment Network (BEN)’s development team in their internal marketing platform.

About the Project

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 worked 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 the BEN Platform.

Design

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

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

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

The 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 help with UX.

Theming

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

This work can happen in both directions, either we start with a 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 the 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 to extend capabilities to deal with repeated code between visually similar components.

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