Dev Log #7 - UI Updates

[p]Hi all![/p][p]Today’s dev log will finally be image heavy. I’ve been stuck in the weeds of UI, and I’m happy to say that a lot of progress has been made. [/p][p]Much of the original UI was thrown together quickly, and while somewhat functional, it was certainly not pleasant to look at. With many elements of the game programmed at this point, I 1) needed a break from programming, 2) felt the need to start showing more of the game as we get closer to release and 3) got tired of losing track of temporary debug buttons.[/p][p]So, that brings me to now. I’ve gone ahead and completely rehauled the original UI, using a new visual style, color palette, and the introduction of dark mode, which became very necessary after using the old UI. While still a work in progress and not production-ready, the overall visual style is complete, and I’ll be giving you a brief preview of some of the things I’ve been working on.[/p][h2]Selection Screens[/h2][p]When you load up the game and go to start your first campaign, you’ll be greeted by this election year screen.[/p][p][/p][p]As you can see, there’s a number of different scenarios that will be available at launch. Here, you’ll also be able to get information about the demographics of the election, as well as the historical results. Additionally, you’ll see what makes the election unique. For 2024, the election is Polarized which means the various ideologies have very little crossover with each other. Additionally, 2024 is Turbulent which increases the chance of a random event having a larger impact on the campaign. Finally, 2024 has an Incumbency characteristic, which gives an enthusiasm advantage to the party not in power (the republicans, in this case). [/p][p]Once you choose a year, you’ll see the roster of candidates available to play with.[/p][p][/p][p][/p][p]Each scenario will have plenty of options to choose from, and each candidate will come with different traits and attributes. You can add multiple candidates to a campaign, and while they aren’t displayed on this screen yet, you’ll eventually be able to see all of the candidates who will be a part of the campaign as a list. [/p][p]After adding candidates, you’ll see a screen where you can configure the election to your liking, such as randomizing populations, electoral votes, editing ideology names and positions, disable polling fog of war, and more. That screen isn’t ready yet, but it will be exciting for all of you election nerds to see, and something that I think will bring huge levels of replayability to The Electorate.[/p][h2]HUD 2.0[/h2][p]I was never satisfied with the original HUD. The white was too dominating, it was very blocky, and the red and blue outlines added a lot of clutter. I’ve revamped the HUD to do two things: increase the amount of visible screen space and improve overall accessibility.[/p][p]The following is the result.[/p][p][/p][p]This is still not a finished product, but I feel like it’s a lot of progress from where it was at before. On the top left, we now have a smaller candidate portrait, a thinner bar for cash, favorability, momentum, enthusiasm, and stamina. Below, you’ll find buttons for the polling dashboard, advertising, campaign staff, finances, media, endorsements, and volunteers. On the top right, you’ll find the current date, how many days are left until the election, and a button with the turn number.[/p][p]Finally, on the bottom right, you’ll see the same dashboard as before with the current national poll average and estimated electoral vote count, but now with the addition of map modes! Currently featured is the county map, state map, electoral vote map, population map, and the ideology map. More are certain to come, but that’s what I’ve landed on so far.[/p][p]And yes, the HUD can be changed between dark mode and light mode.[/p][p][/p][h2]County Cards 2.0[/h2][p]I’ve spent more time on county cards than any other UI element of the game because they are what players will be interacting with the most. It’s so important to get these right, and while the old card style was fine, I was not happy with it. For one, it created problems that would have to get resolved in the future anyway, namely, the lack of space for additional buttons and the fact that you cannot show more than two candidates at a time on the card. For most U.S. general elections, that’s fine, but in primaries that certainly won’t work.[/p][p]So, the originally the goal was to add at least one additional candidate to the old cards and then add a button for you to see the polls of all of the candidates in the county. Once I started on this work, I realized that the entire county card design style had to be tossed. It just wasn’t good enough.[/p][p]Today, I’m pretty happy with the direction I’ve gone, and I hope you are too.[/p][p]Now, when you click on a county, you’ll be presented by this screen.[/p][p][/p][p]First, you’ll notice that the pie charts are inaccurate and the percentage breakdowns in the stats are not accurate to the real world numbers. That’s because this is a mockup, so I didn’t feel the need to spend time making them accurate here.[/p][p]With that disclaimer out of the way, let’s talk through the card. First, the blue color is used to show who’s winning the county. Then, you’ll see the county’s population (9,663,345), the registered voters, and then the estimated turnout for the county (which will increase as the campaign continues). On the far right, below the exit button, you’ll see the progressive symbol, which is a quick identifier for the county’s primary ideology. Then, we see the current poll breakdown with a button to see all polls in the county. After that, we get to see the party registration breakdown, the ideologies present in the county, along with race demographics. [/p][p]There is a chance where I make changes to this screen to either add additional demographic information, or remove the race info to instead link to an additional screen with census info. There’s two challenges here. The first is whether it’s actually necessary to showcase race information, at least in this way. The most important stat here, by a long shot, is ideology information, and then party information. By adding the button to show all demographic information, the next challenge is collecting enough data from previous elections to always have something to show on this screen. The reality is that while the U.S. Census provides a great deal of information about demographics, it can get a little messy going far back. We’ll see how it goes. Anyway, this comes in dark mode as well.[/p][p][/p][p]Next, we have the campaign actions screen.[/p][p][/p][p]This screen has more work to do than some of the others, but you can get the idea. This is where you’ll perform campaign actions and see what other candidates are doing in the county. You’ll also notice that this county is red, so a republican is leading the county, and it also has the shield emblem, which means it’s a conservative county. When you click on a button here, a popup window will open to the side of the county card, where you’ll then be able to apply a little more control over each action. Those windows are not ready to be showcased yet, but just know that there’s more to do here than just click a button. You’ll also notice that there’s numbers inside these buttons. They are used to represent the cost of each action and the expected outcome. I’m still tinkering with that. At the moment I think it’s confusing and cluttered, so expect it to change.[/p][p][/p][p]Finally, we have the campaign buildings screen. First, the county is purple because it’s highly contested. If a county is polling two candidates who are within 5% of each other, it’s considered a contested county and will be purple. You’ll also notice that this county has a scales emblem, meaning it’s a moderate county. Then, we have a breakdown of the buildings available for the county. All counties require an HQ before they can build additional buildings. Buildings are quite powerful and essential to your campaign, but they come with a cost. First, there’s an upfront cost to the construction of a building. Then, you have weekly expenses that are scaled to the population of a county. For example, you pay an operating expense for each building, payroll for your HQ, and an inventory expense for the merch store. All of these are not static costs, and will be more expensive in larger counties. However, each of these buildings also provide bonuses to your campaign that are also scaled. For example, the merch store, while expensive in a larger county, brings in revenue scaled to the county’s population at a much higher amount. [/p][p]Above, you can see that the cost of buildings in this county is resulting in a -$966,000 deficit. However, assume that these buildings have only recently been built, and will likely become profitable in the future. Plus, remember, the goal is to win votes, not make the most amount of money. [/p][h2]Tooltips[/h2][p]No strategy/simulation game can be complete without an enormous amount of tooltips to explain how everything works. I won’t spend too much time explaining these, because they’re supposed to explain themselves. Hopefully you find them helpful![/p][p][/p][p][/p][p][/p][h2]Quick Polls[/h2][p]Finally for today, we have some new quick poll popups. These are for when you don’t want to click into a county or state but still want to see their polls quickly. This popup activates after hovering your mouse over the target for a short period of time. These will also be used during election night.[/p][p][/p][p][/p][p][/p][p]And yes, there’s dark mode as well.[/p][p][/p][p][/p][p][/p][h2]What’s Next?[/h2][p]The holidays are here. For us Americans, Thanksgiving is this Thursday, so I will be traveling to see family. I plan on spending a lot of time on UI for the next few weeks, and then I’ll be on the home stretch with development going into next year.[/p][p]As always feel free to join the Discord server to discuss the game, give suggestions, and help make the ultimate election simulator![/p][p]If you’re excited about the game, be sure to add it to your wishlist and hit the follow button.[/p][p]Thanks for tuning in![/p]