The recording interface was our biggest design challenge, and the most important single aspect of the app — users spend the most time on this screen, and each button serves a critical function in the process of live-recording stats.
To create a sense of structure and mirror the layout of actual volleyball courts, we locked the UI into a symmetrical design with interface elements corresponding to team positioning on the court.
A blue and white color system was used to indicate single tap vs long tap buttons, with green and red serving as functional colors.
Using Material Design language as a starting point, we created a comprehensive style guide breaking down typography, color systems, and visual placements.
Throughout the app we broke down spacing guidelines for the development team through annotated overlays — every pixel counts.
We also created nuanced spec sheets detailing type sizes, styles and specific placements.
To give context to user interactions we built custom animations in after effects. Detailed notes on timing, paths, and behaviors were delivered to the dev team.