Dynamic Placement Test
Role
UI Designer
Deliverable
Responsive Mobile App
Timeline
6 Months
Platform
Adobe creative suite
Dynamic Placement Test is created to help institutions or schools do the adaptive test that classifies their candidates based on their English level. The test takes approximately 30 minutes to complete, and the questions are randomised.
I was honoured to participate as a UI and branding designer. I’ve made prototypes, and visual designs and followed up the implementation.
Background
The Dynamic Placement Test team regularly runs data analysis on tests taken by users, allowing us to renew and refresh the questions. With the constant of data from thousands of test takers we are also able to look at the validity of every item, ensuring it helps determine a test taker’s CEFR level within the 30 minute time-span. This means the test will become ever more relevant, reliable and valid.
Logo Concept
The inspiration of the logo came from the vocabulary 'placement' and playground runway. So, I picked the 'P' to be the main image and the lines represent the classified function of the app.
![2-DPT-Logo.gif](https://static.wixstatic.com/media/e10582_86fbdd2fd297456fa18757f1730d16c4~mv2.gif)
Design System
Because of 'TEST', the interface should be concise and consistency in different device, it is for the fairness and reliability
​
Colour Theme
Red and blue is popular using in academic industry. However, it is a revolution that doing a test by using mobile and it is cross device. So, I choose to use a 'fresh and growth' mood colour to present the different between other apps. Also try to use the gradient on the app that create a complementary look on the app. It also match the name of the app 'dynamic'.
​
Typography
Since it is created for test, the rule of typography choosing should be readable and clear. I choose 'Helvetica Neue' because it match what I want.
![Screenshot 2022-01-19 at 20.36.33.png](https://static.wixstatic.com/media/e10582_d3e8af77519c44abb3d0809b3e2ceb2b~mv2.png/v1/fill/w_89,h_37,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Screenshot%202022-01-19%20at%2020_36_33.png)
Button & Structure
“Consistency is one of the most powerful usability principles: when things always behave the same, users don’t have to worry about what will happen.” — Jakob Nielsen
I design the buttons with consistency; and each question with 'capsule', make candidates can be more easy to read it.
![5-DPT_profile171122-embad-04.jpg](https://static.wixstatic.com/media/e10582_be12fe4f2e314d11930253abff5c9095~mv2.jpg/v1/crop/x_0,y_126,w_905,h_526/fill/w_161,h_93,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/5-DPT_profile171122-embad-04.jpg)
Graphic
Consistency is one of the most powerful usability principles: when things always behave the same, users don’t have to worry about what will happen.” — Jakob Nielsen
I design the buttons with consistency; and each question with 'capsule', make candidates can be more easy to read it.
![6-DPT_profile171122-embad-05.jpg](https://static.wixstatic.com/media/e10582_2016792449094dd2a17f3544ab98a2ad~mv2.jpg/v1/crop/x_0,y_173,w_905,h_524/fill/w_161,h_93,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/6-DPT_profile171122-embad-05.jpg)
Question type
Beside multiple choice questions, it also includes other questions types, such as listening, true and false, proof-reading. I keep it simple, consistency and concise.
![Screenshot 2022-01-19 at 22.26.43.png](https://static.wixstatic.com/media/e10582_68eb6d09c7df48249c6364a9c54aacb2~mv2.png/v1/fill/w_89,h_49,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Screenshot%202022-01-19%20at%2022_26_43.png)
Responsive Design
This is designed for 'fair' because the app is for 'test'. I hope to make the interface look consistency. So that can be fair for candidates ,no matter what devices they use.
![Dpt-ResponsiveInterface2.gif](https://static.wixstatic.com/media/e10582_4a7dad513613418c88fc350cfb13fa23~mv2.gif)
Demo
I have created an animation for showing how the test work.
![DPT-Demo-noText.gif](https://static.wixstatic.com/media/e10582_7a7bbe959f764ce0a151d0b48dee6a9e~mv2.gif)