Game GUI
Enhance usability of the system-level game GUI and improve social engagement.
Client: Createra
Role: Product Designer
Problems
Scaling
UI is not flexible on adding and organizing features
Social
Weak on social interaction
Mobile
Not mobile friendly
Information architecture
Brainstorm
Final structure
Navigation
Old design
Poor visibility of navigation icons against background
Menu layout is complex and it creates visual noise
New linear design
Scrollable linear design is ideal for scaling and categorization
Main navigation
Surface social features to improve players’ play-time and retention
Menu navigation
Prioritize frequently used features in “Quicktools” section
Actions
Wireframe selection wheel
Support multiple pages
Multiple access points
Make the feature flexible and convenience to access
Method 1: Right-click character (single-tap on mobile)
Method 2: Menu > Actions
Method 3: Keyboard shortcut “X”
Gesture illustration
Prototype
Iterate pagination design
Chat
Chat panel restructure
Introduce world channel
Rearrange online players
Remove system message
Introduce stickers & emoji
Chat bubble & preview
Specification and sample
Prototype
Unified and clean look of the UI
Shortcuts
Shortcuts mapping
Determine functions that need shortcuts. Map out and assign corresponding abbreviations
Diagrams & tooltips
Display shortcuts on “Help” diagram and navigation tooltips
Retrospective
Do not limit yourself on shaping a perfect product at early stage. However, be open minded on doing reasonable subtraction. Hitting deadline is crucial.