CONCEPT: GLU MOBILE - KATY PERRY GAME
I was asked to design the look and feel for the UI of the next up and coming Katy Perry game which is a shoot off of Kim Kardashians Hollywood. The focus was on the Katy Perry colors and style that would appeal to teenage girls. I designed the icons to reflect this as well as the over all look and feel. The colors are very girly and fun and the icons are very playful. This was a very fun project to do.
PROJECT: PREE ITThis is a fun question/trivia game I designed the UI for. The focus was on social interactions a simple question and answer dynamic. Not only did I design the UI, but I came up with feature ideas such as emoji's, multi-player aspects, sharing an follow functions off the player profile card as well as dynamic photos for categories. There are two UI versions of this app here, the darker second versions is my personal favorite.
PROJECT: Zynga Poker FacebookDuring most of my time at Zynga I was developing the UI for their flag ship title at the time Zynga Poker. The UI was constantly changing and there was so much information to communicate beyond just simple game play elements. there were ranking systems, gift systems and various other promotional and meta game functions that had to be cleanly and easily accessed here. A challenge indeed but a fun one!
PROJECT: Farmville UII did a fair number of UI screens during my time at Zynga. It was a fun challenge to come up with simple solutions to a game that had so many features. It was a challenge to make sure things flowed simply and provided the least amount of friction to the user.
PROJECT: Zynga Poker MobileThis was version 1 of Zynga Poker Mobile. It has since changed but I really liked its orginal design. It featured a simple design that was clean and uncluttered. It was very easy to see the phases of the game in the UI in this version and kept only elements the user needed on screen when they needed them.
PROJECT: TINY REALMS - REALM HUDWhile doing art direction for Tiny Realms I also had the opportunity to draw upon my experience as a UI/UX designer. I conceptualized this layout and created basic wire frames. These wire frames are not meant to have any design in them other than the general location of the elements we felt were the most critical to game play. After those were done I moved on to designing the art style which had many iterations. I eventually settled on an ancient rock/stone feel.
PROJECT: TINY REALMS - BATTLEVIEWThis show's some of the process of developing the battle hud interface and user experience for Tiny Realms. We needed a way to display troops in a non intrusive way. So I developed a dashboard that you could hide if the user preferred to directly select the units on screen. Because of the tight deadlines we were making changes on the living UI which is why you'll notice differences in the skinned version. This was a really fun UX to develop because of the multiple fun and interesting ways users could interact with there own troops. I came up with a really interesting solution that the players really enjoy.
PROJECT: TINY REALMS - VARIOUS UI/UX ELEMENTSBelow are various UX and UI screens I designed and or art directed. The style had already been determined for most of these so I started doing the 'wireframes' with the actual UI elements.
PROJECT: ZYNGA - SCRAMBLE UI
This was a total re-skin and reorganization of Zynga's popular word game Scramble. There was a lot of information to convey, so keeping it clean was a challenge. I wanted to take the opportunity to re-brand all of Zynga's word games as they didn't really have a synergy. I also wanted to create a tactile experience for the user (that would carry through to mobile) by changing the play pieces into bubbles that were compelling to touch and addictive to swipe, similar to popping bubble wrap. As you'd select a string of letters to form a word the bubbles would jiggle, when the word was formed they'd all pop. There's a chat in the center, player panels to the right and all of the relevant game info on the left. This version never made it live which is a shame, but it did make it to mobile. This game was then re-branded under the Words with Friends franchise so they adapted the bubbles into squares.
PROJECT: ZYNGA - WORD TWIST
Here is another one of Zynga's popular word games Word Twist. Here I carried over the style from the Scramble look and feel to create a synergy and brand between all of Zynga's word games. I integrated the idea of the bubbles as well for brand purposes. In this version they'd pop individually as I wanted to see the effect of that. This show's the winning screen along with the blank player chiclets as they had not been designed yet with the relevant info. There is also a winning animation I did which you can see here:See animation here!
PROJECT: ZYNGA - SCRAMBLE MOBILE UI
This was the first version of Zynga's Scamble on mobile. It pulled elements from the new updated UI to create a synergy accross all of Zynga's word games. This was a hybrid of an older UI and the new UI. The bubbles pulled and popped as you selected them. One of the things I really wanted to create was the sense of popping bubble wrap. So the experience of selecting a string of letters was extremely satisfying to do. Half the time when I played the game I was just popping letters, it was that fun.
PROJECT: ZYNGA BRAND
This was one of my first projects at Zynga where I branded the company starting with the Zynga logo. I never would have thought at that time it would become so iconic.
PROJECT: KIXEYE - MAIN RIBBON MENUThe challenge here was to design a fly out menu with many functions. We needed to feature the games and prompt users to play or install. Advertising games and their assets was a secondary requirement as well as making the ribbon dynamic and social. In the end we went with the mega menu design. All of these I was really happy with. I also designed the elements in the thin top bar. You'll see them vary with each iteration.
PROJECT: KIXEYE - SOCIAL FEED
This project was to design a social feed that you could expand and collapse on KIXEYE's web portal. Through this feed you'd have access to in game emails and messages as well as get notifications for game events and social interactions on various elements through out the KIXEYE social framework. In each feed item there had to be access to a complex series of social functions. So in the end I wanted to generate the menu based on the action event. You could do inline quick chat messages and access games directly through the feed. There was also a full chat panel (code preexisting) integrated through the tabbing system as well as a friends list. As with the ribbons, I also designed the thin top bar at the top (while keeping the preexisting tabs).
PROJECT: KIXEYE - PROFILE PAGE
This is a wire frame for the redesign of a profile page for KIXEYE's web portal site. The look and feel had already been predefined so I had to adapt to match the style. With this page I was trying to add much more depth for the user. In addition to the preexisting wall other users could post on a dynamic activity feed that was added. There were prompts to invite and add friends to grow the social aspect of the site we were trying to build on. There are also widgets for quick access to games and game stats which are also dynamically generated. Friends lists, editable backgrounds and profile images were also a feature here.
PROJECT: TRIBES.NET - SEARCH LANDING PAGESThis was a design job I did just before I got hired on at Zynga. They wanted to design landing page templates for various subjects for the tribe's community. Tribes.net is a social site with a focus on the Burning Man culture. The first row are a Beauty and Make up series, the second row is an Astrology series and the third are various other iterations on the same idea. It was fun to design clean and modern designs with vibrant engaging photos and colors.
PROJECT: OMSG - MAIN HUD WIREFRAME
I took on a contract to do some user experience work for One More Story Games. They had already developed most of the functionality and done a 'programmers interface' that basically had every piece of information on one page. I felt it needed to feel more like a game. I wanted to only present information that was relevant to the player when necessary and condense complex functions down into fly out menus. The over all goal was to create a wire frame for a HUD layout that was neat and clean.
PROJECT: OMSG - LOBBY
This is another wire frame that was for the lobby. Again, it was a page with everything on it and highly dis-organized. I continued to simplify and clean up the HUD so information was easy to access and didn't overwhelm the user. Rather than making the store the main page, I made a lobby out of it making it a jumping off point into multiple aspects of the game such as the store, purchased stories, detectives, news and a chat system. I made all the meta functions like account settings, logging in and out all up in the top bar so it was continuously accessible. We had yet to design how you entered the game here because there were multiple avenues that were being debated.
PROJECT: OMSG - MAP WIREFRAME
This is a simple wire frame of the map in the game. This uses google maps and places pins on the map which refer to points in the story. Essentially what the game does is segment a story and reveals pieces of it to the user as you progress through talking to characters and moving through out the environment.
PROJECT: OMSG - CHARACTER CREATION
This was a complicated task to try and refine the character creation process for the game. I took a flow of about 15 pages and steps and simplified it into a simple 6 step flow that logically flowed from one step to the next. The process starts with the fun elements of choosing a look for your character, then things like professions and cosmetics. This slowly eases the player into the more complicated part of the process which is choosing attribute levels, skills, flaws and perks etc. This is a good example of boiling a concept down to it's core and presenting it to the user in a clean and efficient way.