DESIGN

The Pinball Arcade – Interface Redesign (GUI, UI, UX Design)

The Pinball Arcade is the most realistic pinball simulator available. It features faithful recreations of classic pinball machines and has millions of users across PC, Mac, Playstation, Xbox and various other platforms. A lot of time and money is spent getting each pinball table as accurate and realistic as possible. However, the user experience and menu design has not received the same attention. The game’s users have been complaining about the interface for years; the topic comes up in countless forum threads and someone even made a 20 minute video explaining all the ways the interface is poorly designed. As a fan of The Pinball Arcade, I created a design mockup of how I would like the interface (aka GUI, UI, UX)  to function. The video above demonstrates my design concept for the PC version (full screen at 1080p). 

Goals

Instead of simply focusing on their top score, The Pinball Arcade platform sets certain goals for players to achieve for each table. In the current interface, the progress of these goals is hidden until you go to each table’s detail page. I thought it would be better to not only prominently display these achievements in the detail section for each individual table, but also on each table icon itself. 

Table icons reflect goal progress without cluttering the visual space

A small bar at the bottom of each table icon displays the player’s progression through these goals. A white line represents the standard goals and a red line represents the wizard goals (which are only unlockable once the standard goals are met). Now, the tables menu serves as a showcase for the user’s acheivements, as well as a reminder for which goals remain incomplete. The line displays this information without distracting or cluttering the menu. However these progress line/bars can be disabled in the preferences if the user chooses. 

Friends

Currently in The Pinball Arcade, there doesn’t seem to be an easy way to compare scores with friends. This is surprising for an arcade platform centered around high scores and competition.  My friend an I actually have a shared dropbox folder where we screenshot our scores for the different tables and compare scores by comparing images; it’s a workaround for something that should be a focal point of the platform. 

It’s easy to compare scores with friends

In my design, each table has an easily accessible friend ranking as well as online and you can access it without having to leave the table menu to a separate screen. I imagine a more in depth page could be made that specifically highlights different stats between you and your friends, but I did not design that page. 

See what friends are online

In the bottom left of the screen, your currently online friends (and recently active friends) are displayed, along with what game they are currently playing. I would like to be able to click on an online friend and challenge them to their current table or one of my choosing. They could accept this challenge and we would take turns and see each other play, just like 2-player mode on a real pinball machine. 

Music

I also created custom music for the interface, to be used as the default Pinball Arcade music before the user has chosen a table. The music in the current Pinball Arcade software is the song “Pinball Wizard” by The Who. While the song lyrics are clearly relevant, the bright strumming of an acoustic guitar always felt out of place with the 80s/90s arcade games seen on screen. I met them halfway by creating an 80s retro synthesizer version of the song which I feel makes a better fit in the arcade atmosphere. You can hear my music as the default theme at the start of the video. 

Updating the Design

The current interface is clunky, hard to read and doesn’t present much information

My main goal with this project was to create a more engaging and intuitive interface. I wanted everything important laid out and easy to see, without the need to click onto different pages. I wanted to provide the user with a lot of information, but still keep the layout simple. I made some simple changes such as using an “unlocked” icon, on the free-to-play table of the month, instead of the actual words “table of the month” as they currently use. The table icons are now legible, but still convey the theme of the table by using an image from the backglass. There are still things I would change and add to, but overall I think this would be a big improvement for the software.

Disclaimer: I am not affiliated with Farsight or The Pinball Arcade software. This is a fan-made design project.
Posted in DESIGN | Leave a comment

Watch Vector and Editorial Layout

Several years ago I painstakingly recreated a wrist watch in vector using Adobe Illustrator and created these editorial fake magazine layouts.

Posted in DESIGN | 1 Comment

Modern Geometric Christmas Designs

These are some modern graphic designs with a Christmas theme. I made them in 2013, but never got around to posting them.

Posted in DESIGN | Tagged , , , , | Leave a comment

Vector Ray Gun

yellow-raygun_web800

A ray-gun I created in Adobe Illustrator using vector shapes and gradients. It is based on a photo of a toy from the 1950s/60s. I made this in 2012.

 

Posted in ART, DESIGN | Leave a comment

Steampunk Lottery Jackpot

meter-concept_nologo_800The lottery had our ad agency come up with ideas for a new way of presenting jackpot amounts. They wanted a quirky machine, so I created this steampunk machine. However, they ended up not going with a new look afterall. The machine would have shook, flickered and generated some steam while spinning up the numbers. The particular lottery game logo would go right above the jackpot number.

This was done in Photoshop/Illustrator

Posted in DESIGN | Tagged , , , | Leave a comment

Ms. Pinky Vinyl

I did some branding design for a company called Ms. Pinky. The vinyl records are bright pink and use “time-code” to control computer software. Their old branding was on the right track with having a retro feel, but I felt needed some cleaner design. I created a logo and two options for the vinyl label design. My new branding is not currently being used, but may be used in the future.

Visit them at mspinky.com.

msPinky_layout-web_2000px

Posted in LOGOS | Tagged , , , , , , , , , , , , , , | Leave a comment

Personal Growth Movie Poster

personal_growth-web800

 

This is a movie poster I made for a friend’s independant film about man waking up with a creature growing from his arm. It was titled “Personal Growth.” I don’t believe the film was ever finished.

Pen and ink drawing, scanned and cleaned up. The lettering and splatters were done with india ink and paintbrush.

Posted in ILLUSTRATION, POSTERS | Tagged , , , , , , , , | Leave a comment

Outpost Gala Website

out-gala-mockup04-1000pxThis is the website I designed for a local non-profit music organization called Outpost. This was a mini-site for a fundraising event they held. The “GALA” logo itself was inspired by quirky mid-century jazz record covers.

Here are a few early drafts of the site’s design:   1,   2,   3

Posted in DESIGN, WEB | Tagged , , , , , , | Leave a comment

Maniac Cop

hero_stamp-vector_web600_wm copy

A poster I made for the 1988 cult classic, Maniac Cop. It’s a mockup I did for a design project a few years ago in which I tried to emulate the look of designer Shepard Fairey. Fairey himself emulates the style of vintage design and adds a crisp and bold modern feel. I too, love the geometrically balanced appear of vintage design elements and it was a fun project to work on.

Posted in POSTERS | Tagged , , , , , , , , , , | Leave a comment

Christmas Dog Videos / Microsite

I was in charge of making a holiday video for our office (Christmas 2013). The video features all of the office workers’ dogs singing deck the halls. I personally did all of the audio, editing, post-production and most of the filming.

In addition I designed a small web page for the project which we distributed via email blast. I ended up having some fun editing and came up with two bonus videos, which were essentially credits and bloopers.

 

Main Christmas Video

 70s Style Credits

Bloopers

 

Mini-Site

k2md_holidayweb-site-960

Click here to visit the mini-site. Make sure to mouse over the tiny dog icon!

Posted in FILM, WEB | Tagged , , , , , , , , , , , | Leave a comment