Project Overview
Client: Jaguar Games
Industry: Indie Game Development
Project Type: RPG Wireframes for Character Creation, Combat, Inventory, Crafting, and More
Role: Lead UX/UI Designer
Project Summary
I was tasked with designing a comprehensive set of wireframes for an upcoming indie RPG, focusing on user interfaces that would enhance gameplay, character management, and overall player experience. The wireframes were designed to guide the player through key elements of the game such as character creation, combat mechanics, inventory management, crafting, and dialogue interactions. Each interface was built with scalability and fluid gameplay in mind, ensuring that users could easily navigate between different game modes and manage in-game elements without friction.
Goals & Objectives
The primary goal was to design an intuitive and visually clean interface that would allow players to manage complex RPG mechanics effortlessly. Specific objectives included:
- Create Consistent UI Elements: Develop a unified set of wireframes that maintained consistency across different in-game screens, including character creation, inventory, and combat.
- Simplify Complex Mechanics: Design interfaces that simplified complex RPG elements like inventory management, skill upgrades, crafting, and combat actions.
- Support Immersive Gameplay: Ensure that UI elements enhanced the player’s immersion by minimizing clutter and focusing on ease of access to crucial gameplay information.
- Scalable Design for Future Growth: Build wireframes that could be easily scaled and adapted as the RPG’s development continued and new features were added.
Research & Discovery
User Research:
To inform the design of the wireframes, I analyzed popular RPGs and their user interfaces, drawing insights from games such as Divinity: Original Sin 2, The Witcher 3, and Baldur’s Gate 3. I conducted informal interviews with RPG gamers to identify pain points in current RPG interfaces, especially in areas like inventory management and crafting. Key findings included:
- Overcomplicated UIs: Many players found RPGs overloaded with information, making it hard to track vital stats or manage large inventories.
- Frustration with Crafting Systems: RPG gamers often complained about unintuitive crafting interfaces that made combining items tedious and confusing.
- Desire for Streamlined Combat UIs: Players wanted clear, accessible HUDs that allowed them to focus on real-time decisions without sifting through too much information.
Competitive Analysis:
I performed a competitive analysis of UI designs in popular indie RPGs to better understand what worked well and what could be improved upon. The analysis focused on:
- Inventory Management Systems from games like Divinity: Original Sin 2.
- Crafting Systems in titles such as Minecraft and The Witcher 3.
- Character Creation and Skill Trees from RPGs such as Pathfinder and Pillars of Eternity.
Design & Strategy
The design strategy revolved around creating wireframes that presented complex gameplay mechanics in a clear, intuitive manner. I used a modular approach to ensure consistency across various screens, allowing for easy navigation and management of in-game elements.
1. Character Creation Wireframe
Objective:
Allow players to create and customize their character’s origin, appearance, talents, and attributes with ease.
Design Approach:
The character creation interface was built with tabs for origin, appearance, skills, and talents. Players could toggle between different categories and see their character evolve in real-time. Each tab had a simple, clean layout to avoid overwhelming the player with too many options at once.
Key Features:
- Tab-based navigation for origin, appearance, and talents.
- Visual display of character customization with real-time updates.
- Highlighted key stats for player reference.
2. Combat Wireframe
Objective:
Design an interface that presents combat options clearly, allowing players to access vital stats and abilities without cluttering the screen.
Design Approach:
The combat UI was designed to include health and ability meters at the top, with icons for key abilities and attack options located at the bottom. The interface was optimized to allow for quick decision-making during combat, ensuring that players had all necessary information available without crowding the action.
Key Features:
- Health and ability meters positioned for easy visibility.
- Ability icons placed centrally for quick access during combat.
- Minimalist design to reduce distractions during fast-paced gameplay.
3. Inventory Management Wireframe
Objective:
Simplify inventory management by allowing players to easily sort and find items, manage weight limits, and auto-sort items.
Design Approach:
The inventory system was built with a grid-based layout, allowing players to view all items in a single screen. Auto-sorting options and filters were included to help players quickly manage and organize their belongings. There was also a party toggle to show or hide other party members’ inventories for group-based item sharing.
Key Features:
- Grid-based layout for easy item management.
- Auto-sort and filter options to streamline item sorting.
- Party toggle for viewing and sharing inventory items across characters.
4. Crafting System Wireframe
Objective:
Provide a clean, intuitive system for players to combine items and craft new tools or equipment.
Design Approach:
The crafting system was designed with a drag-and-drop interface, allowing players to select items from their inventory and drop them into a crafting grid. Crafting recipes could be viewed or hidden, and the system allowed for quick combination of items with minimal steps.
Key Features:
- Drag-and-drop crafting interface.
- Recipe view toggle for those wanting to see or hide available crafting options.
- Simple combine button for easy crafting action.
5. Dialogue Interaction Wireframe
Objective:
Ensure that dialogue with NPCs is clear, with easy-to-read options and immersive interaction prompts.
Design Approach:
The dialogue screen was designed with a choice-based dialogue box, where players could scroll through options and view potential outcomes for each choice. A clear distinction was made between conversation choices and narrative text to maintain readability and immersion.
Key Features:
- Choice-based dialogue box with clear navigation.
- Highlighted selections for easier interaction.
- Clean visual layout to avoid cluttering during extended dialogues.
6. Map and Navigation Wireframe
Objective:
Create an easy-to-use map interface that allows players to track objectives, quests, and fast-travel points.
Design Approach:
The map screen was designed to show the world map with icons for quests, travel points, and locations of interest. Players could zoom in or out and access a side panel for more detailed quest information. A legend on the left helped players understand different map symbols at a glance.
Key Features:
- Zoomable map with quest and location icons.
- Side panel with detailed quest and location descriptions.
- Legend to clarify map symbols.
Implementation & Development
Throughout the wireframing process, I worked closely with the development team to ensure that each design could be implemented efficiently within the game’s existing framework. Key steps included:
Collaboration with Developers:
I provided interactive wireframes and prototypes to the development team for accurate translation into the game engine. Regular feedback sessions were held to make adjustments as needed.Testing with Players:
Early playtesting was conducted to gather feedback on usability and to ensure that the wireframes met player expectations. Feedback was used to iterate on the designs, particularly in areas like combat and inventory management.
Outcome & Results
The wireframes for this indie RPG resulted in several key outcomes for the development team:
Streamlined Inventory Management:
Players were able to manage their items more effectively thanks to the grid-based layout and auto-sort features.Enhanced Combat Experience:
The clear and uncluttered combat UI allowed players to focus on real-time decisions without being overwhelmed by on-screen information.Immersive Character Customization:
The character creation wireframe provided a simple, engaging process for players to customize their characters, enhancing their connection to the game world.Clear Crafting System:
The drag-and-drop crafting interface made combining items quick and easy, with fewer clicks required to craft new tools or gear.
Lessons Learned & Reflections
Designing wireframes for a complex RPG with multiple systems required a deep understanding of how players interact with various game mechanics. One key takeaway was the importance of creating flexible designs that allowed for both complexity and simplicity, depending on the player’s needs. The feedback from early playtesting was invaluable in refining the wireframes, particularly around crafting and inventory management, ensuring that the final product would cater to a broad range of players.
Moving forward, I would recommend further iterations on the dialogue system to make it more dynamic, as well as the possibility of adding a skill tree UI for better character progression visualization.