So I had a couple good critiques concerning my first design attempt for the visualization, so I went back in and revised. The major points that I needed to work on were as follows:
1. Is missing a certain “elegance” from the design-style that the site already has.
2. Needs an explanation of how it works in the beginning.
3. Green color looks ugly in the middle of all the other colors.
4. Make orange section green.
The opening text explaining how it works.
New center graph.
Learn More section w/ new layout
New bottom tabs!
It’s coming to the end of the quarter and we needed to come up with an easy solution for the visualization. It needs to be simple, easy to understand, and able to hold a lot of information. The simplicity is key because our developer does not have a lot of time to finish and if there is an easy solution that could be used for all of the questions – that would be our best bet. Here is my stab at it before I pass it off to Lindsay:
The overall follow vs. break design rules is the first thing you see.
When you rollover 1 of the rectangle graphs it breaks apart and tells you what it is.
When you click that graph it gives you more information and the exact breakdown.
If you quickly want to see what the majority likes, you can rollover the preferred option across the bottom.
The “Design Profile” questions will be grouped into categories of: Layout, Characters, Gestalt Principles, Color Theory, & Simplicity. All of these categories include 1-5 questions, after the user has gone through each category we will be showing an overall pie chart that reflects the majorities (”the masses”) opinions on the category in general. This is what one of the charts might look like:
When the user clicks on the target audience icon they will be brought to this page. The user (most likely a designer or developer) will be able to choose age ranges, what state their target user might be from, their gender, and also how wealthy they are. With the age range, the user would not only be able to slide the slider within the ranges, but also drag each end of the slider so that they could have a user from age 5-20 for example, that way if they are sort of unsure of their target age, they can estimate and not be so exact.
So users know what each of the icons mean, incase they do not understand, we decided to have a different sort of “tool tip” but decided to have the logo move over and it reveals what that icon means, along with a little bit more. This gives the user a good idea about what they are about to click on.
Here are some normal, over, and down states (over would be after it animates over possibly) so it would flip over to be green. Then u when u click it would press down.
Here our our final questions for the Gestalt Principles:
closure
continuation
parallelism & symmetry **don't look!**
proximity
Our comps for the typography questions:
widows
motel
figures
serifs
bastardization - by far my favorite to make!!
Now that you’ve seen where they’ve come from, here are our final designs:
Lindsay made sweet icons in 3D that I later animated.
On rollover, the box would become green & the icon would animate.
We tried a bunch of arrangments for the pull-out icons.
This is the one we decided on. 
