iPhone-Clay-White-Frontal-Free-Mockup copy copy

OVERVIEW

OVERVIEW

Alber's Principle is a color theory based on the idea that color can look different based on the context. The same color can look different or different colors can look the same, based on the colors that they are surrounded by. For this class project, our goal was to prove this principle using motion and/or interaction.

Timeline
Nov 2017 (3 weeks)

TIMELINE   Nov 2017 (3 weeks)

TIMELINE   Nov 2017 (3 weeks)

Class
Color and Composition (DES 210)

CLASS   Color and Composition (DES 210)

CLASS  Color and Composition (DES 210)

Individual Project

INDIVIDUAL PROJECT

INDIVIDUAL PROJECT

CHALLENGE

The goal of this project was to clearly prove Alber's Principle of color using motion and/or interaction. For this project to be successful, the "smoosh" – the point where two isolated colors touch and are revealed to be either the same or different – and the concept needed to feel naturally integrated with each other.

SOLUTION

My solution was an interactive prototype integrating the concept of camouflage into gameplay, where users help prey hide from predators by finding the landscapes that their colors match with. 

iPhone-Clay-White-Frontal-Free-Mockup copy copy

IDEATION

For this project, we were encouraged to learn a new design tool. I chose Principle, an interface animating tool. After looking into the abilities and limitations of Principle, I developed a concept of camouflaging an animal by changing the background behind it using sliders.

aa ideation 2
aa ideation 1

EARLY PROTOTYPE

After creating some visuals in Illustrator and watching just about every Principle tutorial on YouTube, I made my first prototype. The goal of this rough prototype was to test my concept of camouflage using color. 

Feedback and personal reflection helped me identify my next major improvement: giving a reason for the camouflaging that was occurring, in order to make the smoosh more integrated with the concept.

progress 1

ITERATION

My next prototype focused on better integrating the camouflage concept. I did this by changing the animals to be specifically of prey, and adding a title screen to prompt the user to "help" the prey. Incorrectly matching the color would prompt a predator to appear.

Based on my next round of feedback, my concept was effectively proving the principle, so I next worked on making the concept and user interaction more sophisticated.

progress 2

USABILITY TESTING

I tested my revised prototype with users to uncover usability problems. The main issue that I observed was that users, even after reading written instructions, were still unsure of the goal of the game and how to play it.

I remedied this in my final iteration by building in a mini-tutorial that actively engages the user in explaining the interface and the objective of the game. You can see this change in the final video below.

progress 3.4

FINAL DEVELOPMENT

FINAL PROTOTYPE

I created my interactive prototype using InVision for the first time. Check it out below!

Below you'll find screens of my work in Illustrator and Principle, as well as a video capturing the interactions of the Principle prototype.

FINAL PROTOTYPE

I created my interactive prototype using InVision for the first time. Check it out below!

final 3
final 1

REFLECTION

This project was valuable in helping me see how one can create an effective prototype in only a matter of weeks. Looking back on this project, I proved to myself that I can work effectively under design limitations and time constraints. 

If I were to continue developing Alber's Animals, here are changes I would pursue:

  • Futher fine-tuning usability and making gameplay as intuitive as possible
  • Making animations more dynamic and fun
  • Adding an educational element to strengthen the concept

Thanks for reading!