Citizens of Space
UI Design Project
Description: A fantastical RPG adventure set in a vibrant cartoon future. The Earth is missing and it's up to you to find the pieces and solve the mystery behind its disappearance! Recruit citizens, navigate the cosmos, and battle charismatic foes in Citizens of Space!
"Representatives of the Galactic Federation, thank you for having me here tonight to celebrate Earth's acceptance into this noble organization! It is an absolute honor to act as the Ambassador of Earth, a most honorable role, and... what's that? Earth is... missing!? And it's up to me to find the missing pieces? And I can recruit citizens of space to do battle for me?" - Earth's Ambassador
Team: Peter Venoit Jr. (UI/UX Designer), Ryan Vandendyck (Creator/Developer), and Robin Carpenter (Art Director)
Visual Design Goals:
1. Create a bold and usable interface for the game's extensive menu system: Main menu (Basic buttons & typography), Roster menu, System Menu, Dialogue, Map, Battle HUD, and Battle Minigames.
2. Provide UI that gives users a sense of "fun and futuristic" which showcases the wacky personality and charm of the characters and world.
3. Ensure ease of navigation and awareness through all menu interactions, especially the robust number of Battle Minigames—where players will spend the majority of their time.
Tools: Adobe XD, Illustrator, Photoshop, After Effects, Pen & Pencil.
Process: Style Exploration, Information Architecture, Wireframes, Mockups, Prototypes, Shipped Deliverable.
2. Provide UI that gives users a sense of "fun and futuristic" which showcases the wacky personality and charm of the characters and world.
3. Ensure ease of navigation and awareness through all menu interactions, especially the robust number of Battle Minigames—where players will spend the majority of their time.
Tools: Adobe XD, Illustrator, Photoshop, After Effects, Pen & Pencil.
Process: Style Exploration, Information Architecture, Wireframes, Mockups, Prototypes, Shipped Deliverable.
1. Create a bold and usable interface for the game's extensive menu system: Main menu (Basic buttons & typography), Roster menu, System Menu, Dialogue, Map, Battle HUD, and Battle Minigames.
Goals:
- Establish a style guide for typography, shape language, and colors.
- Create a cohesive style while making each individual section of the game feel unique.
Constraints:
- All content needs to be rich and active, yet subtle enough that the players are not distracted from their primary interaction goals.
- Establish a style guide for typography, shape language, and colors.
- Create a cohesive style while making each individual section of the game feel unique.
Constraints:
- All content needs to be rich and active, yet subtle enough that the players are not distracted from their primary interaction goals.
- Variety should be relative to time player will spend in that section (Most: Battle and Minigames; Least: System)
Animated concepts for UI-specific Visual Effects
Concept for Minigame specific VFX
Early concept for Dialogue flow
Final Dialogue layout with Dialogue Options
After several styles and discussing how it tied into the lore of the gameworld, we decided to move forward and iterate back through as we landed and applied designs we liked. The original idea was that the menu was a series of interactive panels amid a holographic dome. Therefore our 2D panels seemed to "float" amid the futuristic blue backgrounds—grounding them to the sides of the screen only when necessary.
Early concepts for Roster menu showing integration of cohesive angular style, prior to breaking menu into shuffle-able pages
Final Roster Menu screen
Early concepts for Citizen Status menu showing integration of cohesive angular style
Final Citizen Status Screen
Early Concept for Battle control UI and Description box.
Early concept for Battle UI and grounded Description box. This is closer to the final product.
Penultimate layout for the Battle HUD
2. Provide UI that gives users a sense of "fun and futuristic" which showcases the wacky personality and charm of the characters and items, while binding everything together in a slick interface wrapper.
Agenda Menu
Agenda Menu: Modal Activated
Battle Results Layout
Battle Results Layout: With Level Up Modal active
Flow concept for end of Battle Results screen
3. Ensure ease of navigation and awareness through all menu interactions, especially the robust number of Battle Minigames—where players will spend the majority of their time.
On screen keyboard art
On screen keyboard: Confirmation modal active
Much more subdued System Menu layout
Hologram Background art
Unused minigame concept