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.