Interaction Design: Elemental Uno

Video showing gameplay of Elemental Uno card game

The Process

Problem & Goal Statement

The problem is that digital Uno card games don't have a card description built into the game, so users with blindness/low-vision are not able to identify the cards and play correctly. The goal is to create an accessible Uno game (with my own design theme) where descriptions of each card are built into the game.

Style/Theme

4 Elements/Colors:

Earth = Green
Air = Yellow
Fire = Red
Water = Blue

4 Elemental Symbols:

Earth = Mountain
Air = Cloud
Fire = Flame
Water = Ocean Wave

Elemental Uno Style/Theme

Initial Sketches

Initial sketches of different card types

Graphic Treatment/Style Guide

Graphic treatment/style guide showing colors, typography, and texture

Card Design: Draft 1

Draft 1 of card designs

Feedback:

Increase color contrast.
Make element styles more cohesive.

Card Design: Draft 2

Draft 2 of card designs

Feedback:

Make color of +4 and wild cards darker.
Allow for more margin space in the wild card with the 4-colored oval.
Skip Earth card: Make mountain peaks form an X (zoomed in).
For +2 and +4: Make the element circles smaller to allow margins to be in the mini cards.
Remove info icon in the card design themselves (that is a UI function).

Card Design: Final Draft

Final draft of card designs

Initial Wireframes: Draft 1

Initial gameplay wireframes

Feedback:

Add color to background.
Add accessibility component of card description.
Add game rules.
Add rule indicators during gameplay for better UX.

Wireframes: Draft 2

Draft 2 of gameplay wireframes

Feedback:

Change background.
Add game rules.

Final Interactive Prototype

Final wireframes with interaction arrows and flows