I worked on UI and UX for the hit mobile game DragonVale for four years as Lead UI Artist, and also had the honor of serving as Principal Artist halfway through the development of DragonVale Pop, a physics-based 3D Bubble Shooter game created in Unity and available on Android. My career at Backflip Studios involved convincing people my ideas were worth doing, executing on said ideas, evaluating outcomes through play testing and data, and iterating as needed.

Re-designing DragonVale’s UI

Style exploration on different assets. I wanted to define a more modern and readable style.

Redesigning the entirety of DragonVale’s UI was my proudest accomplishment in the four year tenure I had on the project as Lead UI Designer. I needed to:

  • convince stakeholders that re-designing the game’s interface was worth it
  • explore several alternative styles and get buy in from the Game Director and studio Art Director
  • delegate work to other UI Designers
  • update hundreds of assets
  • keep it as low tech as possible
  • test internal reactions by holding team playtests
  • manage player expectations and post-release communications

UX Improvements on DragonVale

I convinced stakeholders to improve our user experience, using wireframes, mockups, and interactive prototypes.

Wireframes

Mockups

Whiteboard scribbles: I met with a game designer to hash out the features we wanted to see in Move/Decorate mode.

Grayboxes of Move/Decorate mode, informed by the whiteboard sketches above. This included features like filtering by item type (such as paths, pedestals, plants) and elemental type, stowing everything on the island, adding more storage space, and a draft mode where you could save or revert progress.

Simplified Move Mode: ultimately, the decoration portion of move mode proved to be too scope intensive, so we simplified the spec. I proposed a small, but significant, change to move mode that allows the user to tap and hold any object to activate its ability to be relocated. This cut down number of taps required in half to access this feature, making re-decorating one’s park significantly easier.

Animatics: after purchasing a mystery egg, we reward the user with a shiny screen that celebrates what they got.

I proposed we add a search bar to the marketplace, as there could be hundreds of entries at any given time, and it could become quite difficult to find specific items. This mock up shows how entries would be sorted as the user begins searching.

Branding & Graphical / UI Assets

Some of my favorite art assets from DragonVale below, created as vectors in Photoshop.

Paradise themed header.

Easter themed header, featuring a magical egg hunt.

Mockup of dragon info screen with updated UI elements.

Halloween themed “Name that Dragon” mini game: I ran an optimization pass on the graphics to drastically reduce their size. I removed several gradients that were adding unnecessary megabytes to the images.

DragonVale Pop art below:

dvp_bubbles-logo

Logo, icon, and bubble assets. I wanted to create an approachable logo and icon that married familiar DragonVale themes with new elements that evoke magic, fun and bubble-shooter gameplay. Accessibility is key: we realized the bubble assets needed different, distinguishable colors and interior patterns that would allow the color vision impaired to play the game. The pin needed to work as an overlay on every bubble color.

dvp_menu-illustration

A few of my favorite spot illustrations I created to add more visual interest and personality to the minimalist menus. I picked up a mostly-finished UI kit from the talented UI Artist Brandon Tyson, and found myself wanting to add more flavor to it, while building on the work done ahead of me. I focused on highlighting the cuteness of the dragons. To save time, I began with a 3D render from 3DS Max and painted over it heavily in Photoshop.

Habitats, 3D environments, world building, texturing

dvpop_earth_level

After I was made the only artist on DragonVale pop, I put together the Earth habitat as my first foray into dealing with the 3D elements in Unity. I set up this scene using assets Don Creger originally modeled, and then re-textured and lit the environment. I was heavily inspired by the arches in Moab, UT.  The Earth Dragon model was created by Brent Crockett.

dvpop_earth_level_gameplay

Earth habitat with all its UI and foreground elements. I’m prototyping a gameplay idea (color changing bubbles).

Sample gameplay footage – framerate may be a little choppy. I implemented the win animations by Cliff Ward. The 3D character models are by Brent Crockett. Note that some of the UI elements ended up changing in development (eggs are now stars)

Fire habitat environment concept

dvp_habitat_fire_bg

Background concept in Photoshop. My objective was to create an environment that paid homage to the original DragonVale fire habitat, while translating well into 3D, without distracting from gameplay and UI elements. I was moved onto DragonVale before completing this level in 3D.
dvp_habitat_fire_mock

Mockup with all UI elements. Brent Crockett created the 3D fire dragon that I’m using here for mockup purposes. Note that those are the old “pinned” bubbles, and we later shifted to an actual pin for better readability.

Interaction Design

Early storyboards of the end sequence in Win or Loss conditions. You can see how much the game evolved visually!
I created several pre-vis mock ups like these to prove out features and flows before they were implemented.

My role on DragonVale Pop

I worked closely with Kevin Depue (Principal Engineer and Designer) to ship our Android build. I came to the project midway through its development and took on responsibilities that were formerly filled by Brandon Tyson (UI, built the initial kit), Brandon Morris (Lead Artist, responsible for directing the first half of the project and creating all the particles), Jim Stigall (Concept Artist, mocked up the initial Plant Habitat other formative bits of the project) and Don Creger (Environment Artist, built the first Plant Habitat [not pictured]) as they moved onto other projects in the studio. The core team became quite lean, with just me and Kevin hacking away together in the final four months — I had to be resourceful with borrowing and modifying assets from other team members because there was less I could realistically do on my own during that time frame. I used many of their original assets, retouched with my own art direction, to bring the game’s style to where it is now. I concepted, prototyped, and iterated on new features and environments, added animation to the UI using NGUI and Unity, created polished, distinct bubble art, and built up an Earth-themed environment using assets modeled by Don Creger – I placed these in the world and re-textured to better fit the direction I wanted for the level.

Links

Brandon Morris: http://brandonmorris.info/
Brandon Tyson: https://www.behance.net/btyson
Jim Stigall: http://jimstigall.blogspot.com/
Backflip Studios: http://www.backflipstudios.com/