Java Quiz
Sometimes it is not clear if you have or not to be real knowledge. The best way to measure it is by resolving real problems. And if you are at the beginning of your exciting adventure into the world of Java you can find some unique tasks and test your skill.
My Role
It was a freelance project and I had only 15 hours to do my job:
User Flow
UI / UX design
Copywrite
Prioretizing after research
– Clear navigation
– Colorizing code
– Quiz
– Settings
– History pages
– Help pages
– Colorizing code
– Quiz
– Settings
– History pages
– Help pages
Should have
Must have
– Light and dark theme
– Text for the interface
– Illustrations
– Simplifying flow
– Text for the interface
– Illustrations
– Simplifying flow
Won't have (Not now)
– Style guides
– New functions
– Spend more than 15 hours per task
– New functions
– Spend more than 15 hours per task
Project Timeline
Style
Guide
Guide
As usual, to male work easier and more organized, it is better to start with style guide and components. We wanted the app's main focus on the code quiz, therefore, the design is rather minimalistic. Plus as it is all about code, we have to conduct design of the popular development tools, like WebStorm or Visual Studio.
Light Theme
Dark Theme
Color coding
User flow
Onboarding
For the start page, we wanted to show all the abilities instead of just starting the quiz. We have tested on users the behavior and most of them wanted to start quiz manualy. It is also one of the working stratagy to immerse newbies.
Quiz
The Quiz has 4 pieces:
– progress, which is shown in the top of the screen;
– java documents with code examples. The colors of the code are equal to the popular development environments;
– question with answers variants;
– quiz review, where the wrong answers are marked.
All the prices are minimal so that you can keep a point of view on the code.
– progress, which is shown in the top of the screen;
– java documents with code examples. The colors of the code are equal to the popular development environments;
– question with answers variants;
– quiz review, where the wrong answers are marked.
All the prices are minimal so that you can keep a point of view on the code.
Technical pages
These pages look like tables. The main idea is in keeping less time on the technical pages, than on quiz. So the better way was to design pages structured.
Light & Dark Themes
As all the coders are used to work in light or dark modes, we have to be consistent. For the app, it means to redraw all the UI and illustrations for the dark mode.
And check if the code highlights are readable in both modes.
And check if the code highlights are readable in both modes.
