Portfolio of HotSwitch Fan Experience modules. User Experience and Interface design by Andrés Aranguibel.
HotSwitch - Fan Streaming Experiences
📍 SAN FRANCISCO, CA | ORLANDO, FLHotSwitch is a funded software-as-a-service startup, with paying clients in the media and entertainment enterprise space. Its current position in the market and product offering is the culmination of multiple years of business model iteration and user experience design. With a current team of 12, it was co-founded in San Francisco by myself and two business partners. To learn more about the company and startup journey, click here. →
The product consists of a monthly-licensed software kit for clients to integrate onto their existing streaming applications, activating their audiences in interactive fan experiences. Among them, our team has launched live chats, hosted trivia games, audience polls, and sports data modules.
My Role
As a co-founder in an initial team of three, my role has consistently and unfailingly adapted depending on the company focus. Among those adaptations: business model ideation (pricing structure, market positioning), branding and client sales, investor pitches, video editing, user experience, and user interface design.
In the UX/UI space, my focus has been working in an agile flow with our development team, setting feature epics and designing user story flows in Sketch to deliver as individual spec sheets to our engineers.
This project has been investor-funded and featured across a variety of media outlets. Click here for a few journey highlights.
Overview
Media Above
The video above is a high-level teaser of the various interactive features HotSwitch can bring to streaming apps. It is intended as a sales material for getting excitement out of client leads and familiarizing them with the suite of products available.
My Role
As the video producer for this piece, I animated flows from our various products combined with motion graphics, and then edited the final video alongside the accompanying stock music track in Adobe Premiere and After Effects CC.
Process
General Release Iteration Workflow
The process below gives a high-level overview of the various steps involved from the very first stages of ideating and building our product, all the way to detailed feature creation and documentation for developer handoff.
User Personas
Our first step in ideating a prototype app was understanding the needs and wants of various user types. Mapping these out, along with their motivations and frustrations allowed us to prioritize our features and simplify our experience offering.
Moodboarding
Part of our branding effort as we approached a user-facing experience was to develop a visual language that represented television and entertainment as an industry. Edgy, colorful, yet recognizable were some of our guiding principles as we drew from external references.
Branding
The next stage in carving out our place in the market was to develop a simple, recognizable brand icon and wordmark – our logo. Many iterations led to the final product that exists unchanged to this day.
Wireframing
From account creation and content favoriting, to video streaming and fan interaction modules, all of our UX flows were born out of initial paper sketching. Most done in ideation workshops with our engineering team, whose input informed our understanding of existing capabilities.
Flow Documentation
As we locked in approved wireframes, we turned these into visual, documented flows for team handoff and visibility. This helped us keep track of release contents.
UI Explorations
Once we understood the flows we wanted to present, we took a high-level design approach for determining the appropriate, most compelling content layout.
UI Specifications
Working in Sketch with versioned, collaborative plugins, I made sure to generate annotated guide maps of UI specs to make the implementation workflow easier for our development team.
MORE IMAGES
Impact
Clients
Since launch, HotSwitch has signed paying clients across the US, Latin America, and Europe – among them TV Azteca, the second largest media network in Mexico, and Liga ACB, Europe’s largest basketball league based in Spain.
Investors and Partners
HotSwitch has also received over $500k in strategic seed investment from Alchemist Accelerator, Starter Studio Accelerator, Qatar Development Bank, and production companies Whisky Films, and BTF Media, among various other industry executive advisors.
