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.