borderlands Echovision Live
Studio
Genvid Entertainment
Type
Interactive Streaming • Web
Client/Partner
Gearbox Software
Role
UX/UI • Motion
claptrap would be so proud
Echovision Live followed Eight wannabe Vault Hunters who fork over their hard-earned cash for a safely guided tour of Eden-6 in this viewer decision driven streaming adventure.
All the excitement with none of the danger! What could possibly go wrong? Turns out a lot.
Solving UX problems with Animation
A core concept of Genvid was decisions, the ability for users to decide the direction of the story.
Working with UX I helped create a chyron system, or ticker, modeled after sports tickers/lower thirds that would display relevant upcoming decision information so users could keep an eye on upcoming narrative choices.
Re-creating an iconic Style for the web
Myself and the UX/UI team at Genvid re-created the unique and iconic Borderlands UI, visual style and animation from the ground up… This time for the web by establishing a robust Figma design system and component structure.
Motion & Custom Lottie Libraries
I led the animation charge in tight collaboration with engineering using a suite of animation tools. All animation for Borderlands Echovision Live was created specifically for the browser with Lottie and Framer Motion in mind. To support various and animation needs we extended Lottie with our own custom library to solve for unique issues like live text/localization, states and state machines, dynamic variables, and optimization.
Every animation on this page was prototyped and tested in the browser.
TEAM CREDITS
UX/UI Direction
James Lipscomb
UI/Visual Design
Matt Webster • Todd Colby • Randy Hyunh
UX Design
Carlene Bruton • Sophie Shao • Melissa Kay
UX/UI Production
Tien Nguyen
Concept Art
Kaoklai Thepchinda
Motion
Matt Webster