After sketching and removing a bunch of ideas, I moved forward to creating the detailed wireframes. During this stage in the process I was able to feel the flow of the site without being bothered what the site style would need to look like. The Developers were able to see how the site would be built. Once they started we were able to make any needed design adjustments.
PIXEL POLISHING
The next step in the process, I moved onto styling the user interface of the site. The main creative direction I was given was that the site needed to be sustainable and responsive. Beyond that I was given free reign over the site's look and feel. The scope of work consisted of design approach, social engagement, digital advertising, responsive design and cosistantancy.
PRODUCTION DESIGN
After all the pages for the site were designed, I prepared all the localized assets for the remaining pages of the entire site.
KEY ART & PRINT DESIGN
After the game and site launched the next step was to promote Defiance. I moved onto designing Print Marketing good such as; Packaging materials, OOH materials (pull-up banners) and apparel.
Trion Worlds: Kelly Ioerger
Category: Marketing
Taco Bell - Always On
Rich Media Interstitial Ad Unit
USERFLOW
Working with the brand team in New York City was difficult to transcribe the user flow. I designed specs and screenshots for the Account Manager so they would be able to translate the user flow with the client.
LAYOUT | PIXEL POLISHING
When users tap to expand the animated banner, this full page interstitial ad presents a micro site of a custom menu for Taco Bell.
Similar to the ta.co menu page this full page interstitial allows the user to customize their own taco and order directly from the ad unit. As the user selects ingredients, the image of the taco in the upper half grows with the selected ingredients. Once the user is finished building their taco, a CTA directs the user to the ta.co checkout page.
InMobi: Kelly Ioerger
Category: Mobile Advertising
Nike Training Club
Rich Media Interstitial Ads
USERFLOW
Working with the brand team in New York City was difficult to transcribe the user flow. I designed specs and screenshots for the Account Manager so they would be able to translate the user flow with the client.
PIXEL POLISHING
When users tap to expand the animated banner, this full page interstitial presents a Gamification Ad for Nike and their new series for women.
Similar to The Yoga Deck card game the main objective is for the user to shake their device to determine a workout for the day. The first frame displays a quick popup with instructions. Once the user taps “Go” or shakes their device the first card is revealed. The user will continue collecting more cards till all four are selected. When all four cards are selected the next frame displays video instructions for each of the cards. The user will have guided video instructions for each workout. A CTA at the bottom of the screen will allow the user to subscribe to the new series on YouTube.
INTERACTIVE VIDEO INTERSTITIAL
Interactive Video Interstitial Concept and Design
This ad is a video interstitial unit. What makes this video special is that it is an interactive video. The purpose of the interactive video is to engage the user and show how Nike Training Club works. How the interactive video functions; is that it allows the user to make a choice based on their curiosity of each workout.
Once the user clicks the “Play Now” button the video will start playing. Listed below are simple directions for the user to interact with the video. The user also has the option to click “Download Now” button. The “Download Now” button will direct the user to the Apple App Store or Google Play Store based on their device.
Download RIFT and enter the vast, magical MMORPG world of Telara. Experience an unprecedented class system, massive dynamic battles, and player housing like you've never seen before – all for free.
MICRO SITE RE-DESIGN
As a designer, I generally have to accommodate when working on large scale web sites like this. Appearances sometimes get implimented by Developers without being designed at all.
EXPANSION SITE DESIGN
As the game advanced, the Marketing team wanted the web site to complement the game update and expansion. As the game became exhausted, it was important to the Marketing team to keep our client base and produce fresh content.
PRINT
An addition to the Expansion Pack I designed the packaging for the game. Other print projects included assets for gaming conventions. This Pull-Up banner was designed for the Trion Worlds booth at GDC.
Trion Worlds: Kelly Ioerger
Category: Marketing
Next Generation
Web Template Design
Mkap : Kelly Ioerger
Category: Web Design
Game Of War
Rich Media Interstitial Ads
PIXEL POLISHING
I have a strong passion for game art and design so this project was really fun. The client provided all the art assets and allowed me all the creative freedom. It was very successful in the end, the client was surprised and overwhelmed with the amount of work I put into the Ad units.
The Marketing team presented a creative brief for an e-commerce one-off page. The most challenging part about this project was strategizing the information architecture. The first phase, I did a lot of research. After sketching the concept and layout the wireframes were created.
PIXEL POLISHING
Collaborating with the concept artist, and Capture Artist the Key Art was designed to fit within the 960 grid aspect. Once I collected all the asset from the Capture Artist I was able to visually layout the design. Inspired by the in-game UI, I translated the same style to the Founder's Pack Page.
RESPONSIVE TEMPLATE DESIGN
Based on the DEFIANCE concept and wireframes I was able to move onto the look and feel of ArcheAge. Researching the in-game aesthetics I started playing with color. After two rounds of color and imagery the Marketing team and I came to an agreement.
PRODUCTION DESIGN
I pulled out all the assets for the developer and saved them into a Style Guide Photoshop document.
Client: Trion Worlds
Category: Web Design
Travel Texas
Rich Media Interstitial | Interactive map
USERFLOW
The client requested that this Rich Media unit would compliment the Travel Texas mobile site. After researching the mobile site I created a quick userflow for the Sales Team to use.
PIXEL POLISHING
After illustrating the Texas map I collected the all the assets from the client and began the lay out. Based on the clients request I created the userflow and UI to relate with the mobile site.
Client: InMobi
Category: Mobile Advertising
Springr
App Wireframing
SKETCHING & WIREFRAMING
Springr is a very small start-up. The team approched me to create a wireframe. The next step I worked collabatively with the developer to build out a prototype.
Client: Freelance
Category: App Wireframing
Wake Up Your Phone
Production Design
WIREFRAMEING & PRODUCTION DESIGN
I worked with a team of Art Directors and Designers to help launch this site for Sansdisk. My main position in this large project was Production Designer. After all the content was localized I pieced together all the assets for the Developers into one Photoshop file.
Client: Sansdisk
Category: Web Design
Pandora
Rich Media Interstitial Ad
USERFLOW
Presenting this idea to the sales team was a challenge. I created a simple userflow presentation for the Account Manager to perform to the client.
PIXEL POLISHING
The Interactive Art Direction for this project was, the user taps and holds their thumb in the middle of the device, a new screen will appear presenting the user's mood. Depending on the mood, a suggested genre of music will appear. Relating to the user, (young millennials) a charismatic avatar will also be assigned to the user's mood. A CTA directs the user to the Google Play store or Apple App store depending on the user's device.
Client: InMobi
Category: Mobile Advertising
Saks Fifth Ave
Rich Media Interstitial Strand Unit
USERFLOW
To show the client how Strand Units interact I created a presentation to explain the user flow.
PIXEL POLISHING
As the user progresses within the interactive Look Book, the next screen shows the available products from the Editorial images. Icons around the page function as Hot Spots for the user to interact with. Once the user taps on a Hot Spot they are able to view details of that product. A CTA is provided to purchase that product directly from the Interstitial Ad. As the user is viewing the product in detail, a optional 360o rotation of the product is available.
