Adding new screens

I wanted to make some updates to the final screen. Previously, I just had one “congratulations” screen that appeared after the user answered some questions. The user was presented with one badge. However, I wanted to take this one step further and have different badges depending on how many questions they answered correctly. These can be seen below in bronze, silver, and gold.

I then needed to update the screen that they appeared on.

As you can see, the user can see all the badges that are available to collect. If they get one question correct, they receive a bronze badge. The silver and gold are transparent, and they become solid depending on how many questions they get correct. The text stays the same on every screen and it encourages users to retry if they didn’t get all the answers correct. The text then changes when they get the gold badge saying, “you’ve earned every badge”.

I am happy with how these screens turned out. I think it’s a good way to give the users something to work towards. It will make them more likely to take in the information to earn more badges.

Other improvements I made

After some feedback sessions, receiving advice from my peers, and doing some usability testing, there were lots of updates to make.

Firstly, on the home screen, I made the instructions button smaller. This is because it is less significant than the start button. This makes the start button stand out more which is important because it will be the most used button.

Next, I made some changes to the main screen. It was suggested that I add the title of the app and the logo to this screen. This reinforces the brand and adds consistency.

Here, I also added text telling the users to scroll. I added this because, when I was running usability tests, some users didn’t know you could scroll. Therefore, this makes it more obvious. The fact that you can also see the top of an object also makes it more obvious that you scroll.

During user testing, one user asked if the plant was clickable. This showed me that I needed to make this more obvious. I did this by making it a brighter colour. This makes it stand out much more against the dark background.

Lastly, I made a small change to the element information pop-up. I added a line to separate the information more. This makes it more structured and easier to read and follow.