This blog post shows my first attempts at the UI of this project. In today’s class, we had a feedback session so this also includes advice I received from that.

Colour pallet

I chose this as it has lots of shades of blue which ties in with the ocean theme. These colours will come in handy when choosing colours for different areas. I really liked the yellow as it’s bright and bold and will stand out against the rest.

Home Screen

Below you can see my first attempt at my home screen. I thought it was quite bland and missing some things, so I updated it.

Below is the updated screen. I like the colours much better after I chose a colour pallet. I think the dark blue against the white text, purple illustration, and yellow buttons adds a nice contrast. I also decided to add an instructions button to further explain how to use the app and a settings icon. This may be used to change the difficulty etc. I updated the illustration as well so the character is holding test tubes, this ties in with the science theme.

Feedback:

The feedback that I received on this involved creating a brand. I need to create a wordmark/ logo instead of just having type on its own.

 

 Loading screen

I wanted to keep this simple and to the point. When this screen appears, it will stay for a few seconds to allow the user to read the text. I decided to include this as it gives users a brief explanation of what to do. This will be beneficial if they don’t read the instructions.

Feedback:

Make the text smaller and possibly add some background illustrations.

 

 Play screen

For this screen, users can click on different objects including, a bubble, treasure chest etc. A pop-up then appears, giving the user the name of the element. The user can then test their knowledge. This brings them to the same screen. Here, users click on the objects, but they have information missing which they must fill in to earn coins.

Feedback:

• Have more information on the elements
• Each element should have a screen that slides up rather than pop-ups
• The coins add up in the corner each time they look at an element rather than the user being tested and earning them
• Add more illustrations to the background and create a scene
• Make the clickable objects obvious by having them move/pulsate
• Add a boat illustration at the top with text explaining what to do

 

I am looking forward to the next step of this project and making the improvements. I will continue creating illustrations, improving my current screens, designing new ones, and creating a brand for the project.