Planning the UI for my new game

By Tucker Bichsel

7/4/2025

Loading views...

Now that my API is complete its time to start thinking about the UI. As I have mentioned previously, both in a blog post and in a video [link], I am going to start with a web UI. So let's start planning out the UI

User Flows

Before I start thinking about what the UI is going to look like I want to define the user flows for the game, at least at a high-level.

• create a username
• Request to start a game
  • Random
  • Known username
• Begin a game that was created
• Submit a round
• Check on the results of the round
• Check on result of the game
• Rematch with same user
• Check on results from previous games

There may be a couple I am not thinking of for now but that is a nice starting point. So now I need to start mocking out some of these screens. I normally just do some sketches because I haven't taken the time to learn how to use figma or something similar, I just don't have the time for that.

While making the sketches I'll make sure I have a screen or part of a screen for each flow. By doing so the user flows will help me come up with a design that makes sense.

To many times I have just jumped into building a UI without first thinking about what the UI needs to allow the user to do. But this time I am setting the time aside to think about the user flows so the UI can efficiently provide all necessary functionality.

Implementation

Once I have my designs I'll start with the code. I plan on adding these pages to the existing Next.js project I have the API in. That way I can continue to have it hosted on vercel for free.

These will be react component mostly because I have experience with React, though it is starting to get outdated. But that's not necessarily a bad thing this will be an excellent way for me to refresh my react skills.

They won't be overly complex but they will require some hooks for handling user state, making and processing calls to the API, and probably something else. I will need to figure out how to correctly create these UI components in a next.js project since it is server rendered and I'm not really used to that. But with help (mostly of the artificial variety) I'll be able to figure it out.

Time for Action

So my next steps are to sit down and start sketching out some mock ups. I'll probably spend a bit more time thinking about user flows to make sure I have them all, but then finish the mocks. Once I have that it will be time for implementation.

I am hoping that taking the time up front design the UI will move the process along a bit quicker. And all this work may even help me when it's time to move on to the mobile app