Starboard Extras

Responsive design

Design system

Invite team members

Tablet

Mobile

About the project

Starboard Extra is a software solution designed specifically to streamline the management of background actors for film productions. Starboard Extra simplifies casting, contracting, scheduling, and communication, allowing for smooth interactions and an organized workflow, thereby significantly enhancing overall production efficiency.

Challenge

Joining Starboard Extra mid-project—after the wireframing phase was already complete—meant the design and development timeline was compressed from the start. With a large product scope ahead and limited time to execute, the team faced a critical decision: selecting an open-source design system that could accelerate our work rather than slow it down.

The stakes were high. The design system needed to satisfy multiple non-negotiable criteria: it had to be open source, integrate seamlessly with our existing Figma environment, and cover the majority of our component needs. Choosing a system with significant gaps would mean precious development time spent filling those holes instead of building the product itself.

Approach

Before selecting a design system, we needed to understand the full scope of our needs. Our team of three designers conducted a time-boxed Cut-up workshop based on Atomic Design principles, where we disassembled the existing wireframes and isolated every individual component. This process allowed us to spot inconsistencies where multiple styles were used for the same element and gain a clear understanding of the requirements for our future design system. With our inventory complete, we evaluated open-source libraries against our specific component needs. Ultimately, we selected Material Design, as it satisfied all of our needs and helped keep our development timeline about 33% shorter by reducing the need for custom UI components.

2nd Challenge

Mobile navigation often benefits from its own patterns rather than a literal desktop translation, so it felt important to explore other options. I explored two directions: a mobile-first alternative optimized specifically for rapid switching between production companies and projects, and a single, shared navigation model across desktop, tablet, and mobile for maximum consistency. The intent wasn’t to “disprove” the shared approach—it was to keep the experience snappy with minimal mental load and see what we could improve about context switching. Producers regularly bounce between production companies while managing multiple projects, so the navigation had to support rapid context switching without adding friction.

Approach

My research led me to study patterns in applications that handle similar high-level context switching, and I found inspiration in Discord's server navigation. I adapted this pattern for Starboard, creating a vertical rail on the left side of the screen that displays each production company as a circular profile image. Tapping a production’s image instantly reveals a list of related projects on the main screen. This side-by-side view allows producers to see both the production context and its projects simultaneously, creating a faster, more flexible, and less error-prone navigation flow than a traditional multi-step menu would have allowed.