http://www.nathanvarjavand.com/design daily 1.0 2025-01-29 https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1553025848948-Z3QZA8P3Q5IW0F6YLMRP/ij2batmanflash.jpg Design - Injustice 2 UX Design • User Research https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1550199173989-A1LYGF8R5Y7GATQDBX38/IJ2MM.jpg Design https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1552531414973-2OHXP248MUL295L7G9AF/ij2_equipwires.gif Design - Equipment Management Prototype This was the version of equipment management that tested best with our players after several rounds of iteration and testing. https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1552531424614-5ZGNISQKUWR5WE7NYABF/ij2_equipart.jpg Design - In-game Equipment UI https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1550201856646-VGYWXCBZLCSEUMBF18Y8/IJ2_UserFlow.png Design https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1550200278310-8VSV2JRFJQWH9JPDQHAA/ij2_equipment.gif Design Early prototype demonstrating equipment management https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1550200662401-KBNLJWP1KZIE7XZAJTPB/2019-02-14+21_17_17-New+Page+3.png Design - Clash Wireframes This was approximately the 7th iteration on this feature as it was highly contentious https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1552531536439-9FCD2SGDXKTPFX8OHPG2/ij2clashart.jpg Design - In-game Clash UI https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1550200327124-JPS5PKZKZ1FZRNDCM9IV/ij2_roster%26loadout.gif Design Early prototype demonstrating quick character select & loadout creation https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1550201347056-D92ZWRG35ASNN3ZSW0OZ/ij2_endofround.gif Design End of round rewards prototype demonstrating functionality and flow https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1552529875579-TP5AC04RLYOF950EJH1Y/inj2m_template__character_card_states.png Design Example template depicting the various states character cards could have https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1552531915557-HO0LH4H9MVAF1WCRPQ6W/injustice-2-mobile-character-select.jpg Design https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1552530678969-SEL53BATAJ4Y8GTBIHEB/ij2m.jpg Design - Injustice 2 Mobile UX Design • User Research https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1552529193196-GU9WWWRYCCQ8V3YUWRYE/ij2m_user_flow_diagram.png Design User flow diagram https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1552529589545-IF5CNG3Z55GGFY4BTMK6/ij2m_main_menu.png Design - Main Menu Wireframes I tried several versions of different main menu layouts, ultimately landing on this version as it supported the needs of design and the players the best. https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1552529812022-WGI0Z8VYRUC15MY2R8FN/IJ2mPreFight.png Design - Pre-Match Wires This screen required a lot of collaboration between UI and UX to nail down the information architecture, as it hosts a lot of useful content. https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1552529245469-SE3CGVO1NA40MUST358Y/IJ2mObj.png Design - Objectives System Wireframes https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1552529588702-AJX5C2O6B4OATSHAXQPP/ij2m_challenge_mode.png Design - Challenge Mode Wireframes https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1552529589513-UJJ5DPLATK59I95V59D0/ij2m_hud.png Design - Annotated HUD Wireframes When screens have a lot of complexities, or based on team need, I will annotate each UI component, explaining how they function so that nothing slips through the cracks. https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1552532286116-ITRM50UEDNLOETEDVHM8/ij2m_backofcard.gif Design - Character Management Prototype https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1552532291242-RIM5114UKCWRKP2MKZXJ/injustice-2-mobile-wonder-woman.jpg Design - In-Game Character Management UI https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1552854195595-WTVFMOFKWZ8Z5MF678UM/IMAG0069.jpg Design - MKX Menu Exploration Using a white board and post-it notes, I walked the team through the scope of our user flow and menu structure in order to identify areas of improvement. https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1552854196077-AMGQHUU0A8TTUXBXT3DO/IMAG0136.jpg Design - GDD Whiteboarding When exploring ideas that are somewhat nebulous, I’ll typically start whiteboarding with game design or UI to identify the purpose and flow of the feature/screen. https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1552854196074-7XU1FLB8ZC8WNAWW6O6S/IMAG0131.jpg Design - Stakeholder Interviews Prior to testing, I meet with key stakeholders to understand their questions, assumptions, and needs. These get baked into the test plan so that we can acquire insights straight from the players. https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1552854195629-OLPEJ6NL5TXQIAM7UJYA/IMAG0064.jpg Design - Post Playtest Data Playtesting is great, but only if you can actually use the data and insights acquired. I’ll typically code for themes from playtest on a whiteboard prior to writing a concise report for the team. https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1552852341514-CF9J1NH3SABPEG580WL2/MKXmain.jpg Design https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1552858598201-B4MTJ3112CBFOZRPVQ1U/mkx_factionselect.gif Design ‘Factions’ was a new feature that required a lot of testing to get right. This was an Axure prototype (imported art assets) hooked up to a controller allowing the player to tab through the main Faction screens. https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1552855085811-OROAR2MYOVZBYOQXRUE0/mkx_select2.gif Design - Character Select Prototype Axure prototype demonstrating the final version of character select. This was used in testing. https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1552855088046-P9R3P3QWFC8MHG8D89ZK/mkx_select1.gif Design - Character Select Prototype (Vertical) An early concept that we wanted to test that used a vertical tile structure. This did not test well for the feature set we had. https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1552851367432-CC0NPI8XSNXHOTP417WR/mkxscorp.jpg Design - Mortal Kombat X UX Design • User Research https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1553023987388-O8AS687ODD2A383JQKAE/mkxmuserflow.png Design User flow diagram demonstrating the paths the player can take in the app https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1553022773007-V3NET5KEQCV5US1KKNHT/ij2m.jpg Design - Mortal Kombat Mobile UX Design • User Research https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1553023304883-68XEGLFXNEO6PR9T7T5Q/mkxbackofcard.png Design https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1553024610013-04BNWSDU22DGIRY6JN4C/mk_tutorial.gif Design Axure prototype demonstrating FTUE and tutorial https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1553024296036-82RLMLD3QIXU5Y8OSUN5/mk_flow.gif Design Prototype demonstrating flow from main menu to end of match (annotations removed) https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1553024554647-UTRQM3YRV2D4TQG079JQ/_template__character_card.png Design Templates such as these were very useful in visually cataloging the various states UI patterns could appear in https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1633737201543-3JPRBWMR12M8L99M4ZVQ/rewardsstates.png Design - Make it stand out * Art for this state sheet was made in collaboration with UI art https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1633739014227-Y8ZH8W5CHQPDBUNMX45J/garage.png Design - Make it stand out Annotated garage wireframes https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1633738392380-5ZZK4RZYS8XI6GPPRPCP/cmdr_assignskill.gif Design https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1633738931565-50VKO2ET838WIF495WBP/resupply7.gif Design https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1633738553228-2WJ6W0LGNFK9H9NFDOV6/tech_tree_nation.png Design https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1633738593148-I2MHB7WFT7Q45793JLN1/hud__1___1_.png Design https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1633737015610-F6IKK4VYV2MBP30JSS2H/rewardsart.png Design - Make it stand out UI art and annotations applied to the updated season pass screen * High fidelity season pass UI made in collaboration with UI art https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1633734072590-KTB7LZGQQAVLS8RBBFHC/bc54aa4cdf7a7f75a94f4b0a7a407d63.jpg Design - World of Tanks UX Design Lead • User Research https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1633737870493-DP5L2HKIIXU4Q7475GGW/season_pass_proto2.gif Design - Make it stand out Interactive prototype I developed for the season pass that incorporated analytics and additional user feedback; this prototype allowed coworkers to “play” through the season pass UI and experience it for themselves https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1633736114150-BL6UC10ZYETPTL0DMCQY/rewards.png Design - Make it stand out First pass annotated wireframes I created for the initial implementation of the season pass feature https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1633740531057-KL6QKF1YHRUSZWJAZ3AA/Launcher.png Design https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1633736075726-IFPY6GBMQ5BR6UOYZZ1O/ironclad_6_0_user_flow_diagram.png Design Updated screen flow diagram visualizing the game’s high level menu structure and information architecture including where the season pass content would fit in https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1633740164241-BT46KTAG2Y7Q3ZB70ELJ/use_case_diagram.png Design - Make it stand out Updated user flow diagram visualizing key player decisions in the game which helped track key features, player choices, and UI needs https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/a9f487c2-6f16-4b06-8b9a-11ccc2a6192d/uxlib_ping.png Design - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/67572924-0f91-4453-9cb8-f8d9f0a43e94/Turtle-Rock-Studios-logo.jpg Design - Undisclosed FPS UX Design • UX Strategy https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1397615255612-4WG39RZBPAV3O3LNSCKY/game.jpg Design https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1397615433916-CEXAE7XM5KBTSFBXL871/G6oBcTd1FoUD4gDn_9GhUxjusfxmqIHkcn3oslryrnU%2CmkIqFxOheDkIhQYjGCuFLpDVnEKh8ynlud7eeHTGCYQ%2C0964WFtrJufRqZbEm-4H-BUyU7GaxkHUcxKlyv50yBk.jpeg Design https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1397616784232-PG3MZBNS2UYIWW7R2NJ6/430x310_great_for_you.png Design https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1466201271002-85GYXYO2XSRSIFHQLEPW/AKQA_WB_MKXDragon_032814.jpg Design https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1466727140047-Z1QFTP59HN05SZZHGSBJ/Capture2.PNG Design https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1492149387706-FZESGSZ6V12MOI9LLDY0/injustice-2-listing-thumb-01-ps4-us-06jun16.png Design https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1499306623013-PL3RC3U7Y185E90LWJ1E/unnamed.jpg Design https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1554350374801-LCEU0MUHV9N3ZYT56JZS/mkm.png Design https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1554351579034-896YAK25EK9FGY1RXT33/inj2.png Design https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1554351704968-ZC8MLI4OF1Z4YYD2C1UM/trs.png Design https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1554352528073-M0PFVCDK9XRCK9Z2R72M/mkx.png Design https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1554352933378-RF6WTPDY6G01W7MX0P9W/INJ1Mobile.png Design https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1555637058490-2NC5AOZK08OX1LAV8MCE/inj2wire.png Design https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1603339693930-7LCY2BHJA6CT21743WOK/page_1.png Design https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1633740398813-XBCNY1XU48PK42JO8L2D/wot_logo.png Design https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1665978253330-6S33T00A6SCGZDEGOFCW/Turtle-Rock-Studios-logo.jpg Design https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1394686656957-7T31CPN7TTURWQLDH1Y8/491882_mn95n7blmfqmmcecvmhwrvuu5.png Design https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1403712835351-MW1EBEIDKGGL9ON4AQ04/dtjLogo.jpg Design https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1455147891101-QK96KLURAXLPXDUCF7G6/apple-touch-icon-152x152-precomposed.png Design https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1455147913779-NGR2O7V5TFQDFHN31JEQ/cb_c4ceb35d081da3b3e72c2dc37d581593.png Design https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1403713136714-VS1WENKLNRFSIJBZYURK/crop_sm_Humana_Logo.jpg Design https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1455147949777-8JG7IMP60LAKRL9ZWJEP/photo.jpg Design http://www.nathanvarjavand.com/about-me daily 0.75 2025-01-29 https://images.squarespace-cdn.com/content/v1/5302905de4b05f10a2c80c26/1473452965373-6U87X0QE58PX7U2YLXO0/image-asset.jpeg About Me figure a: Jango http://www.nathanvarjavand.com/contact daily 0.75 2025-01-29 http://www.nathanvarjavand.com/intro daily 0.75 2015-10-23 https://images.squarespace-cdn.com/content/v1/5310cef7e4b08602cbfa36bf/1412380936909-3NDYSVN9D7FZDQHHCO0P/image-asset.jpeg Intro https://images.squarespace-cdn.com/content/v1/5310cef7e4b08602cbfa36bf/1412381139286-DM6BAWCRHNKPBLGZ3QER/Lima01.jpg Intro https://images.squarespace-cdn.com/content/v1/5310cef7e4b08602cbfa36bf/1412380988400-7DYABALOM24UK4TSXH5L/image-asset.jpeg Intro https://images.squarespace-cdn.com/content/v1/5310cef7e4b08602cbfa36bf/1395951531371-UHVVQPY7DU2MY6Z73FW2/hayden-header.jpg Intro