KP
Kelley M Pelleg
Branding-cover.png

Enterprise Video Branding Tool

I love this example because it shows you don’t always need a long timeline to bring a lovable concept to life. With less than two weeks to launch the new Sherpa video player, Product Management decided we could not launch the new player without a front-end which enabled enterprise admin to adjust the look and feel of their video player. Formerly, Sherpa had provided custom player branding as a professional service. In a pinch and without delaying the launch, a developer and I whipped up this simple UI which allows the user to configure the player with or without knowing how to code.

The best part: people loved using it!

Preview Pane.png

A dash of live preview

Can a live preview be faked? Within the tight deadline, our developer didn’t have time to build a live preview next to the branding editor. However, we wanted to include something visual to indicate & preview configurable changes to the user. The risk in making this preview seem too real was that the user could be fooled into thinking there was a bug if the preview did not respond to their changes. Using wireframes as inspiration, I went for a pared down layout with an obviously fake player to indicate to the user that this was just a representation of the configurable changes, not the custom code they could inject.

Chrome-UI.jpg

Systems Thinking

Systems thinking truly made this UI come together quickly. As I was designing Sherpa’s new player, I was intentional about theming and how visual design primitives would scale across the page. To bring Sherpa’s branding feature to life, I sought inspiration from enterprise tools I’d used before, like Zendesk, as well as theming tools I’d designed before, like Mukurtu CMS. I had designed the player with as few visual variables as possible so that when it came to branding settings, the client could choose from a limited choice of color selectors and drop in their logo to meet minimum branding compliance. For the more opinionated brands, additional customization was available by CSS.