Isometric Room: Bedroom In The Attic

I’ve always wanted to try my hand at an isometric room design. This one got heavily inspired by one of our old bedrooms.

I started by creating mood boards using Pinterest. Then I followed a quick tutorial to get started and mostly went on my own from there. I worked on this project for several days, documenting the progress I had made at the end of each day, combined with rendering a final image for the day.

I also took the time to learn more about the material node system in Blender as I previously only used base colour- and normal maps.

After this project, I have learned how to add controlled randomness (for example for books or clothes) as well as use built-in textures to add relief to the floor for example.

An example of a node setup for a random book cover material.

Streaming Site Mock-Up: CMGTwitch

Introduction

This was one of the most fun courses I had this year, I really like working on UI/UX in general so getting to do that for another subject is great. Last year I scored a 9,5 for UI/UX Design. This course builds upon that one so I knew that I wanted to try and get the 10/10 this time around.

Documentation of this whole process can be found here (evaluation report) and here (product report).

Requirements

The necessary elements for this assignment were as follows;

  • Find past, current and upcoming lectures, and join them if possible.
  • Find specific topics covered in recorded lectures so they can skip to what they are looking for.
  • A built-in chat function that encourages constructive discussions rather than spam.

Research

  • Twitch
CMGTwitch

Lo-Fi Prototype

In the end, I analysed the CMGT logo to create a colour palette and based on that created a style sheet.

Then I created the first lo-fi prototype. Said prototype can be found here.

This home screen is present in my lo-fi prototype.
CMGTwitch Style Sheet

The next step was to user-test my first prototype. I did this with three other students. The main things to take away from the tests are:

  • The top bar is weird, it is incorrectly spaced and the elements feel out of place.
  • The icon for a teacher on the lecture page is too big.
  • There should be a filter to find the right module/teacher faster.

Then I worked on the hi-fi prototype. For this, I included the improvements made based on feedback from the user test, an A and B versions and a brief user functionality description.

  • The homescreen present in the hi-fi prototype.


The prototype can be found here, the form used for testing can be found here.

After letting users test my hi-fi prototype it became clear that the hypothesis was right.
Version B was in fact easier to use in terms of navigation than version A.

Creating the final prototype using HTML, CSS and Javascript. This one can be found here.

In the end, I managed to score a 10/10 on this course. It was a great subject and I really enjoyed working on UI and UX again.

Website Mock-Up and Game UI

This subject was one of my favourites. I was given two tasks. The first one was to find a website that did not look too good and create an interactive prototype to show how you would improve it.


The second task was to find a game, take a background image of said game and create UI for it enabling the switching of weapons.

This whole process was documented, said document can be found here.

For the first assignment, I chose the website for Pringles. There were a lot of problems with it.

After analysing all separate parts of the website I created a top three of the parts that needed improvement.
These were:

  • Recognising, diagnosing and recovering from errors. When the user does certain things, he/she will be directed to an unclear page which shows the error in half code.
  • Flexibility and efficiency. The flow of the products page is not very good. As that is where the money is earned it is one of the most important pages.
  • Design. The overall design lacks professionalism and cleanliness. This could be improved easily by changing the navigation bar and the footer.

Based on these three problems I came up with the following improvements:

  • There needs to be a clear error page.
  • The products should be placed more clearly and should require less clicking.
  • The navigation bar needs to be cleaned up which will improve the overall site design.

Then I went to the drawing board and created these screens for my prototype:

The error page.

I researched how to create a good error page and one of the things was making it easy for users to find answers. That’s why I added Master Pringle. For the third screen, I mainly improved the image quality and the space between products to improve readability. Then for the fourth screen, I got rid of the separate pages for every product. Instead I made one big page on which the player can scroll, this would use anchor tags to ease navigation.

You can find the prototype here.

Now on to the second and last part of the assignment.

Board Game: Hammer Slammers

The first project of my study, CMGT. The goal of the project was to create a board game inspired by one or more digital games.

We thought of fun ideas and eventually came to the concept of creating a board game inspired by fall guys, the player(s) would have to throw a dice to reach the top to finish as fast as they could. We worked out different obstacles that the player would need to pass.

The board would be divided into three layers, each more difficult than the other. The gameplay would feel a bit like “Ganzenbord“, touching the wrong cell will see you being moved back and getting lucky would see you jumping in front.

The first few steps of designing the board

We asked one of the artists to create different tiles which we’d place on the board to show what action needed to be taken. I made the board in Blender 3D, and during the two weeks, we made three different iterations.

  • The first iteration with basic colour-coded mechanics

The first iteration was just to test if the game worked and if the cells were in the right place, and then we moved on to the second one.
This also was not yet what we wanted and it didn’t look that great.
Also, the artists were done with the tiles and so I decided to work on the final board, one with different stones as cells. Each cell that needed a visual tile on top of it had one and the game played well.

During the process, we also thought of a little backstory. Basically, princess pineapple was captured and the pawns (each with their own little backstory) had to try and save her. The first to reach her would win her hand and thus, the game.

The only thing left to do was to create an imaginary box in which we’d sell the game and create a game trailer which you can find below.