Live TV meets interactive mobile engagement
I provided graphic and interface design as well as web development support for a real-time, hybrid web-enhanced experience that connected Univision viewers to interactive content and brand offers —— all from their phones.
Overview
Dual Impact
A visual and web system that served both user and brand.
For over two years, I designed and developed in-app and web-based content for Univision’s interactive TV campaigns via the Mobii app. I particularly liked that the app used wrapped microsites as a way to extend the app experience. Developing on the web in this way gave me the flexibility to try and improve the user experience in doses through the content delivered to the users.
Challenge
Velocity & Value
Delivering fast, adaptive design at scale.
The team needed to move faster and the design organism needed to be smarter so the content experience could scale without bloating. I know; I worked between the tension of design and front-end supporting a fast-paced business team and creatives that had their own set of deadlines.
Approach
Strategic Response
Agility through dynamic web experiences.
I designed a process using Photoshop, a set of Sketch templates, and Abstract (versioning for non-developers) I created to streamline the production of the bits of content and dynamic micro-sites often associated with them. This supported a flexible, web-based strategy for the app allowing us to deliver a native look and feel while harnessing the speed and adaptability of the web, making it easier to meet the evolving needs of our content creators and advertising partners in real time.
Process maturity
System Foundation
Designed to move at the speed of broadcast.
Both our design and web infrastructure were forced to mature under the pressure of the rapid environment. In response to the flexibility and speed required I executed the following:
- Migrated to Foundation away from an undocumented framework for short-term consistency. Eventually I moved to React.
- Moved to Sketch from ad hoc Photoshop templates with deeply embedded Smart Objects.
- Moved to a custom design system that emphasized reusability, responsiveness, and modularity with a core set of design elements comprised of base styles, essential components and use documentation.
Outcomes
Measurable results
Fast cycles, strong collaboration, better design.
The shift to a lexible, web-first system had measurable impact across several dimensions:
- Team efficiency grew: Content, design and marketing teams could work more independently and collaboratively using a shared design system.
- Scalability was achieved: The same design system and infrastructure were reused across campaigns (AMC and more) , minimizing redundancy and increasing output without added complexity.
Reflection
Personal Growth
This project deepened my ability to ship fast.
What began as a workaround became a scalable design process. Working under this level of pressure taught me how to turn rigid assets and tight timelines into a system that bridged creative, development, and business. It shaped how I think, not just as a designer, but as a translator between vision and execution.
Contact Me
Have a project or problem to solve?
Use my form, send me an email at hello@johnhansen.design or schedule a call.