Overview

Client SUMMARY

At Otter Network, a former startup based in Austin, TX hired me to be their Head of Design for both the product, a multi-camera video streaming app, and the brand of the company, working closely with the CMO to support sales and marketing efforts.
The platform consisted of a web-based application that would allow you to connect up to 10 smartphones for a video stream and switch cameras mid-stream while also broadcasting it to major video streaming platforms like, YouTube, Twitch and TikTok.

Challenge

At Otter Network, a former startup based in Austin, TX hired me to be their Head of Design for both the product, a multi-camera video streaming app, and the brand of the company, working closely with the CMO to support sales and marketing efforts. The platform consisted of a web-based application that would allow you to connect up to 10 smartphones for a video stream and switch cameras mid-stream while also broadcasting it to major video streaming platforms like, YouTube, Twitch and TikTok.de of a div block.

Process & Tasks

I utilized my background in user research and testing to take a user-centered design approach as Head of Design. I analyzed what functions mattered most to our users, simplified complex flows and prioritized new features. By having oversight of the brand, I wove the branding throughout the product while incorporating product strategy, user insights and sales feedback.

User Research

User Journey & User Flow

Every good product starts with good research. To kick off the product design process, we interviewed potential users to develop a journey, talked to stakeholders to outline sales goals for the signup flow and built a roadmap of features that we knew the users wanted.

User Journey

User Flow - Signup

User Flow - App

UI Design

Design System

The Otter Network platform consists of 2 apps, an admin system and would later launch 2 more products. The design system would have to flexible for all of the products to give the user an omni-channel experience.

Brand Color Palette

Product Expanded Color Palette

Roku UI design style sheet for developers

Product Design

Otter Director Web & Mobile UI

When user testing revealed the original product UI was clunky and confusing, I led the effort to scrap it and redesign from the ground up. A key challenge was simplifying camera connections, and I partnered with the development team to create a new solution that made the process as easy as tapping a link in a text message. The examples here demonstrate how I evolved the UI and experience, and the screenshots illustrate how the design system I implemented now scales into a seamless omni-channel experience.

Example of omni-channel UI design across web and mobile platforms.

Otter Director (Ver. 2.0) - Home/Dashboard

Otter Director (Ver. 2.0) - Add Cameras

Otter Director (Ver. 2.0) - Connect Live Streaming Platforms

Otter Director (Ver. 2.0) - Switcher Application

Otter Camera (Ver. 2.0) - Connect to Shoot

Otter Camera (Ver. 2.0) - Shoot in Progress

Otter Camera (Ver. 2.0) - Live Shoot BTS Image

Otter Teleport (a build your own streaming service) - Roku Design System

Web App Prototype Mobile App Prototype

Outcome

The overhaul of the UI and UX flows of the platform were well received and loved by users. It helped, coupled with new marketing efforts, to increase new account signups and uses for the platform.

Learnings

Aside from all the Product Management skills I sharpened at my time with Otter Network, one of my key learnings was how to scale a design system for an expanding product suite to multiple platforms. This comes in handy for any enterprise projects that look to function across web, mobile and beyond.

Head of Product

Overview