Jyte.com's Claim UI

JanRain was launching jyte.com as a community game bent on building consensus or stirring controversy around simple claims or statements of fact. ZURB designed and coded the front end of jyte.com, including this example at the heart of the service, the Claim page.

Jyte's original claim page ZURB's first concept illustration for the Jyte claim page ZURB's first design mock of the claim page UI on Jyte.com ZURB's second pass at the design of the claim page UI on Jyte.com ZURB's final pass at the design of the claim page UI on Jyte.com

Starting Point

This is the Claim interface ZURB inherited when we began the project. A lot of the core functionality was present, but the page lacked hierarchy and focus. The act of voting and the results of community voting were too hidden.

Note: The hand gun just happened to be an attached image file on this post.

Wireframe right out of the gate... almost

Very quickly consensus emerged around a simple, blog-like layout with a strong Claim heading, big up/down vote calls to action, and a tug-of-war visual treatment to the community's voting. The final interface did not deviate much from this core early concept.

Details and Style

The jyte.com visual style was being co-designed as the finishing touches were put on the interface. Here two functional palettes dueled for attention—green for position, red/blue for negative.

The 'tug-of-war' and 'taking sides' elements were tweaked and experimented with to find a good balance.

Last big change

The voting mechanism was pulled up into the content block to be nearer the Claim and stay above the page fold. The Claim content was expanded on to include a clear heading, descriptive area, tagging and secondary actions.

The 'taking sides' area was improved to include an extremely simple measure of system-wide user credibility, namely the purple dots of different scales that accompany the user's who have voted. This was the best way to get across a user's credibility on the subject at hand in a quick, bulleted list form.

Mark it, done

In the final iterations a site-wide color palette was settled upon that pit 'yay' votes as kelly green and 'nay' votes as a magenta red. The voting button widget was finalized visually and then ZURB 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 relocation of Claim actions like the Embed tag and Email to a space below the voting. Both design moves reduced clutter around the page's core content and actions.

See the real deal in action at jyte.com.

Get in touch. Call 408 341-0600 or .

Suite 100-A, 55 North 3rd Street, Campbell, CA 95008 (Map)

© 2008 ZURB, Inc. All content and graphics on this site are proprietary to ZURB, inc (that means it's ours). These materials are protected by U.S. copyright and may not be copied or reproduced without the express written consent of ZURB, inc. (that means talk to us).