menu
ABOUT
WORKS
CONTACT

CODE 2019

Software development, UI/UX design, Animation, Network, Virtualization

CODE 2019 is an attack and defense competition. Six teams of hackers will attempt to attack two banks as the defense.

Summary

We designed and developed the software for the competition. We used some metaphors so the audience can easily understand the competition. The audience feels more engaged because of the way of the visual interpretation.

Goal

  • Let audiences without information security background understand the current state of competition.
    • The network topology must be legible.
    • The traffic between each device must be shown.
    • The status of devices must be told by their appearance.
  • Let the participants have a more engaging experience throughout the competition.

Challenge

  • The actual detail of how they attacking and defending are way too complicated for people with no professional background.
  • The structure of network topology is complicated and can be confusing if not arrange properly.
  • The network topology of two banks are symmetrical, which can be monotonous.

The Power of Metaphor

We used metaphors so the audience can easily understand the competition.

  • Network topology & traffic
    • The buildings and streets show the real structure of the network topology and remain enough features to recognize their functions.
    • he interface can switch between 2 camera angles - top view and lower angle.
    • The name of each device will show up during the top view so audiences can understand the network topology.
  • The status of devices
    • The status of devices can be told by the color of lighting whether it’s online or shutdown.
  • More engaging experience
    • The attacker teams play as pirates trying to invade two islands.
    • While a team attack, the camera angle will switch to the lower angle to be more dramatic.
    • If an attack happens, the pirate ship will fire a cannonball toward the target.
    • A broadcast of the attack information and a mark of the team’s color will be shown if the attack succeeds.
  • The beginning - At the beginning of the competition, all buildings are normally functional and glowing blue.

    The beginning

    At the beginning of the competition, all buildings are normally functional and glowing blue.

  • Top view - The name of devicea will show up during the top view.

    Top view

    The name of devicea will show up during the top view.

  • Attack succeeds - A broadcast of the attack information will be shown if the attack succeeds.

    Attack succeeds

    A broadcast of the attack information will be shown if the attack succeeds.

  • Attack - he pirate ship fired a cannonball toward a building and stirs a wave.

    Attack

    he pirate ship fired a cannonball toward a building and stirs a wave.

Feedback

After the event, the feedbacks were overwhelming.

  • The role-play experience brings more fun for two sides during the competition.
  • The attack teams feel stronger feedback with the visible mark alongside the scoreboard.
  • The audience feels more engaged because of the way of the visual interpretation.

We had a lot of fun and learned a lot about information security competition during the process. This experience gives us more courage while facing challenge.