<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>James Kocsis [design + imaging] &#187; UI &amp; UX</title>
	<atom:link href="http://jameskocsis.com/portfolio09/archives/category/by-type/ui-ux/feed" rel="self" type="application/rss+xml" />
	<link>http://jameskocsis.com/portfolio09</link>
	<description></description>
	<lastBuildDate>Wed, 13 Apr 2011 18:33:16 +0000</lastBuildDate>
	
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Official MGM Website</title>
		<link>http://jameskocsis.com/portfolio09/archives/549</link>
		<comments>http://jameskocsis.com/portfolio09/archives/549#comments</comments>
		<pubDate>Wed, 13 Oct 2010 18:19:00 +0000</pubDate>
		<dc:creator>James</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[MGM]]></category>
		<category><![CDATA[UI & UX]]></category>

		<guid isPermaLink="false">http://jameskocsis.com/portfolio09/?p=549</guid>
		<description><![CDATA[
The MGM website was a true labor of love. After several years of honing our skill and feature sets on other MGM sites like Stargate, American Gladiators and MGM HD, it was finally time for the MGM dev team to dive into a complete overhaul of both the back-end and front-end of the legendary studio&#8217;s [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://jameskocsis.com/portfolio09/wp-content/uploads/2010/10/mgmcom-head.jpg" rel="shadowbox[post-549];player=img;"><img class="aligncenter size-full wp-image-550" title="MGM Header Image" src="http://jameskocsis.com/portfolio09/wp-content/uploads/2010/10/mgmcom-head.jpg" alt="MGM Header Image" width="950" height="335" /></a></p>
<p>The <a title="Official MGM website" href="http://www.mgm.com/" target="_blank">MGM website</a> was a true labor of love. After several years of honing our skill and feature sets on other MGM sites like Stargate, American Gladiators and MGM HD, it was finally time for the MGM dev team to dive into a complete overhaul of both the back-end and front-end of the legendary studio&#8217;s official website.</p>
<p>The main problem to be solved here was how to keep users on the site for as long as possible in order to connect with the deep library titles of MGM&#8217;s over 4100 movies. Thanks to our friends at Hulu, and the amazing dev team at MGM, we were able to come up with an incredibly compelling site with an infinite amount of info and media for visitors to soak in and enjoy.</p>
<p>A dedicated &#8220;<a title="MGM's Watch Now section" href="http://www.mgm.com/watchnow" target="_blank">Watch Now</a>&#8221; section allows users to watch close to 200 titles instantly, right on the site. This was accomplished with an integrated Hulu player and AJAX to allow users to browse, click and watch without having to reload the page.</p>
<p>The &#8220;<a title="MGM's Movies section" href="http://www.mgm.com/browse/movies/" target="_blank">Movies</a>&#8221; section features infinite scrolling that continuously loads more movies once the bottom of the page is reached. This allows the user to view all the movies on the site and click through to their title pages.</p>
<p>Title pages allow users to view stills, clips, synopsis, cast &amp; crew lists and awards for each title. Buying and viewing options are also available whether it&#8217;s on DVD, Blu-Ray, digital download or free-on-demand, such as Hulu or YouTube (both which play directly on the title page). Users can also share the title on their Facebook profile.</p>
<p><strong>With all this in mind, I invite you to go get lost in the movies. </strong><a title="Official MGM website" href="http://www.mgm.com/" target="_blank"><strong>Go have fun at the new MGM.com</strong></a><strong>!</strong></p>
]]></content:encoded>
			<wfw:commentRss>http://jameskocsis.com/portfolio09/archives/549/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>MGM iPhone Soundboard Apps</title>
		<link>http://jameskocsis.com/portfolio09/archives/280</link>
		<comments>http://jameskocsis.com/portfolio09/archives/280#comments</comments>
		<pubDate>Sat, 14 Nov 2009 22:39:58 +0000</pubDate>
		<dc:creator>James</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[MGM]]></category>
		<category><![CDATA[Retouching]]></category>
		<category><![CDATA[UI & UX]]></category>

		<guid isPermaLink="false">http://jameskocsis.com/portfolio09/?p=280</guid>
		<description><![CDATA[
This project landed in my lap by accident. Well, that&#8217;s not 100% true. I made it land there&#8230;
When asked to create the landing page for our new iPhone apps, we were given screenshots of the apps that were in development at the time. Being the design snob that I am, I was taken aback by [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: left;"><img class="aligncenter size-full wp-image-301" title="MGM iPhone Soundboard Apps" src="http://jameskocsis.com/portfolio09/wp-content/uploads/2009/11/iphone-main.jpg" alt="MGM iPhone Soundboard Apps" width="950" height="350" /><br />
This project landed in my lap by accident. Well, that&#8217;s not 100% true. I made it land there&#8230;</p>
<p style="text-align: left;">When asked to create the landing page for our new iPhone apps, we were given screenshots of the apps that were in development at the time. Being the design snob that I am, I was taken aback by their seemingly arbitrary and non-standard construction. Not to mention its overall sloppiness (hard to read colored text, stretched or squashed button labels, poorly resized and uncorrected imagery, etc.).</p>
<p style="text-align: left;">I just needed to make a stink about it, but instead of just complaining about the design, I ended up taking on the job myself over the weekends and evenings that followed.</p>
<p style="text-align: left;">The options and soundboard screen&#8217;s orientation were turned to portrait view for better one-handed usability and to avoid the iPhone&#8217;s speaker from being covered by the user&#8217;s hand during playback of the sound. Overall design was completely re-thoughtout for a more standard experience. The images for the slideshows were retouched for best possible color representation, taking into consideration the age of the assets.</p>
<p style="text-align: left;">
<p style="text-align: left;">Once the app was redesigned it was a matter of creating assets for the 5 features that were getting companion apps: Rocky, Fargo, Robocop, Silence of the Lambs and Army of Darkness. Included in those assets were the icons that appear in the app. Those I took creative license, creating Ash&#8217;s chainsaw from Army, Hannibal&#8217;s mask from Lambs, Rocky&#8217;s hero pose, Robocop&#8217;s mechanical head, and of course, the woodchipper from Fargo:</p>
<p><a href="http://www.jameskocsis.com/portfolio09/images/iphone-icons.jpg" rel="shadowbox[post-280];player=img;"><img class="size-full wp-image-290  aligncenter" title="iPhone icons" src="http://jameskocsis.com/portfolio09/wp-content/uploads/2009/11/iphone-icons-inline_03.gif" alt="iphone-icons-inline_03" width="421" height="121" /></a></p>
<p style="text-align: left;">The apps went on to be downloaded more than 100,000 within a relatively short period of time, and are still going strong. So far, the most popular app has been the Army of Darkness, based on the last of the Evil Dead trilogy films. It&#8217;s such a classic flick with some great quotes.</p>
<p style="text-align: left;"><strong>Check out the apps in iTunes:</strong> <a title="Army of Darkness on iTunes" href="http://itunes.apple.com/us/app/army-darkness-soundboard/id327968018?mt=8" target="_blank">Army</a>, <a title="Rocky on iTunes" href="http://itunes.apple.com/us/app/rocky-soundboard/id326490275?mt=8" target="_blank">Rocky</a>, <a title="Silence of the Lambs on iTunes" href="http://itunes.apple.com/us/app/silence-lambs-soundboard/id327977032?mt=8" target="_blank">Lambs</a>, <a title="Fargo on iTunes" href="http://itunes.apple.com/us/app/fargo-soundboard/id326492358?mt=8" target="_blank">Fargo</a>, <a title="Robocop on iTunes" href="http://itunes.apple.com/us/app/robocop-soundboard/id326491255?mt=8" target="_blank">Robocop</a></p>
<p style="text-align: left;">Below are before and after shots of the original app design, the icons, and samples of the finished app.</p>
<p style="text-align: left;"><img title="gallery link=&quot;file&quot;" src="http://jameskocsis.com/portfolio09/wp-includes/js/tinymce/plugins/wpgallery/img/t.gif" alt="" />
<a href='http://jameskocsis.com/portfolio09/wp-content/uploads/2009/11/iphone-soundboard-b4after.jpg' rel='shadowbox[album-280];player=img;' title='Soundboard redesigned'><img width="200" height="200" src="http://jameskocsis.com/portfolio09/wp-content/uploads/2009/11/iphone-soundboard-b4after-200x200.jpg" class="attachment-thumbnail" alt="" title="Soundboard redesigned" /></a>
<a href='http://jameskocsis.com/portfolio09/wp-content/uploads/2009/11/iphone-settings-b4after.jpg' rel='shadowbox[album-280];player=img;' title='Settings redesigned'><img width="200" height="200" src="http://jameskocsis.com/portfolio09/wp-content/uploads/2009/11/iphone-settings-b4after-200x200.jpg" class="attachment-thumbnail" alt="" title="Settings redesigned" /></a>
<a href='http://jameskocsis.com/portfolio09/wp-content/uploads/2009/11/iphone-stills-b4after.jpg' rel='shadowbox[album-280];player=img;' title='Stills color corrected'><img width="200" height="200" src="http://jameskocsis.com/portfolio09/wp-content/uploads/2009/11/iphone-stills-b4after-200x200.jpg" class="attachment-thumbnail" alt="" title="Stills color corrected" /></a>
<a href='http://jameskocsis.com/portfolio09/wp-content/uploads/2009/11/iPhone-mgm.jpg' rel='shadowbox[album-280];player=img;' title='MGM Splash screen'><img width="200" height="200" src="http://jameskocsis.com/portfolio09/wp-content/uploads/2009/11/iPhone-mgm-200x200.jpg" class="attachment-thumbnail" alt="" title="MGM Splash screen" /></a>
<a href='http://jameskocsis.com/portfolio09/wp-content/uploads/2009/11/iphone-robo.jpg' rel='shadowbox[album-280];player=img;' title='Robocop Soundboard'><img width="200" height="200" src="http://jameskocsis.com/portfolio09/wp-content/uploads/2009/11/iphone-robo-200x200.jpg" class="attachment-thumbnail" alt="" title="Robocop Soundboard" /></a>
<a href='http://jameskocsis.com/portfolio09/wp-content/uploads/2009/11/iphone-fargo.jpg' rel='shadowbox[album-280];player=img;' title='Fargo Soundboard'><img width="200" height="200" src="http://jameskocsis.com/portfolio09/wp-content/uploads/2009/11/iphone-fargo-200x200.jpg" class="attachment-thumbnail" alt="" title="Fargo Soundboard" /></a>
<a href='http://jameskocsis.com/portfolio09/wp-content/uploads/2009/11/iphone-rocky.jpg' rel='shadowbox[album-280];player=img;' title='Rocky Slideshow'><img width="200" height="200" src="http://jameskocsis.com/portfolio09/wp-content/uploads/2009/11/iphone-rocky-200x200.jpg" class="attachment-thumbnail" alt="" title="Rocky Slideshow" /></a>
<a href='http://jameskocsis.com/portfolio09/wp-content/uploads/2009/11/iphone-options.jpg' rel='shadowbox[album-280];player=img;' title='Options screen'><img width="200" height="200" src="http://jameskocsis.com/portfolio09/wp-content/uploads/2009/11/iphone-options-200x200.jpg" class="attachment-thumbnail" alt="" title="Options screen" /></a>
<a href='http://jameskocsis.com/portfolio09/wp-content/uploads/2009/11/iphone-icons-inline_03.gif' rel='shadowbox[album-280];player=img;' title='In-app icons'><img width="200" height="121" src="http://jameskocsis.com/portfolio09/wp-content/uploads/2009/11/iphone-icons-inline_03-200x121.gif" class="attachment-thumbnail" alt="" title="In-app icons" /></a>
<a href='http://jameskocsis.com/portfolio09/wp-content/uploads/2009/11/iphone-main.jpg' rel='shadowbox[album-280];player=img;' title='MGM iPhone Soundboard Apps'><img width="200" height="200" src="http://jameskocsis.com/portfolio09/wp-content/uploads/2009/11/iphone-main-200x200.jpg" class="attachment-thumbnail" alt="" title="MGM iPhone Soundboard Apps" /></a>
</p>
]]></content:encoded>
			<wfw:commentRss>http://jameskocsis.com/portfolio09/archives/280/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Official Stargate Website</title>
		<link>http://jameskocsis.com/portfolio09/archives/244</link>
		<comments>http://jameskocsis.com/portfolio09/archives/244#comments</comments>
		<pubDate>Fri, 06 Nov 2009 17:45:04 +0000</pubDate>
		<dc:creator>James</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[MGM]]></category>
		<category><![CDATA[UI & UX]]></category>

		<guid isPermaLink="false">http://jameskocsis.com/portfolio09/?p=244</guid>
		<description><![CDATA[
The Stargate site was the first project I worked on when I was hired at MGM. But that was the version before this one.
For the revision of the site the project was outsourced to a vendor who, fortunately for us, was unable to complete the task. This gave the MGM web team a great chance [...]]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter size-full wp-image-246" title="Official Stargate Website" src="http://jameskocsis.com/portfolio09/wp-content/uploads/2009/10/sg-site-main1.jpg" alt="Official Stargate Website" width="950" height="335" /></p>
<p>The Stargate site was the first project I worked on when I was hired at MGM. But that was the version before this one.</p>
<p>For the revision of the site the project was outsourced to a vendor who, fortunately for us, was unable to complete the task. This gave the MGM web team a great chance to do some spectacular work. Since design direction was already set, the task of thinking out the rest of the UI and UX was left up to me and the team.</p>
<p>In addition there was a new series that was going to start airing. This meant that the site was going to play an important role in supporting the series.</p>
<p>Besides design, I was also responsible for user experience design and functionality, media player functionality and video content graphics and style. Among about a million other things.</p>
<p style="text-align: center;">Enough of my yappin&#8217;. Boogie on over to the site and have fun:<br />
<a title="Stargate: The official MGM site" href="http://stargate.mgm.com/" target="_blank"><strong>OFFICIAL STARGATE WEBSITE</strong></a></p>
<p style="text-align: center;">
]]></content:encoded>
			<wfw:commentRss>http://jameskocsis.com/portfolio09/archives/244/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

