Dustloop
Dustloop.com is a fan-owned and community-operated website that aims to connect and educate fans of the fighting video-games developed by Arc System Works. This project focuses on the interface that Dustloop uses in their informational repository for the latest entry in the BlazBlue franchise, BlazBlue: Centralfiction. The database is used by fans of the series at any and all skill levels, with the goals of introducing newer players to the various game mechanics while providing more advanced players with a valuable learning resource to aid them on their journey of improvement within the game.
Dustloop acts as a crucial resource for many players, but many aspects of the current design make their experience with the interface needlessly tedious, frustrating experienced users and scaring newer ones away from the game as a whole.
Project Type
Passion Project
Role
UX Designer
Tools Used
Figma, Zoom, Miro
Methods
User Interviews
Project Time
3 Weeks
Project Scope
By redesigning the interface that Dustloop uses for their BlazBlue: Centralfiction repository, this project aimed to improve the experience of all users regardless of their familiarity with the game or the repository itself. This was done by making alterations to the informational architecture of the interface, implementing a new method of navigation through the interface, and redesigning the visual presentation of information to the user. This will allow users at all levels of skill or familiarity to quickly and intuitively access any information that they are currently seeking, regardless of their current location within the interface, while making that information more comprehensible and less intimidating.
​
Beyond enhancing the Dustloop interface, this endeavor doubled as a personal passion project, allowing me to cultivate valuable experience in my role as a Junior UX Designer. As a fellow gaming enthusiast, the Dustloop website holds a special place in my heart, making this an ideal opportunity to immerse myself in the world of user experience design.
Project Goals
-
Improve the overall experience users of all skill levels have when interacting with Dustloop. This includes making it more intuitive, user-friendly, and enjoyable.
​
-
Improve the usability of the product by ensuring that users can easily navigate and accomplish their goals while using the platform.
User Groups
-
Experienced BlazBlue players and/or Dustloop users
​
-
Casual BlazBlue players who use the repository infrequently
​
-
Gamers who are new to BlazBlue and the platform​
User Research
I began this project by first replicating the existing interface used in Dustloop’s BlazBlue: Centralfiction repository using Figma, in order to deepen my understanding of both Figma and Dustloop. Recreating the existing design allowed me to use the tools Figma provides not only to quickly create professional-quality visual assets, but also to make high-fidelity prototypes. This improved my fluency with Figma’s interaction mechanics and allowed me to create an accurate reflection of the interface’s current design and presentation to the user. This phase of the project provided me with knowledge and skills that would prove to be invaluable, both to this particular project and as a Junior UX Designer.
Replicating the existing Dustloop interface in Figma not only allowed me to empathize more with Dustloop users but it also provided a unique opportunity to delve into its information architecture, design principles, navigation pathways, and diverse user journeys. As I immersed myself in this phase of the project, a hypothesis emerged, laying the groundwork for the entire redesign endeavor. Following several days of replicating the original Dustloop interface and its interactive features, my hypothesis formed: the current site predominantly caters to seasoned BlazBlue players and Dustloop enthusiasts. This conclusion was drawn from the intricate gamer vernacular employed, the navigation complexities, and a noticeable absence of contextual information addressing the multifaceted aspects of fighting games.
Original Interface
Interviews
Three user interviews were conducted to collect insights regarding any pain points or user delights users experience navigating the Dustloop platform. Each participant self identified themselves as being part of one of the three identified user groups.
The first interviewee was a young professional gamer that attends as many BlazBlue tournaments as possible and is a veteran user of the Dustloop repository. The second participant, was a self-identified "mid-level player" that plays primarily with friends but occasionally attends tournaments. He has visited the website in the past but not often. The third participant was a casual gamer that is new to the BlazBlue franchise and has only been to the website once or twice before. Each participant was asked the following questions regarding their experiences with the existing Dustloop interface:
-
What do you usually visit Dustloop’s BlazBlue database for?
-
Which features/sections do you typically use?
-
What do you dislike the most about using the website?
-
Are there any areas/topics that you have never used?
User Insights
Advanced fighting game vernacular is a pain point for new and casual players, catering mostly towards advanced players and users.
The newer and casual player experienced a sense of overwhelm when confronted with the amount of advanced information on the Overview pages, especially feeling intimidated by the intricacies of animation and frame data presented. Consequently, these user segments tended to avoid engaging with these pages. In stark contrast, the most advanced player not only frequented these pages but also recommended them for others seeking a deeper understanding of BlazBlue.
Original Interface
Navigation is tedious for the platform's character screens
Two participants disliked the tedious process required to compare characters, as the current interface lacks a quick way for users to navigate from one character to another.
System Mechanics pages are not accessible, and therefore, overlooked or avoided
The System Mechanics pages, which describe the inner workings of the game (such as character movement and damage calculations), were the least-used part of the interface by all three participants, with two of the participants having never noticed them in the past. When users do visit the Systems Mechanics page, users report being frustrated with the amount of information on the page, requiring long scrolling times to find the information they need.
Design Process
Paper Wireframes
This feedback allowed me to identify specific aspects of the existing design that could be improved to resolve the issues that each user described during the interviews. The results from this study also confirmed my hypothesis that the current Dustloop interface caters to more experienced gamers and users.
I began the redesign process by first sketching a few paper wireframes. During this phase of the design process, I revisited the original IA, with the goal of condensing pages together. Not only does this help to avoid overwhelming users with choices, but it also clarifies to the user which information can be found on which page. I then created a wireframe for the updated interface, demonstrating how each page would contain a single column of information panels with the ‘Character Overview’ page also including a fixed panel displaying an image of the selected character.
After developing the paper wireframes, I decided to create more advanced wireframes from the sketches in Figma. During this phase, I implement a universal navigation bar that would remain constant throughout the interface. This navigation bar includes a ‘Characters’ accordion function that expands upon being clicked to list each of the playable characters in the game. Clicking on a specific character from this expanded list will bring the user to the ‘Overview’ page for that character, allowing users to quickly navigate to a specific character regardless of their current location within the interface.
I also included an accordion button that performs the same function for each of the ‘System Mechanic’ pages. Placing it next to the ‘Characters’ button in the navigation bar ensures that these pages will not go unnoticed. This new method of navigation removes the need to backtrack to the home page each time the user wishes to view a different character, providing the user with an efficient and more intuitive way of moving through the interface.
High Fidelity Prototype
After developing paper and Figma wireframes to iron out the design changes based on the user feedback I received, I created this final high-fidelity prototype for the interface. By reorganizing how the information is presented to the user and streamlining the navigation's presentation into a more universal format, the new design aims to improve the user experience for user groups of all skill levels.
Conclusion
In this passion project, I undertook a journey of personal and professional growth. Motivated by the desire to gain hands-on experience, learn Figma, and delve into the complexities of accessibility and information architecture, I embarked on the redesign of Dustloop—a platform that holds a special place in my heart as both a dedicated user and an avid enthusiast of fighter video games. Navigating the intricacies of the project independently, I found so much fulfillment in applying my skills to enhance the user experience on a platform that resonates with my own passion. This project was an exercise in user empathy that deepened my understanding of UX principles and the importance of creating inclusive products.
