Case Study: Colonist.io Redesign
The Task:
Redesign the lobby page for this web browser board game developed by Colonist.io
The Original Lobby Page
A little backstory, I found this web browser game through a job post saying that the developers were looking for a UI/UX designer and thought I'd give it a shot and take a look at the game itself.
1st impression:
-
UI elements seem basic and messy, especially those elements at the top left and right corners of the webpage
​​
-
The UI elements seem flat and lack depth​
​
-
The advertisement banners at the outermost sides of the main area in the centre does not look aesthetically pleasing
Getting to Work On the Redesign
Colour Theme
If it is an existing webpage like this one, I usually gather the colours for a colour theme.
I decided to take reference of the colours from their current logo and the background to use for my designs.
Redesigned Layout
This is 1 of the end results or layouts that I came up with.
​
-
Fewer UI elements through the grouping of certain interactable buttons and sections under tabs (e.g. Rooms, Games, Tutorial, Shop, News/Updates)
​
-
Thought of creating wood-like panels/boards to house each section of the screen such as the display of the rooms and posts and the lobby chat
​
-
The main focus of the page is in the centre where the rooms are displayed, so I decided to place the tutorial section there as well where we could embed a video of how the game is played so new players can easily access it.
​
-
My personal take on why the number of players online or in a game is displayed is to hint at how quickly can players get into a new game. Thus, I decided to keep that section on the screen but place it in the corner to not create a messy and unorganized look to the page.
​
*All graphics were done using Adobe Illustrator and Photoshop
*Fonts used was "Franklin Gothic Demi" to compliment the font used in the logo
A Few Other Layouts That I Thought Of
My main design goals:
-
Keep the main bulk of content/information to the middle of the webpage
​
-
Reduce initial information overload on the user's cognitive process by reducing the number of UI elements they have to look at
​
-
Make the webpage more aesthetically pleasing as well by adding more colours and creating proper panels for to house different elements on the webpage
Self-Reflection
-
Overall, I had fun designing the lobby page for this web browser game :)
​
-
It was only my second time working on Illustrator but I am glad I managed to come up with the logos for the background of the webpage
​
-
Even though advertisement banners are unsightly, I have to remember to include them somewhere on the page​