The Drafts
The first attempts at making the UI for the app, these are practically mockups for the app to showcase the UI and how the app would look and behave. I got a one to one feedback session with Kyle on the app should feedback I recieved from him will also be included.
The Element
This is the main first page I made, this what you get when you press on the elements, it brings up this interface. There will be lots of information as you scroll down, keeping the overall UI in a vertical format will mean that the app will not be over-crowded.
More Screens
I started moving backwards when making this app, I went from the elements information page back to the transition metals and then back out again to the topics. The topics are basically the periodic tables sections all split up into topic making it easier to categorised the elements.
Quizzes
The idea of this app following Tinders layout meant I needed to make something place of the Tinder Gold area. There was no better idea than putting quizzes into it, each quiz would be on a specific topic of the periodic table, plus quizzes on certian types of elements. Along with the quiz, I also started with the login screen as well, this would be the first thing you see when opening the app.
Finishing touches
I further fleshed out the app by adding more screens, I added more examples of different topics such as Alkali Metals, Noble Gases and Alkaline Metals. I also add the Quizzes section, this is where you will find all the quizzes in the app, to move onto the next one, you must complete the previous one, this way it adds a form of progression to the app. The final screen I added was the dashboard, from the login screen you would then go to the dashboard and from there you can go to the quizzes or to the topic, more features could theoretically be present but only if you scroll down.
Overall I was pretty happy with the app, although as Kyle points out in his feedback there are some small issues that need addressed to finalise the app.
Feedback
In terms of feedback, Kyle only had a couple of things to say about the app, I made a small list of changes Kyle wanted to me to do.
- Back buttons and the hamburger menu must be consistant throughout all screens.
- Add brand wordmark to the top of all screens, adjust size to make it fit if needed.
- Change the colour the deadly elements quiz buttons to match the same as the topics.
- Move each element section down along with the rewind button to cover negative space.
- Make login information bigger.
- Dashboard sections, remove periodic table and replace it with element symbols and make the boxes half text and half image.
- Keep block layout between all screens consistant.
- On the main page with the element, line up text.