Respect and Research
Participant quotes, organised into points with similar themes. Taken from a user test of the original app.
This redesign comes from a place of respect, and as such, I tried my best to create something worthy of the brand. I must also acknowledge that I was not placed under the same time constraints as those who created the original, or held to the same standards or guidelines that they were. It is not a correction, but a different take on the app.
I interviewed people in my friendship circle (who also play D&D) about what their thoughts were on the authentic app; their likes and dislikes, as well as any improvements they might have had. I conducted four remote interviews, each lasting between 15 to 20 minutes, whilst also looking into data on the app store, taking into account ratings and reviews. The most common comment was that sometimes, there was too much information on a screen.
The fact is, D&D is enormous. There are hundreds of rules, items and monsters, with each being able to be categorised in different ways. So cramming all of that into a cohesive app is not an easy task, especially when users have to comfortably navigate it and find what they want. In some cases, even with the D&D Beyond app, this means that either functionality or visual design will take a hit in favour of the other.
When designing my version of the app, I tried to categorise things in ways that made the most sense, reducing the clutter brought by too many filters to pick from and keeping a consistent design theme throughout. Even then, I found that there were sometimes too many buttons to be included on each page that were to an extent necessary for functionality. I also kept to the core colours used on the D&D Beyond website.
The Problem
With this redesign, the main problems I tried to address were accessibility (making the traversal of the app smoother and easier), space (reducing visual clutter), and personal engagement (creating an element of personal acknowledgement to make the app feel less like a business transaction). On top of this, adding visual queues to add flair and showcase certain elements such as character class. The app achieves its primary function nicely as it is, although navigation can prove tricky to those aiming to seek information hquickly, or without knowing exactly what they are searching for. My changes I believe help mitigate issues some users might have.
The D&D Beyond app does not have a welcome screen. This is a simple addition, but one that I feel adds to the user experience. At the very least, it is an acknowledgement of the user. In comparison, the first screen the user sees in the original app is the library of manuals and sourcebooks, all of which you must pay for. This blatant monetisation can be a turn-off for some.
Placing a small message, as seen in the image, was a way to help immerse the user, even if only a little. The screen itself has no practical use, so in some ways could be turned into a brief image covering the whole screen which shortly fades to reveal another behind it, however as a starting point I believe it works well. All of the important icons remain present and the main layout remains consistent.
-
Characters
The character screen in the original app has a design that is very tight, which ends up quite plain. I spaced out the characters and added a search function for those who make too many characters to keep track of. When creating a new character, I thought a simple plus button in the iconic red would fit better, located in the bottom right to avoid the similarly red axe motif in the background. This also keeps it out of the way of the important information when scrolling. I added a search function for players who create numerous characters, which provides an alternative to simply scrolling. With a subscription, the character creation limit is removed, so the feature would prove useful.
-
Monsters
Monsters are a huge part of the game, second only to the characters people create. Because of this, I gave the monster section its own icon at the bottom for ease of access. Whilst in the original app, monsters were all laid out in alphabetical, and there are a lot, I opted to categorise them by the main family types found in the rules and an option to display them all. So if a user was looking for a monster they did not know the name of, they could find the category first to drastically narrow down the results. This change is more of a quality of life option, for easier accessibility.
-
Library
As previously mentioned, I removed the monster category from this list. The original app uses an overlay to pick and choose and categorises things based on their use, for example, items and objects are blue, character-related options are yellow, etc. I removed the overlay, instead, making it the main screen with different pathways, ordered alphabetically. I also moved icons to the right side of the buttons, to fill space which results in a more pleasing visual in my opinion. The original app’s buttons are also quite small, which makes them hard to press for certain users. It’s a small pain point, however, some users might find useful.
These are a few more of the screens I designed. The full prototype can be found at the top of the page. I stuck to a consistent theme, using the same four colours, with the exception of the parchment seen on the furthest left screen. Something the original app did, was use, in small amounts admittedly, blues and greens in various areas for text and boxes. I felt it clashed slightly with the original design, and would certainly have in my redesign. Whilst red is used for multiple purposes, highlighting the current tab as well as acting as important buttons to push, as seen in the back and purchase buttons, they are easy to distinguish due to the rules of proximity and similarity I also condensed the various forms of the same monster into the same screen, with tabs to alternate between. This removes having to back out of every monster screen to find its younger version, instead offering a quick and easy switch.
UI Kit
Usability Study
I sent the final prototype to four participants, conducting supervised tests in order to get first-hand feedback. Each participant was able to complete the given tasks relatively quickly, with only slight differences in time, which was a result I had hoped for. One participant mentioned that the text on the main icons at the bottom of the screen was quite small, which could hinder those with poor vision. It was also pointed out that whilst there was a bookmark overlay, to visit bookmarked screens, there was no bookmark or favourite option on the Blue Dragon screen. This was an oversight on my part, however, the layout does not allow much space for such a button, which is something I would have to work on moving forward. Below are a few quotes from the participants.
“I like the smoothness of your designs I must say. My only possible critique is that the text size could be increased in some areas.”
— Primary Participant
“I think the categorising of Monsters makes things a lot easier. For me, personally. I’d be interested in trying it if it was a completed product.”
— Primary Participant
“White text on the red highlight makes it tough to read, especially since it isn’t big or bold. It’s a nice visual idea but you could improve it.”
— Primary Participant
“I like the colour usage a lot better in this. They’re spaced out nicely and sort of pop.”
— Primary Participant
This is the design I am most proud of to date and working on it was thoroughly enjoyable. It feels like a culmination of all my previous work, having made mistakes and learned from them to create this. My focus was to create a simple and visually appealing layout that users could enjoy, whilst maintaining the fundamental elements of the original, and I believe I managed to do so well.
If I were to continue working on this project, I would look at other areas that I had not previously covered, such as the character creator and spells screens. I would also spend more time working on and improving screen transitions, as I found that I was overwhelmed with the number of links there ended up being.