Case Study: Game of Thrones Character Test
In honor of last season of Game of Thrones We’ve created a simple character test.
Idea
The idea of this test was quite simple. As a huge fans of GOT we wanted to combine our skills with series. And share it with other people. We didn’t care if it’s going to work or not. We were just having fun:)
Mobile first
For this project we applied Mobile first approach for few reasons. First it is know that more than half Internet users are using mobile devices. Second it will be a lot easier for this project to adapt desktop version from mobile than other way around.
Process
First of all we started with writing a list of characters, questions base and building algorithm for it(More about algorithm down below). Then we started to editing photos for each character and build a concept. As you can see on the screenshot down below there is a light theme, but we decided to stick with dark theme, because it’s more suitable for Game of Thrones especially for 8 season.
In the conclusion we’ve ended up with those number of pages:
- Start screen
- Question page
- Result page (20 individuals pages for each character)
The project features:
- Two language versions
- Edited photo for each character and aka description
- Reactive data
- Flexible algorithm for adding new characters later on
Desktop funny feature
We added some interesting thing on desktop version. If cursor goes out of the website in the right bottom corner Lyanna Mormont shows up.
Algorithm
We assigned each character values of certain parameters: Mind, Honor, Sense of Humor, Strength, Bravery, Charisma. And for each options of answer we’ve set some values. For example if your answer is 1 then you got 10 score to Humor and 20 to Charisma.
So when user are answering questions he will receive kind of parameter’s score depending on question and answer itself. And then user’s score compares with character’s values.
Btw it was really helpful to use Google sheets for this at the beginning. It allowed as to test algorithm before coding.
Let’s code it
For this test we used Vue.js framework. It allows to create and run things really fast. Reactive elements and data is more than enough for this kind of project and fast work of algorithm.
Link to character test
