Crafting Jyte's Claim UI
JanRain was launching Jyte, a community game to build consensus or stir controversy around simple claims or statements of fact. ZURB designed and coded the front-end, including this example at the heart of the service: the Claim page.
Starting Point
This is the initial Claim interface ZURB inherited when we took on the project. While much of the core functionality was present, the page appeared disjointed, lacking hierarchy and focus.
For a community site dedicated to gauging user opinion, the most pressing problem was voting mechanisms and results that were hardly visible.
Note: Yes, that is a hand gun. A competition pistol to be exact. It just happened to be an attached image file on this post.
Wireframe Right Out of the Gate... Almost
Very quickly, we reached a consensus: go for a simple, blog-like layout with a strong Claim heading, big up/down vote buttons as the call-to-action, and a tug-of-war visual treatment showing the community's voting.
Interestingly enough, the final interface did not deviate much from this early, fundamental concept.
Details & Style
As part of our team put the finishing touches on Jyte's interface, the other part was designing the site's overall visual style. Here, we chose two functional palettes to visually represent the duel for attention: the green votes agreed with the claim while the red/blue voters disagreed.
We continued to experiment with the "tug-of-war" and "taking sides" elements in order to find a good balance.
Last Big Change
We decided to move the voting mechanism into the content area and above the fold. The Claim area was expanded in order to be able to include a clear heading, descriptive area, tagging, and secondary actions without cluttering the space.
The "taking sides" area was improved to include an extremely simple measure of system-wide user credibility—the purple dots of different sizes indicated a particular user's subject matter credibility in a way that was easy to recognize.
...and the Fat Lady Sang
In the final iterations, a site-wide color palette was settled upon that set "Agreed" votes in Kelly Green and "Disagreed" votes in Magenta. The voting button's visual style was finalized before we developed the JavaScript to make it work.
The interface saw the drastic simplification of the "tug-of-war" bar—matching the new button style—and a relocation of secondary Claim actions (like "Embed" or "Email to") right below the voting space. Both design moves reduced clutter around the page's core content and actions.
