Course Reflection

Meeting Expectations

The project met the majority of my expectations of the course that I wrote in the first week’s blog. The group project includes both the front-end and back-end work, as well as the visual design and interaction design. Through the semester, we ran a rough process like a real-world project from the concept generating stage, design proposal stage to the final product. And we actually made a playable game rather than a hi-fi prototype, which made me feel so exciting.

Learning across the course

Specific skills of design and programming were taught in this course. For instance, Photoshop, API Handling, JSON parsing, and so on. Also, we could reinforce the prototyping and basic web development skills through the project.

Personally speaking, I was weak at using Photoshop before the course. The project pushed me to use it and I really learnt a lot through the project with the help of my teammates. Additionally, as the project used AngularJS to dynamically change the web content, I learnt a bit about the working logic of it. As for the basic web skills such as HTML, CSS, and JavaScript, they are practiced again in this portfolio assignment. I also had the chance to practice using Bootstrap as it is used to layout our game website.

Recommendations

The lectures are mostly about theory, which had little practical use for the project. Also, the practical tutorial didn’t teach many useful technical skills. Hence, we had to learn the skills all by ourselves at the most time.

In addition, we need more help with the project. As our group encountered the environment configuration problem when installing Python development environment and nobody (include the school’s help center) could stress the problem, we had to change the back-end approach completely, which was quite time-consuming because we waited so long for their reply.

Lastly, I have to say that Trove is a really bad portable with disordered data. Many data could not be accessed directly when browsing the page because they are stored on the external databases, which made it even harder to retrieve by technical means. Besides, many images on Trove were of low quality and cannot be used in the game. We thus always had to find the higher quality versions of those images from other places instead.

Conclusion

Overall, this is a good course that taught and trained our designing, programming, and communicating skills. I'm happy with the final outcome although it is not that perfect at the current stage. I'm very grateful for all the team members who've helped me a lot on the project. Also thanks to the tutors and lecturer for all the guide and help during the course. It is their critique and guide that made the Truth Detective a better game.

WK13 - Trade show

We did the trade show last on week 13's contact session. Basically, it was a showcase of our final project. First, we did a two minutes pitch to illustrate the general concept, intentions and target audience to the tutors. Then we let them actually play the game, giving instructions and answering their questions while they playing the game. Also, classmates from other groups came by to play the game and gave feedbacks.

The majority of the players thought Truth Detective was a good game. The story was fun and the idea was appealing to them. Moreover, most players could figure out the questions and get through all 3 chapters, which was a relief for us because we all concerned for the game difficulty and afraid it might be too complex for the players.

Besides, the tutors thought the dialogue in each chapter was a bit long and suggested us to reduce it. Stephen also gave us a great advice for future design. He thought we could redesign the clues to make them nested instead of the current explicit and individual ones. For instance, only after a certain clue is found could the other clue be found. This would make the detective process more like a real criminal case which will increase the playability of the game.

Other groups' projects are also fantastic, everyone did a great job. I particularly love the 'FindMals' game, especially its neat interface and cute animal icons.

WK12_modifications of the game

As for this week, we are continued to polish our game based on the feedback from last week. Right now we have solved such problems below:

Homepage:

- Changed the text color and make it more readable.

- Remove the ‘@copyright’ label, ‘Terms and Conditions’, ‘Privacy Policy’ link which was on the     bottom of the homepage.

- Added a “move down” button for leading players to scroll down. 

Tutorial and chapter 1:

- Corrected the grammar and spelling errors in the dialogue content.

- Simplified clues- cut down a lot text contents and switch them to graphic clues.

- Added a short video before tutorial for describing tour game story.

- Made the game page fill up the whole browser window and remove the scroll bar

- Added a link for returning or navigating to previous or next level.

- Added a button for reviewing the dialogue.

- Redesigned the dialog box and added “prev”, “next”, “skip” buttons in the box.(picture 1)

- Created a more obvious question box.(picture 2)

original version

new version

WK11_Digital Prototype Feedback & Evaluation

OVERVIEW

We conducted a user testing session on Oct 14th of the unpolished game. In that stage, we implemented the homepage, user page, tutorial page, and the first level of the game. The major goals for this testing session are:

• refine the content of the clues and dialogue on the site.
• discover the unfunctional bugs of the layout, content display, navigations, and so on.
• find the elements that violate the user experience principles.

PRE-TEST

We prepared several questions for the user testing. Before the user played the game, we briefed the idea of the game to the user.

TESTING PROCESS

Tester 1

Observation: 

Homepage:

• Instead of scanning the homepage to the bottom, this tester just clicked the “play game” button in the first screen of the homepage.

Tutorial:

• He read the tutorial question carefully.
• He skipped the tutorial section and character dialogue.
• After he clicked the second clue, he didn’t read the context.
• He only found 2 clues but figured out the tutorial answers very quick.

Level 1:

• He read the character dialogue very fast.
• The tester felt boring to read clues’ content and just skimmed the whole context.
• He found all clues in Level 1.
• He tried to type answers twice and get the correct answer very quick.

Feedback and suggestion:

• The clue content is too long to read which is quite difficult for our target audience (high school students).
• The game page should fill up the whole browser window.

• During the game, there should be a hint to remind players how many clues left.
• A dialogue box should have “next” and “skip” button rather than using graphic icons.
• If for a long time the player cannot find any clues or figure out the answer, something should show up to remind the player.

TESTER 2

Observation:

Homepage:

• The tester didn’t scroll the homepage to the end.

Tutorial:

• After jumping in the game interface, he clicked the menu bar’ label first rather than starting playing the game.
• He read the character dialogue but miss the tutorial section.
• He tried to go back to the previous dialogue.

Level 1:

• The tester clicked clues randomly and didn’t read clues’ content at all.
• He didn’t want to read any text.
• He didn’t finish the game.

Feedback and suggestion:

• In the homepage should add a “move down” button for leading players to scroll down.
• Clues should be redesigned. Instead of long text clues, using the short riddles to increase the enjoyment.
• To add a “go back” button for players to reread the character dialogue.

 

TESTER 3

Observation:

Homepage:

• The tester found he cannot sign in after clicked that button.
• The tester didn’t scroll the homepage to the end.

Tutorial:

• He tried to use keyboard control the dialogue process and press Enter key after typed in the answer.
• He tried to click some items during the tutorial section and said the tutorial is a little bit long.
• He missed the main question at the beginning.
• he cannot understand the question, what’s the HOPE means?

Feedback and suggestion:

• there should be an introduction for the game story.
• to change text clues to picture clues or dot points.
• how to go back to previous dialogue and last level?
• highlight clickable items when players spend a long time without working out answers.

TESTER 4

Observation:

Homepage:

• how should I start the game, the tester didn’t find the play game button on the homepage.
• she didn’t scroll down the homepage as well.

        Tutorial:

• the skip button is not clear.
• the player dislikes the background music.

Level 1:

• when clicked one item, Trove picture cannot show up.
• the player was lazy to read the clue.
• when inputting a wrong answer, she didn’t know where to return.

  

Feedback and suggestion:

• the background music is noisy.
• the question box is not obvious to see.
• clues don’t have a clear connection with each other.
• when users type in the right answer but using the wrong case, there should be a hint to remind players. otherwise, the answer for lower case and upper case should be both ok.

TESTER 5

Observation:

Homepage:

• the tester scanned the whole homepage carefully and think the text on that page is too small to see it.
• has no idea about the profile.

Tutorial:

• music bar is too short to move the mouse on it.
• he found some spelling mistakes in dialogue.

Level 1:

• he saw all clues seriously.
• he felt tensive when he saw the timer.

Feedback and suggestion:

• to add a button for returning to the previous level.
• to add a hint to remind players how many clues they don’t find.
• to make a close connection between clues.

TESTER 6

Observation:

Homepage:

• The tester did not pay much attention to the page.

Tutorial:

• He read all the text carefully to help us check the grammar and change the tone of the text.
• He noticed and recorded the time (2’ 14”) he spent on this page.

Level 1:

• He read all the clues very carefully and tried to figure out the answer of the game.
• He tried to solve the problem by the time mentioned in the clues.

      Feedback and suggestion:

Tutorial page:

• Apart from the right arrow, the user can also click the entire image to skip the dialogue.
• ‘Get in the house’ changes to ‘Sneak in the house’.
• It really costs time to read the whole text on this page.

Level 1 page:

• Give an indication of the items that have been clicked (discovered).
• Resize the coin image.
• Too much reading on the clues.
• Reinforce the connection between each clue and the final answer. Currently, there was no clear relation between the final answer and some clues.
• Every time when the user plays over 10min, the system automatically give a hint to him.

TESTER 7

Observation:

Homepage:

• The tester had no trouble login the system.
• The tester scrolled down to the bottom of the page to see the whole page.

Tutorial:

• He had so much patience of reading all the dialogue without skipping any of them.
• Every time when the ‘And an answer input bar...’ dialogue popped up, he tried to find the answer input bar but in vain.
• He refreshed and watched the tutorial again and again to learn how to play the game.

Level 1:

• He didn’t pay any attention of the content of the clues.
• He didn’t try to solve the question at all.

      Feedback and suggestion:

 
Homepage:

• The text colour on the homepage needs to be changed.
• The ‘@copyright’ label is outside the footer
• The ‘Terms and Conditions’, ‘Privacy Policy’ link on the footer is useless, which should be get rid of.

Tutorial page:

• The sequence of the tutorial page needs to be modified. It’s better to show the 5 tutorial images before showing the dialogue.
• Decrease the dialogue box and make the content concise, or just not show the dialogue.
• Add ‘clues’ number at the top-right corner of the page.
• The text colour in the answer input box needs to be changed.

Level 1 page:

• Dense text.

REFLECTION

Many testers faced the same problems while doing the test. Based on the observation and feedback received, we narrow down the problems and form a list of the solutions regarding the most urgent problems that have to be changed in the next stage.

Homepage:
Must fix:

• Change the text colour on the homepage to make it clearer.
• Remove the ‘@copyright’ label or put it inside the footer.
• Get rid of the ‘Terms and Conditions’, ‘Privacy Policy’ link on the footer.

    Optional:

• Add a “move down” button for leading players to scroll down

Tutorial page:

Must fix:

• Apart from the right arrow, the user can also click the entire image to skip the dialogue.
• A dialogue’s content: ‘Get in the house’ changes to ‘Sneak in the house’.
• Reduce the number of the dialogue box and simplify the dialogue content.
• Modify the sequence of the tutorial page. Add ‘clues’ number at the top-right corner of the page as a tutorial image. Show the 6 tutorial images before the dialogue box.
• Change the text colour in the answer input box according to the background of the scene.

   

 Optional:

• A dialogue box should have “next” and “skip” button rather than using graphic icons.
• To add a “go back” button for players to reread the character dialogue or the tutorial.

Level 1 page:

    Must fix:

• Simplify the clues’ content and then remove the scroll bar of the clues’ text.
• Modify the clues’ content to reinforce the connection between them and the correct answer.
• Responsive webpage: always make the game page fill up the whole browser window.
• Show the hints’ number on the game page or indicate the user how many hints are not found on this page.
• Resize the coin image. Also, be cautious of the images’ size on other levels to ensure it displays well and consistent with other clue windows.

Optional:

• Give an indication of the items that have been clicked (discovered).
• Every time when the user plays over a certain period time, the system automatically pop up a hint or highlight clickable items to help the user.
• Show a hint to remind the users when they type in the right answer but using wrong case.
• Add a link for returning or navigating to previous or next level.

CONCLUSION

It’s a successful testing session, we received lots of brilliant suggestions through the observation and feedbacks. Thanks to all the participants.