Please refer to the wireframes attached to get a better understanding of the structure. They are only for the sake of understanding, let your ideas guide your decisions, happy to get some creative and out of the box thinking!
We need a design for the pre-result page (4. Pre-result page), when students finish their test and obtain their grade. It needs to show how they compare to other users as well as an invitation to connect with LinkedIn in order to access the entire content of the page (i.e. compare to 'Company X employee' feature).
- This page should have a versatile structure as we plan on re-using it for the homepage as well as for the tests themselves
- It should be evident to the user that they need to log in with LinkedIn. That is how they can benchmark themselves against people who worked at the companies they want to apply to (our website relies strongly on the fact that users connect with LinkedIn as that is how we get the information for people to compare to one another)
- It should communicate the user's score effectively, using readable fonts and sizes
- It should be visual, we like to communicate statistical data in a very visual way as it makes it much clearer
This is the '6. Your Profile' page. Here, users can read a summary of their performance on the different types of tests (Numerical, Verbal, Logical) as well as a composite score. This page has two components: the first is to give a summary on each type of test and overall performance, it shows their average score for each section as well as how they performed against other users; the second is also a summary for each section but it allows users to compare themselves to users from specific companies.
The challenge of this page is to stay in line with the design of the 'First Page' and to communicate clearly a lot of information. You can use the wireframes attached to get a better understanding of the structure, but please let your imagination flow, visuals will be key at communicating complex information in simple terms and images.