UI & UX

Official MGM Website

MGM Header Image

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’s official website.

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’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.

A dedicated “Watch Now” 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.

The “Movies” 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.

Title pages allow users to view stills, clips, synopsis, cast & crew lists and awards for each title. Buying and viewing options are also available whether it’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.

With all this in mind, I invite you to go get lost in the movies. Go have fun at the new MGM.com!

MGM iPhone Soundboard Apps

MGM iPhone Soundboard Apps
This project landed in my lap by accident. Well, that’s not 100% true. I made it land there…

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.).

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.

The options and soundboard screen’s orientation were turned to portrait view for better one-handed usability and to avoid the iPhone’s speaker from being covered by the user’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.

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’s chainsaw from Army, Hannibal’s mask from Lambs, Rocky’s hero pose, Robocop’s mechanical head, and of course, the woodchipper from Fargo:

iphone-icons-inline_03

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’s such a classic flick with some great quotes.

Check out the apps in iTunes: Army, Rocky, Lambs, Fargo, Robocop

Below are before and after shots of the original app design, the icons, and samples of the finished app.

Official Stargate Website

Official Stargate Website

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 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.

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.

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.

Enough of my yappin’. Boogie on over to the site and have fun:
OFFICIAL STARGATE WEBSITE