Loot Box Awareness

Role(s): Product Designer, Web Designer / Developer

Educating parents of young gamers about the dangers of illegal loot box gambling and next steps to fighting against gaming corporations taking advantage of their young audience.

Scroll Down

"PSA's should educate rather than shame or inflict fear. I want a PSA made for gamers, by gamers."

Situation

A reoccurring issue in the gaming community are gambling methods disguised as in-game lucky draws to prey on unsuspecting gamers of all ages, especially children. An announcement is needed to be made to educate children and their parents about loot box gambling and next steps to take action against illegal practices in the gaming industry.

Plans For This Project

  • Create a web page with graphics and information about loot box gambling and provide next steps to deal with loot box gambling
  • Create pamphlets to hand out door to door or at events such as conventions and public schools
  • Include loot box simulator of a popular game to debunk profitability claims from other gamers when reselling virtual items

First Attempt

  • Webpage has basic theme with black, white and corporate blue
  • infographic-like layout for the site to scroll down for more info

Flaws

  • Style does not send a message of urgency, doesn't attract audience
  • Information needs to be complete to visualize the final product
  • Clashing theme seems like an imported template
  • Needs some dynamics to move readers down the page

Second Attempt

  • Elements are made from geometric abstract shapes for depth
  • Elements lead viewer's eyes down
  • Information is formatted better with complete text

Flaws

  • Crosses border of being too much of an infographic than a website
  • Theme does not give vibes enticing to gamers
  • Graphic elements supporting facts are yet to be changed
  • Floating shapes are distracting to viewer when scrolling

Third Time's The Charm

  • - red: evil, energy, warning
    - blue: moral good, evolution, hope
    - white: light, importance, balance
    - black/dark: mystery, underground
  • Fog/grainy effect set the stage for the information displayed
  • Loot box illustrations with closed/open state and light flares

Theme of Our Cause

TOOLS: Adobe XD, Photoshop
SKILLS: Prototyping, Web Design

The website has been undergoing constant change during the project duration THREE times. The main cause for our transformation of themes is mainly the inability for the theme to convey the message of my cause. To accomplish this, I built all prototypes in Adobe XD.

Loot Box Simulator

The simulator borrows CS:GO's loot box mechanics to demonstrate the exact win rates for items of different rarity.

I was responsible for skinning, formatting and designing the UI of the game. With my game dev experience, I was able to edit sprites, redo the UI using Photoshop and Visual Studio Code. The game is easily integrated into the site because it's created in Javascript.

Building Site

TOOLS: Brackets, Visual Studio Code
SKILLS: HTML, CSS, Javascript, Sprite Animation, Testing

After deciding on a theme to commit, I got to work building and designing the site. With huge time constraints, there wasn't much time for making the site responsive on all browsers however the loot box simulator was ready to be integrated as a separate page on the main website.

Visit Website >

Pamphlet Design

TOOLS: Adobe Illustrator, InDesign, Photoshop
SKILLS: Printmaking, Graphic Design

Another way to communicate our message is through physical interaction and handing out pamphlets. I designed the information layout and graphics on both sides of the loot box-shaped brochure using Adobe InDesign and Illustrator. My other team member designed the shape and folding of the loot box pamphlet.

The printed prototype test print to demonstrate how folds and layout work
Photo credit: Roman Heit
Alternate poster was created with a PSA for posting inside a school building or even sharing on social media
"Unique design for the pamphlets ensure a higher success rate for distribution to reading ratio"

Illustrations and Design

TOOLS: Adobe Photoshop, Illustrator, SketchUp
SKILLS: Illustration, Icon Design, Graphic Design

Let's Talk!

Want to talk about a project?
Need a team member?
buuchau.chau@gmail.com

Website built and designed by Buu ⚡️