The Battlefield assignment system
- reimagined by a fan
Being a completionist at heart, assignment systems are one of the first things I look at in games. With my newfound skills using UX methods, I felt it was high time I tried to design one myself.
Many in the Battlefield community felt disappointed with the Battlefield V (BFV) assignment implementation, and I was one of them, so it was here my thoughts started to spin for real.
In my anticipation for the next installment slated for fall 2021 (Now revealed to be Battlefield 2042), I'm really looking forward to how assignments have been implemented, and how my ideas stack up to the new official system.
"How can I concept a fully-featured assignment system that is appreciated by players?"
Research
My UX studies thought me that my ideas alone weren't going to cut it, so I set out to research what players really thought.
I read several Reddit threads, articles, and watched dozens of videos to get a feel for what I was tackling - and boy was there a lot of opinions and interesting ideas to grasp!
Inspiration
The design I came up with is heavily based on BFV UI, with some BF1 UI elements sprinkled in.
Wanting to experiment, I picked my favorite pieces from these games, and I set up a goal to create a user-friendly, yet clean design that EA DICE and other AAA game studios usually produce.
I used my user data from BFV to make the design feel more alive.
Design process
Living up to the fidelity UX and UI designers at DICE can deliver is no small task, and you'll have to decide whether you think I came close, or not.
Tools
Prototyping was mainly done in Figma (Initially Adobe XD)
Visual elements and icons were created with Adobe Illustrator and Photoshop
Testing my concept with Battlefield players was conducted with the whiteboarding tool Miro
Layout
I created a low-fidelity prototype in XD to figure out how the flow of the system and its different pages were going to work.
I structured the pages in a way that users wouldn't need to click more than 3 times to reach what they were looking for.
Due to a corrupted file, I moved my project from XD to Figma for the rest of the project (Completed Mid-Fi & High-Fi prototypes)
Icons
One of the project's more time-consuming steps was to recreate BFV's icons from scratch.
I took screenshots of the icons in the game and later tried my best to recreate these using a mix of Adobe Illustrator and Photoshop.
I really like how they turned out, and I'm so happy I took the time to do it this way.
Prototyping
When I had settled on an initial layout, and most icons were created I began to piece them all together in an interactable Mid-Fi prototype.
This clickable prototype, in its "finished" state, was what I used in my user tests to figure out how the system actually flowed for a real user, how readable it was, and what changes needed to be implemented.
User testing
It was time to test the concept, but not having much in ways of rewarding the test users, I reached out to some of my Battlefield friends.
User tests
I settled on 5 test users since many studies show that this amount usually uncovers 85% of issues with a design.
My user tests consisted of 3 steps:
1. Survey - Wanting users to enter the test as unbiased as possible, I started by polling them on their thoughts using Google Forms.
2. Create - Users were presented with a blank canvas and an objective: "Create your optimal assignment hub".
3. Test - It was here users first got to see my prototype, and I tasked them with answering questions by navigating the prototype.
Example: "Oh no! The Assault Class Challenge is unavailable! Why, and when will it be available again?"
Results
After conducting my 5 tests I started compiling all my new insights from the polls, and notes.
In my UX studies, I had learned the importance of not just listening to users, but observing what they do. Shaping the test as I did, fortunately, allowed me to do both. This was very valuable since a lot of what users said, wasn't reflected in what they actually did.
Changes
From the feedback I gathered I was able to make some good changes, here are a few examples:
1. Players found it hard to discern which class an assignment was achievable with. To address this, I added indicator icons on the assignment cards, these icons can also indicate an assignment's active status - i.e. if it's tracked or on cooldown.
2. Some players had issues finding the help section (previously exclusively on the tracked page) that was created to mediate the way my concept handles tracking of assignments differently from the official systems. I completely remade this section and made it available on all pages.
Experience the High-Fi prototype
I made a lot more changes based on insights, and you can experience the differences between my High-Fi and Mid-Fi prototypes below.
Compare it to the Mid-Fi prototype
My user tests were conducted using this Mid-Fi prototype, and the feedback I got was implemented through a series of changes, resulting in the High-Fi version above.
Final thoughts
Key takeaways
This project was a real fun one, and I'm 100% certain now that games UX/UI is the area I want to work in.
One of the most challenging parts for me was the back-to-back user tests I conducted. I came somewhat prepared for these, by having been part of creating and leading user tests at Changemaker Educations. Heck, my love for UX started being on the receiving end in EA DICE's UXR lab. But I realize I have more to learn in this area.
The High-Fi prototype concludes the first iteration of my "dream" assignment system - but I'll likely take it through another round of usability tests and iterate on it more.
• Conducting 5 user tests back-to-back for the first time by yourself was difficult.
• Using pre-made building blocks in the "create" step helped me see what features players focused on in a usability sense, but hindered their creativity in creating their own elements.
• Believing that this would be a quick project was a bit naive (having sunk probably 200+ hours into it) - I'm pickier than I thought! :)
Updated September 2021