Civility UI/UX

UI/UX design for Civility, made for Roblox, where I was Art Director. This collection brings together the interface screens and their different states: game details, a co-op lobby, inviting friends, a hub for picking a destination, quest results, badges and teleport prompts.

Every panel is built from the same parts. Frosted violet glass with a fine dot pattern sits over the game world, with soft mint and teal shapes blurred behind it. Titles are white capitals, each panel has a blue info button and an orange close button in its top corner, primary actions use a pink-to-coral gradient and secondary ones a solid violet. Rows, cards and buttons share the same rounded corners, so a friend list, a reward card and a confirmation bar read as one family.

The co-op launch gate shows how the states work: two named roles, Guardian and Sparkbearer, each either filled by a player with a ready tick or shown as an empty silhouette, with a count of players joined and a countdown. Placeholder text and grey cubes stand in for the final content. These screens shipped in the first version of the experience; later versions moved to Roblox’s built-in UI.