Exercise 1.2

Chosen web project: AI Ethics Game Website (Client)

The AI Ethics project is a joint project between a couple of micromedia students, in which we are tasked to collectively create a website where students can learn about artificial intelligence through fun educational games. Within the team, my main role is to create the design of the main website.


Feedback / Problems

AI Ethics game website

  • The website is not mobile friendly and it is not reponsive.
  • The nav elements could be spaced out better and should feel more instinctive
  • Be careful with the font sizes and the font colors. For example, the title is too big. The password input does not really look like an input for the user because of the font and background colors. The contrast is not right.
  • Add a footer with the copyright information, and/or additional important and useful links. Because it is a website for educational puprposes, it could look more legit and established.
  • The About Page should look cohesive with the other pages..
  • The Game Selection page could have more interactivity.

So what's my plan?

Work on the pain points of the user

  • Website non-responsive
  • Website inconsistent font sizing
  • Few micro-interactions

Food for thought

  • What is the purpose of this site?
  • This site serves as a space for students to learn about artificial intelligence and ethics through educational games.


  • What does the application need to do?
  • The website should have 4 necessities. (1) Welcome the user. (2) Make the user login. (3) Direct the user to the selection page after login. (4) Have an About page where users can learn about the purpose of the project: To create awareness and popularization of artificial intelligence and the ethics that comes along with it among college students.

    • To welcome the user, the website could incorporate a bit more micro-interactions for more interactivity.

    • There should be 2 call to actions or rather 2 access points to direct the user to the login page. 1 in the nav & 1 at the bottom of the page after scrolling through all the animations.

  • Do brand guidelines exist?/ Does a style guide exist?
  • There is no set brand guideline nor a style guide. Font and colors are really the only elements that make the website look somewhat "cohesive". It would be nice to set a bit of time to clearly define typography, color scheme, alignment, white space, etc. So that the coding is much more smooth.

    • To create a logo, and not just have a long name in the nav (?)