In my last post, I researched what is already out there in terms of sign-ups for closed alpha testing and analysed each one including:
SMITE 2
Bitcraft
Astera
Marvel Rivals
I now have a list of pros and cons for each design which I will draw from for my own designs.
In this post, you will follow me on the design journey as I create my own game, name it, brand it, wireframe my design, reproduce it in high fidelity, prototype it and polish it- all while explaining my thought process through each step!
Branding
First things first, I need to make my own hypothetical 'game' that's in Alpha and create a colour scheme for it.
Something that was very common in each of the examples I looked at were the gold or yellow colours so I intend to create something around that. While I'm at it, I'm actually sat here currently with a yellow blanked over my legs with bees on it. Perhaps I could make something a bit like bee simulator where you play as a bee and build up your own hive- like a bee strategy/survival cosy game!
Time to turn to Chat GPT to assist me in coming up with a name!
I really like the names Honeycomb Haven, Nectar Nook and Hive Harmony. What can I say, I'm a sucker for some good alliteration!
All three have elements that I could pull out to use in the branding and interface:
Honeycomb Haven- I could use the hexagons of the honeycomb.
Nectar Nook- This sounds the most cosy and I could use flowers- very cottagecore.
Hive Harmony- I know that bees communicate by dancing so I could bring that aspect into the game and music notes in the interface.
I'll ask some of my friends what they prefer!
The Winner by 2 votes is Honeycomb Haven! We need to make a quick Logo!
Logo, Check!
Wireframe
Now for a wireframe of my sign-up page, created in Figma!
I made the background darker rather than light because the web page in the background will be seen through it somewhat. My Logic:
My main focus is always creativity, theming and really bringing the user into the story-world of the game. However, I've tried here not to let that interfere with how easy this modal is to use and fill in.
Starting with the frame. I really wanted something nice and intricate that kept with the theme for the two opposing corners as I felt that one in each corner would be far too busy. I feel the frame pulls the user's eye in to the information in it as well as immersing them.
I then used the Logo I made above and added the closed alpha sub heading in with it too just to re-iterate to the user that this is what they are signing up for. My brain isn't 100% sure on the positioning of this as the information hierarchy may be off because of it. This is definitely something to look back on at the end of this process!
The titles for the fields, I wanted to keep nice and plain so as not to have any mis-understandings so other than a slight drop shadow, I didn't add much to them.
For the platform selection, I took SMITE's idea of the different shapes for the platforms and added a theme element to it (the hexagon like in the logo and in honeycomb). In order to improve the visual signposting of this however, I've made the outlines of them high in contrast to the backgrounds to clearly show they need to be pressed. I've also highlighted the selected one so the user can easily see which one they are inputting.
The email field is relatively large as it is the main piece of information we need from the user. Looking back over this design now, I believe the sign up button may actually be too far away from the email field and thus may look like it isn't part of the sign-up modal. Realistically though I think this is okay as the button is still well within the same modal and says sign up. I will question this in testing.
Finally, rather than making the newsletter signup a simple checkbox, I've created the image of a mailbox with a little speech bubble asking the user to click it to stay up to date with news. My idea is that before the user clicks this, the notifier will be down and when clicked, it will go up as though the mailbox has mail in it. I think that this will engage the user more and make them more likely to sign up to our newsletter as it is much more interactive and draws the user in more than a tick box. I will also use movement and animation for more signposting of this as I believe it could easily be missed.
My aim here is to get each stage done and move on. I can't be a perfectionist over it because UI/UX is an iterative process and changes can always be made!
Colour
Colour is SO important when creating a User Interface. Not only can it be detrimental to your accessibility for people with colour-blindness or impaired vision but a design is much easier to create when the colours pair well and you let psychology do the work for you!
Here is the palette I created for Honeycomb Haven. Much like the examples I analysed, I wanted to use yellow as an accent colour, especially with the theme of honey and bees. I also wanted the game to be cosy and calm which green really gives off. Therefore I made the main colours for my UI green and yellow.
I also checked these colours with colour-blindness filters to see whether they are still distinguishable with as many types of colour-blindness as possible. In some instances the two yellows are a little hard to distinguish from one another but it is unlikely I'll be using two yellows on top of one another for important information. I'll have to keep an eye on this though as I want my designs to be as accessible as possible.
The below shows what the colours look like with the most common form of colour-blindness, Protanopia. My friend James and my dad both have this form of colour-blindness at different degrees so I'll definitely check my designs with them too!
High Fidelity Pass
In place of the platform logos here, I've used circles to represent them for now- I'll pop the real logos in on my next step.
I feel like the colour scheme I chose works really well and it doesn't clash at all with any of the colour blindness filters I've tried on it so that's a huge tick in my book.
I like the design but there are some areas I'm not 100% sure on.
I know when I was in my Junior UX designer role on Doctor Who Worlds Apart, my manager mentioned something about fours and a rule with spacing and sizing to do with that so I'm worried that my design doesn't abide by that rule and I need to look further into it as I don't want things like the border to be too detailed to work in practise.
after some research, I believe this is what he was referring to. I will have to make sure that my future designs abide by this spacing guideline!
I'm also not sure whether the hexagons for the platform selection work well and whether it is clear enough which one is selected. This is something I'll have to ask in testing!
My next steps will be creating a working prototype of this modal in Figma and a video (made in After Effects) of any visual effects and sound effects I'd like to use to increase usability and signposting.
Kommentare