Updated design for Character Creation UI

Hi guys,

below you can find the first version of the reworked character creation. Please note, that it isn't finished yet. It's just a starter and things can be changed.

I did stick to the old process in a way, but changed quite a few things and repositioned elements. My main goal was to have all the information on one screen, without forcing the user to scroll. At least not on the main patcher size!

Realm selection I did remove the old realm selection with the videos in it, as requested by JB. Instead I added three panes, which let the user choose the favorite realm. Again, it was important for me, that the user doesn't need to scroll and that he can get all the info at first view.

Note, that when the user hovers over a realm it gets highlighted. The border changes, there's a box shadow under it, the colour of the button changes and the text will change into plain white.

realm

Here you can see another version of it, where there are images behind the text.

realm2

Class and Race As requested, I combined class and race selection onto one screen. Again, I avoided scroll bars and rearranged a few things. Overall I kept the old creation screen, but changed a few things and the overall design.

Attention: I placed the character name on the bottom, but I just placed it on this step and on no other. It just uses too much space, especially as the next steps (attributes and banes/boones) need a lot of space. So we'll force the user to deside his name during this step.

I also changed the old back and forth buttons and added a more descriptive text to them, which might be changes. For the user it is easier, if he knows, where a button is going

In the middle you can see the preview of the race or/ and the class, as requested by Tyler (if I recall correctly.

classrace

Attributes The attributes are quite hard, as there are so many info here, which might as well be just overwhelming for the user. I tried to strip down everything to the most important. Here's how it works:

If a user hovers a value, no matter on the left or the right, an info text to that value will be displayed where you can see "Will" and it's description at the moment. If the user doesn't hover over anything, there'll be an explanation how to use the attribute "builder" and how to get more info for certain values (by hovering over them).

As I said - This part ist pretty hard. Long names, long values, lot of text and also we want the user to change primary values. I tried out a few things here, and this is what I liked the most. Not sure if it's the best.

I wanted to avoid hidden info, like with a scroll bar or tooltips, or...

Another way would be, to use the info box ("Will") just for primary values and use tooltips on the other values (primary and derived). That's something we might want to discuss.

attributes

Banes and boons Not finished yet... sorry. Will have it by tomorow!

I would imagine you would also have the character name up on the top left of the stats screen as well? I kinda like the concept that you have on the stats page where you see like a history of your choices up on the top left, that can maybe follow all the way through the whole character creation maybe?

that can maybe follow all the way through the whole character creation maybe?

Yeah, that was the idea. On the next page, I wanted to add the primary attributes as well to the top, with shortcuts. Your idea with the name is great. I will add it on the next version!

JB asked me to register and comment on this.

Realm Select

I'm not a fan of dropping the artwork in favor of walls of text. If anything I would like to lean much more heavily on audio-visual realm thematic elements to help guide players more by look and feel at a glance before committing to reading a long form description.

Class and Race

I might drop gender below the race portraits and lower the opacity slightly all around on the panels to let the background show through as in the current version. Still looks like we've lost the race specific stat mods and race/class based mandatory banes and boons for players to look at when making these choices.

Attributes

I would prefer to have a way to type in values in addition to spamming + and - buttons to get to a target value. If we want to replace dynamic mouseover tooltips with a fixed panel maybe its best to push it to one side or the other rather than in the middle? Hopefully we can get some indication of recommended stats for the selected class, and also show what derived stats will change based on primary stat being moused over with a highlight or something.

Hey Ben.

Realm Select The only thing I was aware of is, that JB wanted the videos removed from the realm selection, as they have a huge impact on the overall performance. They might be replaced by plain images, which I didn't knew, that you want it that way. Maybe you can discuss it and let me know what exactly to do with it.

Right now, there's quite some text on the realm selection, which at the moment doesn't fit the screen. So either those texts have to be shorter or we might need scroll bars again, which from an UX perspective isn't perfect. Those infos will be considered as hidden infos. I mean, if you decide to use scroll bars, I can add those on the design. I just tried to avoid those.

Class and Race I can drop the gender selection below the title, which might result in a scroll bar again. Some of the class and race descriptions are longer, than the one I used. Again I just tried to avoid any scroll bar, as long as it is possible.

I can check the opacity on the panels and test what it it looks like.

Again - I don't know anything about those banes and boons, and wasn't aware of, that they had to be added to the classes and races. Maybe you guys can provide me with details. Overall it makes the design I created useless, as more infos mean, that we need another layout. Have to check it, after we have collected all infos.

Attributes It won't be a problem, to use the fields, where we have the value in right now, as a input field, so people can type in a number or use the + and -. I don't know what the range of those values is. But if a use types in numbers and finds out, that it is too high or too low, it might end in trial and error for the user, which might be frustrating. Just thinking here. Maybe we'll find a solution for it.

On the other parts - To be honest: I might not have enough insight on what you're talking about. Like with, which stats effect others and so on. So it's quite hard for me to design it. I think I get what you're talking about, but I might need more details on it.

P.s.: Sorry for any typos. I am in a hurry right now, as familiy is waiting for me. :)

Hey guys,

before I can work any further on the layout and design for the character creation process, I have the feeling, that we need to check first, what infos we want to display and which features you want to have included. Therefor I'll add a listing below, and it would be great, if you guys might add anything, which is needed.

First step - Realm selection

Realm description
Realm icon (shield)
Realm selection (button or whatever)
Realm image (background)

Questions:

Do you want the description text of the realms as long as they're right now?
Do you want to replace the actual video, which is being used as the background on realm selection, with static images?
What else has to be displayed on the realm selecton?

Second step - Class & Race selection

Race selection (icon)
Race description
Race gender
Race banes & boons?
Class selection (icon)
Class description
Class banes & boons?
Character name
Character preview (image or animation)

Questions:

What exactly are those previews for the banes & boons, both, on classes and races? How much space do we need for them, what infos do you want to add there?
What other infos do you want to display on this step?

Third step - Attributes

Primary and secondary attributes
Derived
Recommended stats?

Questions:

What are recommended stats, which infos do they contain, what do you expect to be displayed?
Do you want to display infos, especially with the derived part, in a box, a tooltip or visible on screen?
What other infos do you want to display on this step?

Fourth step - Banes & boons

Questions:

What infos have to be displayed on banes and boons? Is there any kind of example of what it looks like?

On the stats screen, can we highlight the affects stats when I add say +vitality so I can easily see what changes when I increase or decrease that value (rather than having to watch for numbers changing).

@Heartfyre The most important thing first is to block out the UX changes. fine detailed design, like what images to use, colors, ect will come later. I am not at all concerned with that at this time.

Required info on each Category:

Realm / Faction

Faction Names
Faction Description Text
Faction Logo
Faction Artwork, videos are not very performant, so I'm thinking of trying a mostly static gif with some slight movement to give it some life.

Race

Race Names
Race Descriptions
Race Icons
Race Artwork (character picture)

Gender

Male or Female, different race & class images based on this choice as well.

Class

Class Names
Class Descriptions
Class Icons
Class Artwork (character picture)

For Banes and boons there will be several categories of both banes and boons and you will have a set range of "points" total for Banes and Boons you have to be within. Each Bane and Boon will give some points, values are different per item and some Banes & Boons can have multiple stacks, like tier 1 X, tier 2 of X, tier 3 of X and so on. There has to be a balanced point value of Banes vs Boons. On an older version of character creation we had a bar which you had to balance while selecting Banes & Boons to balance this.

Info on Banes and Boons will be a name, tier/rank (if there are multiple for that one), and a description + w/e stat adjustments this may give you if any, will exist likely along with the description.

Character Creation Design

First thing to note is that we will be moving character creation from the Patch Client into the Game Client. This gives us much more space to build out this UI plus allows us to use the games 3D renderer to render characters if we desire it.

Realm Select

Initial realm select page will first show a quick 'at-a-glance' view of each of the three realms. This should be done heavily through imagery, minimal text. Each Realm will have their name of course displayed, as well as a realm icon, and art to give the player an idea of what each realm's differences are from each other.

For example, Arthurians could have a shield and a knight in shining armor to give an idea of this realm is about nobility and defence. Vikings have some swords and some art of a beserker smashing something or whatnot to show they are a realm focused on attack ect...

Beyond this quick bit of info, the user should be able to select a realm and view more info about the realm. This will change the layout of the UI a bit to minimize the other realms, and focus on a highlight reel for that specific realm. This is not going to be something super in depth, but just the key points about that realm to help with their decision. Included should be any required realm Banes & Boons as well as any Realm specific ones. It should be easily visible how to go back out to pick another realm to get info about that one instead.

Race & Gender Select + Class Select

For both this and the class select we want to focus more on visually showing what options you have through large full size images of characters rather than the small head icons we have currently. Think more like Warhammer online character creation (http://static.giantbomb.com/uploads/original/1/17172/1626086-warhammer_01.jpg) or with Revelation Online (http://i1374.photobucket.com/albums/ag403/speciallymadeformee/Revelation/1.%20Class%20descriptions_zpsd1ge9kwd.png) where you can see your choices standing there in a cool pose to select, or animating.

Information that needs to be given for these screens are the standard info, names, some text description, plus any stat changes based on the selection, as well as any required Banes & Boons for the gender and/or class plus the different Banes or Boons you will have access to based on these selections.

Stat Allocation

Primary stats need to be allocated and should be done before Banes & Boons. It needs to be clear what each of these stats do and how they affect the character overall.

Banes & Boons Select

There are going to be a lot of these things, we need to have a clean and simple way to view these things. They will have several categories, Realm based, Race, Class, and then maybe a few others which can help with organization. We have to clearly show the user that they must meet the requirements for Banes & Boons, there will be a minimum & maximum total values allowed for Banes & Boons selected and Banes & Boons need to be balanced based on value of the ones selected.

Overall Design

The overall progress throughout chracter creation shoudl be tracked visibly so that they use can easily go back and change things. Every change made should be clearly visible to the character what the implications of that choice are. This means that we would like to also see a 'character sheet' of sorts being built up on screen as you progress through character creation becomming more and more in depth as you go, start it out simple as you only have some basic info, Realm first, then build it up as you go through.

Hey @Heartfyre! Thanks for working on this :)

Here is the old mock up what I had for traits(banes & boons): boons and banes

This was when we showed the stats changing when users picked their traits. The boons have to equal the banes in points for it to be complete. And you have to use the min/max points. It's kind of like the skills tree on LoL or other games with skill trees. Hope this gives you a better idea of what it is.

Consistency and product identity One thing which should always be part of the design process for the character creation is, that the overall design should fit the one of the game itself. While we are able to create an overall UX concept and basic UI elements, we should make sure, that we have a consistency between the in-game UI, the character creation/ selection and the launcher, if any possible. We should respect the product identity, which in the end would create a better and more complete overall picture of the game and the product itself. Therefor we want to use design and UI elements, which also will be used in the game UI itself, created by James Koo.

General thoughts My vision of the overall character creation is the one of giving the user a feeling of starting into a new adventure from the first minute. He just doesn’t create a character, but he feels that his choices do matter in a way and while doing so he got to feel realm pride and such from the very start.

Attention: The following concepts are only for UX and element positioning, but not about design in any way! So please ignore element design and coloring at all!

Realm selection General thoughts: Each realm is being presented on something, which I will refer to as a card in the following. Those cards might be realm specific, meaning, that their frame might be designed by the realm. For example, a TDD card might have leaves and branches around it. Please read the following for detailed thoughts.

Sound design: An option might be, that when the user first enters the realm selection, a general music track is being played, which then changes when he picks a realm by clicking on it. Those music tracks will be realm specific and give the user a sense and feeling for the realm he’s going to play. The specific track plays though the character creation progress, based on the chosen realm.

1 – Summary bar: Here the user will see different info based on the progress he made during the character creation. Those might be the realm, the class, race, name, and so on. Please see the main concept for the summary bar for more info.

2 – Realm name: The full name of the realm displayed on the designated card.

3 – Realm card: The realm card (see general thoughts above) is an independent element on the realm selection screen. It might be an option to have it slightly moving on it’s axes, depending on where the user moves his cursor on the screen. Also, it might be useful to have a drop shadow, which might be increased, if the user moves over the card or selects it.

4 – Banner and shield: Each realm card is having its own banner in the background, which might be animated, like it is floating in the wind. The banner represents the realm color and a realm icon, like a realm shield.

5 – Card background: On the background of the cards, we might animate or play a video, with scenes which represents the realm itself. Like a landscape or a town, or… This way we create “living” cards, which might look more attractive than a static background.

6 – Character: On each card, in the foreground, there can be found a character, which represents the realm itself. Those characters might be animated and a cool effect would be, if their animations overlap the card borders, so it looks like, that they’re not bound to the limits of the card. Another interesting thing would be if the character of one card reacts to the character of another card beside him. But that would just be nice to have and nothing which is needed.

7 – Background: Behind the realm cards there’s an overall background, which displays a general scenery at first. We might change that background depending on which realm the user did chose and keep it for the rest of the creation progress if needed. The background might be animated as well. Maybe showing a video as well.

8 - Realm info (picture 2 & 3): If a user clicks on the realm, there might be two ways to display info about the realm. Depending on how much info we want to display, we might display it as an overlay on the realm card itself, which leaves us less room. The other cards might be reduced in size or visibility during that time. Another way would be to display realm info on the available space, while we remove the other cards during that time. This way we’ll have way more space for info, if we need it.

9 – Confirmation: The user has to confirm his realm selection by pressing a button, which will lead him to the next step of the creation process. If we chose to use the bigger overlay for realm info, we might need to add some kind of cancel button as well.

realmselect1 realmselect2 realmselect3

Race and class selection General info: Overall class and race selection will look pretty similar, but they are on different pages. So, the user first will select the race and on the next step the class. We might combine it, but it might just be too many info on one page, with the banes and boons and stats, and so on.

General thought: I added two different versions. On the first all the info and elements have been arranged on the bottom of the screen, while on the other elements have been added on screen. With the first one all the available space in the center of the screen is for the class and/ or race. The second one is an approach where I consider the future in-game UI-design.

UI elements: Again, the UI elements are just placeholders. If we use backgrounds on the final design or whatever, we have to consider it later. Right now, it’s just to demonstrate where elements will be placed. 10 – Navigation buttons: With the navigation buttons the user can navigate back and forth through the creation process. It is, as well, a confirmation for the selection itself. We might need to add an info about it, like: Accept and go on.

11 – Unselected races/ classes: Each race or class is being displayed on the screen, while the active selection always can be found in the middle of the screen. Every other race or class will be positioned left and right of the active selection, with some space to the selected class. The positioning of the classes and races on the left and right side might be changed later. The displayed characters may be animated or change there (combat) stance from time to time.

12 – Race and class name: If a user hovers another class, the name of the race or class will be displayed below the hovered race or class. Again – The background is just for positioning reference here. The element will be designed differently.

13 – Selected race and class: The selected class or race will be displayed in the middle of the screen. It’ll be slightly bigger as the others and maybe highlighted in another way. As with the others, we might want to animate it.

14 – Gender selection: Two icons, so the user can switch between genders. Might be positioned elsewhere.

15 – Race or class name: The full name of the race or the class.

16 – Race or class description: A short and brief description of the race or class. Maybe we need to resize the element or add a scrollbar, depending on the actual size of the text itself.

17 – Stat changes: Any stats changes, which come with the class or race selection will be displayed here. We later can decide, if we want to display it together with icons or text only. We also need to check, if we need to add a scrollbar here as well.

18 – Banes and boons: Any bane or boon, which comes with the selected race or class, will be displayed here. We might want to split it into two separate parts, to make it more clear, which one is good and which one bad.

charselect2 charselect3

Attributes General thoughts: Main goal of the attribute selection is to show which stat effects what and which stat is effected by what. Therefor one of the main features here will be highlighting and the explanation window on the right-hand side. Also, as with the old launcher design, all the info should be displayed without scrolling. If a user hovers whatever info, it will be explained on the explanation window.

Main goals: With the final design, we might want to make sure, that the overall design with the attributes doesn’t look like a big excel table to the user, which might be overwhelming. We need to make sure, what is important and which things need to be added by the user. Also, white spaces can help with the overall impression.

19 - Primary stats: Those stats are the stats which will be changed by the user. Each stat will have a field, where the user can change the numbers by arrow or by typing them in. Maybe we can add a scroll feature as well, where the user can change the numbers of a certain attribute by hovering it and scroll up or down.

20 – Secondary stats: Secondary stats will be displayed on top of the screen. We might want to separate it from the main stats by color, the font as well as the overall design, like with the background.

21 – Derived: All derived stats will be displayed here. It might help with the overall impression, if we group them again within the window. Like grouping resistances, regenerations, and so on. Grouping will help the user with getting an overview and get which stats are doing what.

22 – Explanation, help, hints and tips: This window will be very important with the overall process. Here the user will get help, find detailed info and check for stats which effect other stats and so on. Please check A, B and C for more info!

A and B: If a user hovers over any of the stats displayed on the page, it won’t be displayed be displayed on the explanation window only, but each stat which is being affected by this stat will be highlighted. For example: If the user hovers over the agility stat on the left-hand side, each stat, which will be affected by agility will be highlighted on the screen. We might work with different colors here as well, if a stat might have positive and negative effects. The same goes for secondary stats and derived – if a user hovers it, he’ll see, which primary attribute he has to change, to change the stat he’s hovering.

C: Whatever a user hovers on the stat screen, he’ll get additional info on the explanation window on the right-hand side. It might be just an explanation, but also helpful info and here he’ll see, if any primary stat effects the attribute and in which way. As well we can provide info, if a call or race is having an effect on that certain stat.

statselect2

Summary bar General info: The summary bar displays info from each step of the character creation process, so the user knows what decisions he made earlier. We need to check in detail, which info we want to display here. The main idea is coming from the Pillars of Eternity character creation: http://imgur.com/3aX7N0J

23 – Character name: The character name the user created for his character. Maybe we’ll add a gender icon here or just display the gender as text.

24 – Realm, class and race: Here we’ll display the realm, class and race, after the user did chose them. We might want to add a dropdown, flyout, whatever to those icons, where the user gets a summary of the selected realm, class or race. On the other hand, it might be too much!?

25 – Character summary: Here we might add additional info of the character the user is creating. summarybar

Banes and boons Still working on it. Will have a solution by tomorrow or Wednesday!

Hey @Heartfyre, thanks for working on this!

Realm selection: 1 - I agree with added a summary bar to show the progress of the creation. 8 - I remember internal talks of reducing the text, while adding more visual things for the player to see. I think the larger screen would work for that.

Race and class selection:

it looks like Races and Classes are shown as Races OR Classes in the mock up. How would someone choose 1 race and 1 class, if they are both shown in the way you mocked it up? We need a way to allow someone to choose a race and then select a class. 10 - I prefer the 1st layout. It also allows the navigation buttons to always be at the bottom of the screen. 15 - Where and when does someone define their character name? I guess they could define it here.

Attributes: 19 - Good idea combining the primary stats together. It gives us more space!!!!! 22 - What do you think about making a hover-over tooltip rather than using block 22 to show the description. We can use 22's space to show the Traits(B&B) and other stats that came from race and class selected. The reason for this is that a user has to hover over attribute on the left and keep their eyes on the right to read and get more info.

@jamkoo

Hey Mr. Koo! Regarding:

it looks like Races and Classes are shown as Races OR Classes in the mock up. How would someone choose 1 race and 1 class, if they are both shown in the way you mocked it up? We need a way to allow someone to choose a race and then select a class.

I think you got it wrong or I might have explained it bad. It's just that the race and class selection looks pretty much the same, while there'll be two steps. First you select your race and on the next step (screen) you select the class. So you have to confirm the race selection, go on and then you select your class, which might depend on the race (dunno). But it'll be clear to the user, that he'll select the race and on the next sreen the class.

Where and when does someone define their character name? I guess they could define it here.

Yeah, shame on me. I simply forgot about it. But I agree with you, it will fit the race or/ and class selection screen.

What do you think about making a hover-over tooltip rather than using block 22 to show the description. We can use 22's space to show the Traits(B&B) and other stats that came from race and class selected. The reason for this is that a user has to hover over attribute on the left and keep their eyes on the right to read and get more info.

If we can manage to include the needed info into a tooltip, we might be able to remove that big ugly block. I am not sure yet, if combining stats and b&b on one page would be a good idea, as we might ask too much from the user. We'll have a lot of info on one screen and those would be of different types as well.

Don't get me wrong here. I am not an expert in game design. So, I am just thinking here. I mean, I can check it out and see, what'll look like, so we can decide wether we want to go with attributes and B&B on one screen or two seperates.

Hey guys,

attached you can find a first UX version of the banes and boons for the character creation process. Keep in mind, that it’s only about the overall layout and the UX, but not about design!

Important: It might be possible, that I didn’t add everything needed or things might be wrong. I am not sure if I am aware of everything with the B&B system, and also, I am not sure if I did understand everything correct. Please feel free to correct me!

banesandboons

First things first: I designed the B&B as some kind of builder, where the user picks and builds his own character through the banes and boons. This is loosely based on the work of J. Koo, but I tried out my own approach of it.

Right now, the B&B is using one extra “page” in the character creation process. We might think about, combining it with the abilities, but as I said before, I am not a big fan of it. There is so many info, both with the abilities and also the banes and boons. Putting it all on one page would result in a lot of info. Also, we would combine too different things on one page, which might be confusing to the user. Again – This is just my opinion. If you decide at CSE to do it differently, I will do my best to come up with a solution.

Design: As I said before, this is not about design. But I sure had some design ideas in mind, when I created the layout. My idea was to have banes or boons on the left and the other one on the right side. Later we might want to have the one darker or with a different color, like with red and blue or fire and ice (just for example), and they’ll merge in the middle. Just an idea.

Usage: The user can hover the banes and boons, which will be presented by graphics (icons) and select those which he likes. We can do it by clicking or by drag and drop. Once selected, the bane or boon will be added to the builder in the middle. The user can add boons or banes only, if he meets the requirements, like points or the correct balance between banes and boons.

Description

1 – Summary bar, as described before.
2 – The banes and boons column.
3 – Items (banes or boons) are sorted by category, o the user knows where they’re coming from.
4 – A bane or boon item, displayed by a graphic (icon).
5 – An active bane or boon, which the user already did select. It can be found on the builder as well, and it’s highlighted on the list.
6 – Details of a certain bane or boon will be represented by a tooltip/ overlay, which will save us a lot of space. Also, the user won’t be struck by too much text.
7 – No seven… Forgot to add it. ;)
8 – The banes and boon builder column.
9 – On top of the builder the user can find general info, like about available points and a bar with the balance between banes and boons.
10 – An already added bane or boon, which has been added to the builder.
11 – An empty slot for another bane or boon.
12 – A disabled slot, which only will be available to the user, if he added boons or banes to the upper levels of the builder. Also, he needs to meet certain requirement.
13 - A summary of all the banes and boons the user did chose, with the same info, which can be found on the tooltips.

So overall I like the concept.

One major issue which I'd like to know about is how does the player know how these bane and boon selections affect their character. This is a big thing that we want to present throughout creation is what each choice means to their character.

Just throwing an idea out, how would you think it may look to compress the center selection section down to maybe 1/3 1/4 of it's size towards the bottom, as there is a lot of white space there and maybe having a character sheet type display above it filling the rest of the center section?

Hmmm, to be honest, I might not have enough background info to answer your question in total. Did you guys already talk about, what you mean by "meaninful" and how it would be presented to the user? Or what does "meaningful" even mean in the context of the character creation process.

Don't get me wrong here. I am willing to do what ever you want, but I am a bit lost. Maybe I just don't understand what the overall goal is and what the way towards it looks like.

Or am I missing something here? :)

The goal is to clearly display to the user what the results of their choices are. Some Banes / Boons for example may be like +10 strength during night or something to that effect...

Maybe it's just that the "Summary" section is small and looks more like it would be more of a tooltip type thing. That summary should be more prominent than the selection area as that doesn't give you any information other than, "hey there are slots here for stuff", which can be compressed down to give the important Summary stuff to let the user know what they are doing more.

Okay, I now I understand what you're talking about. I have to think about it and come up with another solution. I think I already know what I am going to do. I'll try to come up with it tommorow. Won't be able to do it today, as it's already late and I have so much going on right now. But I am on it!

Great, looking forward to it!

Okay gentleman,

I did create three new versions of the bane and boon layout. Please keep in mind, that those are just ment as a foundation, from which we can advance together, to find the best approach. It's only about the layout, but not the design in any way.

With the first version, I did minimize the top part and gave the summary/ overview more space, to have it more meaningful. banesandboons2

The second version is similar to the first above, but I did split banes and boons. banesandboons3

With the third version I did remove the icons from the center part and gave the summary even more space. With this version the user will see his selection by the highlighted icons and through the summary only. banesandboons4

Seems fine either way. We just need something that basically works for now.

CUModSquad / Camelot-Unchained

Character Creation UX Update #82

Character Creation Design

Realm Select

Race & Gender Select + Class Select

Stat Allocation

Banes & Boons Select

Overall Design

Attention: The following concepts are only for UX and element positioning, but not about design in any way! So please ignore element design and coloring at all!