Heroes
User Story
Heroes are a crucial, endlessly scalable, evergreen investment, and they all remain relevant throughout the game. Players can view a list of their heroes displaying a high-level summary of their abilities, gear, and current status. This list is accessible from the HUD and the Crew Mansion. If enemies take them, the player's ability to progress is impaired, so the player must do all to get them back.
MVP Features
The Hero feature written by the Game Designer. I translated these descriptions into a working UX, UI, Visual Design, and Architecture.
Hero
Screen
Gear
Boosts
Avatar
Skill Tree
Action Bar
Inventory
Presets
Screens
These are the in-game screens for the hero feature played during Mafia Wars soft-launch.
{"items":["6a37d401-c459-40c8-bc6f-9202cca17ca1","b157234c-6ad1-457c-942a-ebccf8c750be","3afbdaa0-b8c3-4486-8d8f-0a3ff16bda0e","adf1e56d-4335-433a-9567-b0688060a94b"],"styles":{"galleryType":"Columns","groupSize":1,"showArrows":true,"cubeImages":true,"cubeType":"fill","cubeRatio":0.5625,"isVertical":true,"gallerySize":48,"collageAmount":0,"collageDensity":0,"groupTypes":"1","oneRow":false,"imageMargin":12.5,"galleryMargin":0,"floatingImages":0,"chooseBestGroup":true,"smartCrop":false,"hasThumbnails":false,"enableScroll":true,"isGrid":true,"isSlider":false,"isColumns":false,"isSlideshow":false,"cropOnlyFill":false,"fixedColumns":4,"enableInfiniteScroll":true,"isRTL":false,"minItemSize":50,"rotatingGroupTypes":"","rotatingCubeRatio":"","gallerySliderImageRatio":1.7777777777777777,"numberOfImagesPerRow":4,"numberOfImagesPerCol":1,"groupsPerStrip":0,"borderRadius":0,"boxShadow":0,"gridStyle":1,"mobilePanorama":false,"placeGroupsLtr":false,"viewMode":"preview","thumbnailSpacings":0,"galleryThumbnailsAlignment":"bottom","isMasonry":false,"isAutoSlideshow":false,"slideshowLoop":false,"autoSlideshowInterval":4,"bottomInfoHeight":0,"titlePlacement":"SHOW_ON_HOVER","galleryTextAlign":"left","scrollSnap":false,"itemClick":"expand","fullscreen":true,"videoPlay":"hover","scrollAnimation":"EXPAND","scrollDirection":0,"overlayAnimation":"NO_EFFECT","arrowsPosition":0,"arrowsSize":23,"watermarkOpacity":40,"watermarkSize":40,"useWatermark":true,"watermarkDock":{"top":"auto","left":"auto","right":0,"bottom":0,"transform":"translate3d(0,0,0)"},"loadMoreAmount":"all","defaultShowInfoExpand":1,"allowLinkExpand":true,"expandInfoPosition":0,"allowFullscreenExpand":true,"fullscreenLoop":false,"galleryAlignExpand":"left","addToCartBorderWidth":1,"addToCartButtonText":"","slideshowInfoSize":200,"playButtonForAutoSlideShow":false,"allowSlideshowCounter":false,"hoveringBehaviour":"APPEARS","thumbnailSize":120,"magicLayoutSeed":1,"imageHoverAnimation":"SHRINK","imagePlacementAnimation":"NO_EFFECT","calculateTextBoxWidthMode":"PERCENT","textBoxHeight":0,"textBoxWidth":200,"textBoxWidthPercent":50,"textImageSpace":10,"textBoxBorderRadius":0,"textBoxBorderWidth":0,"loadMoreButtonText":"Load More","loadMoreButtonBorderWidth":1,"loadMoreButtonBorderRadius":0,"imageInfoType":"NO_BACKGROUND","itemBorderWidth":0,"itemBorderRadius":0,"itemEnableShadow":false,"itemShadowBlur":20,"itemShadowDirection":135,"itemShadowSize":10,"imageLoadingMode":"BLUR","expandAnimation":"NO_EFFECT","imageQuality":90,"usmToggle":false,"usm_a":0,"usm_r":0,"usm_t":0,"videoSound":false,"videoSpeed":1,"videoLoop":true,"gotStyleParams":true,"selectedLayout":"2|bottom|1|fill|true|0|true","allowSocial":false,"allowDownload":false,"allowTitle":false,"allowDescription":false,"loveButton":false,"loveCounter":false,"showVideoPlayButton":true,"galleryImageRatio":2,"sharpParams":{"quality":90,"usm":{}},"galleryHorizontalAlign":"flex-start","galleryVerticalAlign":"flex-start","imageLoadingWithColorMode":"PICKED_COLOR","imageRatioType":"FIXED","numberOfDisplayedItems":3,"itemBorderColor":{"themeName":"color_15","value":"rgba(41,47,51,1)"},"itemShadowOpacityAndColor":{"themeName":"color_15","value":"rgba(41,47,51,0.2)"},"textBoxBorderColor":{"themeName":"color_15","value":"rgba(41,47,51,1)"},"titleDescriptionSpace":6,"textsVerticalPadding":0,"textsHorizontalPadding":0,"textBoxFillColor":{"themeName":"color_12","value":"rgba(202,221,230,1)"},"alwaysShowHover":false,"isStoreGallery":false,"previewHover":false,"calculateTextBoxHeightMode":"MANUAL","galleryLayout":2,"useCustomButton":false,"customButtonText":"","galleryImageRatioFromWix":0.5625,"m_numberOfImagesPerRow":2,"itemOpacity":{"themeName":"color_14","value":"rgba(81,94,101,0)"},"itemFont":{"style":{"bold":false,"italic":false,"underline":false},"family":"proxima-n-w01-reg","preset":"Heading-S","editorKey":"font_6","size":22,"fontStyleParam":true,"displayName":"Small Heading","value":"font:normal normal normal 22px/1.4em proxima-n-w01-reg,sans-serif;"},"itemFontSlideshow":{"family":"helvetica-w01-bold","displayName":"Basic Heading","style":{"bold":false,"italic":false,"underline":false},"size":22,"preset":"Custom","editorKey":"font_5","fontStyleParam":true,"value":"font:normal normal normal 22px/27px helvetica-w01-bold,helvetica-w02-bold,helvetica-lt-w10-bold,sans-serif;"},"itemDescriptionFontSlideshow":{"family":"helvetica-w01-light","displayName":"Paragraph 2","style":{"bold":false,"italic":false,"underline":false},"size":15,"preset":"Custom","editorKey":"font_8","fontStyleParam":true,"value":"font:normal normal normal 15px/18px helvetica-w01-light,helvetica-w02-light,sans-serif;"},"itemDescriptionFont":{"family":"proxima-n-w01-reg","style":{"bold":false,"italic":false,"underline":false},"size":15,"preset":"Body-M","editorKey":"font_8","fontStyleParam":true,"displayName":"Paragraph 2","value":"font:normal normal normal 15px/1.4em proxima-n-w01-reg,sans-serif;"},"itemFontColor":{"themeName":"color_11","value":"rgba(240,250,255,1)"},"itemFontColorSlideshow":{"themeName":"color_15","value":"rgba(41,47,51,1)"},"itemDescriptionFontColor":{"themeName":"color_11","value":"rgba(240,250,255,1)"},"itemDescriptionFontColorSlideshow":{"themeName":"color_15","value":"rgba(41,47,51,1)"},"loadMoreButtonFont":{"family":"proxima-n-w01-reg","displayName":"Paragraph 2","style":{"bold":false,"italic":false,"underline":false},"size":15,"preset":"Body-M","editorKey":"font_8","fontStyleParam":true,"value":"font:normal normal normal 15px/1.4em proxima-n-w01-reg,sans-serif;"},"loadMoreButtonFontColor":{"themeName":"color_15","value":"rgba(41,47,51,1)"},"loadMoreButtonColor":{"themeName":"color_11","value":"rgba(240,250,255,1)"},"loadMoreButtonBorderColor":{"themeName":"color_15","value":"rgba(41,47,51,1)"},"arrowsColor":{"themeName":"color_11","value":"rgba(240,250,255,1)"},"oneColorAnimationColor":{"themeName":"color_11","value":"rgba(240,250,255,1)"},"responsive":false,"targetItemSize":558,"isAccessible":false,"allowLeanGallery":false,"layoutsVersion":2,"selectedLayoutV2":2,"isSlideshowFont":false,"externalInfoHeight":0,"externalInfoWidth":0},"container":{"top":"","bottom":"","left":"","right":"","width":900,"height":386,"position":"","avoidGallerySelfMeasure":true,"galleryWidth":925,"galleryHeight":386,"scrollBase":0}}
Boss
Mole
Dealer
Change Avatar
Boosts
Gear Inventory
Boss' Skill Tree
Architecture
Main Screen Callouts
Real Gameplay
Playing the Hero feature during a Live Development soft-launch.
Process
I usually sketch out ideas, wireframes, and architecture before getting into the computer. Once I have a solid concept, I iterate, going between the sketchbook and the screen flushing out iterations.
{"items":["bf83b333-a438-4670-8dae-99e1e2f80789","3f9829b0-bccf-45fa-937e-9c1d15a00caa","9634ea89-ce35-4fab-bcc5-56e3b8b156cf","5e47947d-5278-4eb0-a874-c45669c3cdaa","a5a4c51c-f3bf-4e3f-94a0-c8283a22501d","599d79c9-6919-40d1-a413-da9c23ccd58c","91bb766f-4a5f-41e9-b948-75f13a7bde29","62c0303b-216a-4696-a9ed-31ecc3eee846","ace993f9-0436-4cd0-b3ac-91f1ad6c4396"],"styles":{"galleryType":"Strips","groupSize":1,"showArrows":true,"cubeImages":true,"cubeType":"fit","cubeRatio":"100%/100%","isVertical":false,"gallerySize":35,"collageAmount":0.8,"collageDensity":1,"groupTypes":"1","oneRow":true,"imageMargin":0,"galleryMargin":0,"floatingImages":0,"chooseBestGroup":true,"smartCrop":false,"hasThumbnails":false,"enableScroll":true,"isGrid":false,"isSlider":false,"isColumns":false,"isSlideshow":true,"cropOnlyFill":false,"fixedColumns":1,"enableInfiniteScroll":true,"isRTL":false,"minItemSize":120,"rotatingGroupTypes":"","rotatingCubeRatio":"","gallerySliderImageRatio":1.7777777777777777,"numberOfImagesPerRow":3,"numberOfImagesPerCol":1,"groupsPerStrip":0,"borderRadius":0,"boxShadow":0,"gridStyle":0,"mobilePanorama":false,"placeGroupsLtr":false,"viewMode":"preview","thumbnailSpacings":15,"galleryThumbnailsAlignment":"bottom","isMasonry":false,"isAutoSlideshow":false,"slideshowLoop":true,"autoSlideshowInterval":4,"bottomInfoHeight":0,"titlePlacement":"SHOW_ON_HOVER","galleryTextAlign":"left","scrollSnap":true,"itemClick":"expand","fullscreen":true,"videoPlay":"hover","scrollAnimation":"NO_EFFECT","scrollDirection":1,"overlayAnimation":"EXPAND","arrowsPosition":0,"arrowsSize":23,"watermarkOpacity":40,"watermarkSize":40,"useWatermark":true,"watermarkDock":{"top":"auto","left":"auto","right":0,"bottom":0,"transform":"translate3d(0,0,0)"},"loadMoreAmount":"all","defaultShowInfoExpand":1,"allowLinkExpand":true,"expandInfoPosition":0,"allowFullscreenExpand":true,"fullscreenLoop":false,"galleryAlignExpand":"left","addToCartBorderWidth":1,"addToCartButtonText":"","slideshowInfoSize":0,"playButtonForAutoSlideShow":false,"allowSlideshowCounter":false,"hoveringBehaviour":"NEVER_SHOW","thumbnailSize":118,"magicLayoutSeed":1,"imageHoverAnimation":"SHRINK","imagePlacementAnimation":"NO_EFFECT","calculateTextBoxWidthMode":"PERCENT","textBoxHeight":0,"textBoxWidth":200,"textBoxWidthPercent":50,"textImageSpace":10,"textBoxBorderRadius":0,"textBoxBorderWidth":0,"loadMoreButtonText":"Load More","loadMoreButtonBorderWidth":1,"loadMoreButtonBorderRadius":0,"imageInfoType":"NO_BACKGROUND","itemBorderWidth":0,"itemBorderRadius":0,"itemEnableShadow":false,"itemShadowBlur":20,"itemShadowDirection":135,"itemShadowSize":10,"imageLoadingMode":"BLUR","expandAnimation":"NO_EFFECT","imageQuality":90,"usmToggle":false,"usm_a":0,"usm_r":0,"usm_t":0,"videoSound":false,"videoSpeed":1,"videoLoop":true,"gotStyleParams":true,"selectedLayout":"5|bottom|1|fit|false|1|true","allowSocial":false,"allowDownload":false,"allowTitle":false,"allowDescription":false,"loveButton":false,"loveCounter":false,"showVideoPlayButton":true,"galleryImageRatio":2,"sharpParams":{"quality":90,"usm":{}},"galleryHorizontalAlign":"flex-start","galleryVerticalAlign":"flex-end","imageLoadingWithColorMode":"PICKED_COLOR","imageRatioType":"FIXED","numberOfDisplayedItems":3,"itemShadowOpacityAndColor":{"themeName":"color_15","value":"rgba(41,47,51,0.2)"},"textBoxBorderColor":{"themeName":"color_15","value":"rgba(41,47,51,1)"},"titleDescriptionSpace":6,"textsVerticalPadding":0,"textsHorizontalPadding":0,"textBoxFillColor":{"themeName":"color_12","value":"rgba(202,221,230,1)"},"alwaysShowHover":false,"isStoreGallery":false,"previewHover":false,"calculateTextBoxHeightMode":"MANUAL","galleryLayout":5,"useCustomButton":false,"customButtonText":"","itemOpacity":{"value":"rgba(255,255,255,0)"},"itemFont":{"style":{"bold":false,"italic":false,"underline":false},"family":"proxima-n-w01-reg","preset":"Heading-S","editorKey":"font_6","size":22,"fontStyleParam":true,"displayName":"Small Heading","value":"font:normal normal normal 22px/1.4em proxima-n-w01-reg,sans-serif;"},"itemFontSlideshow":{"family":"avenir-lt-w01_85-heavy1475544","displayName":"Basic Heading","style":{"bold":false,"italic":false,"underline":false},"size":22,"preset":"Custom","editorKey":"font_5","fontStyleParam":true,"value":"font:normal normal normal 22px/27px avenir-lt-w01_85-heavy1475544,sans-serif;"},"itemDescriptionFontSlideshow":{"family":"avenir-lt-w01_35-light1475496","displayName":"Paragraph 2","style":{"bold":false,"italic":false,"underline":false},"size":15,"preset":"Custom","editorKey":"font_8","fontStyleParam":true,"value":"font:normal normal normal 15px/18px avenir-lt-w01_35-light1475496,sans-serif;"},"itemDescriptionFont":{"family":"avenir-lt-w01_35-light1475496","displayName":"Paragraph 2","style":{"bold":false,"italic":false,"underline":false},"size":15,"preset":"Custom","editorKey":"font_8","fontStyleParam":true,"value":"font:normal normal normal 15px/18px avenir-lt-w01_35-light1475496,sans-serif;"},"itemFontColor":{"themeName":"color_11","value":"rgba(240,250,255,1)"},"itemFontColorSlideshow":{"themeName":"color_15","value":"rgba(41,47,51,1)"},"itemDescriptionFontColor":{"themeName":"color_11","value":"rgba(240,250,255,1)"},"itemDescriptionFontColorSlideshow":{"themeName":"color_15","value":"rgba(41,47,51,1)"},"loadMoreButtonFont":{"family":"proxima-n-w01-reg","displayName":"Paragraph 2","style":{"bold":false,"italic":false,"underline":false},"size":15,"preset":"Body-M","editorKey":"font_8","fontStyleParam":true,"value":"font:normal normal normal 15px/1.4em proxima-n-w01-reg,sans-serif;"},"loadMoreButtonFontColor":{"themeName":"color_15","value":"rgba(41,47,51,1)"},"loadMoreButtonColor":{"themeName":"color_11","value":"rgba(240,250,255,1)"},"loadMoreButtonBorderColor":{"themeName":"color_15","value":"rgba(41,47,51,1)"},"arrowsColor":{"themeName":"color_14","value":"rgba(81,94,101,1)"},"oneColorAnimationColor":{"themeName":"color_11","value":"rgba(240,250,255,1)"},"responsive":false,"targetItemSize":35,"isAccessible":false,"allowLeanGallery":false,"layoutsVersion":2,"selectedLayoutV2":5,"isSlideshowFont":true,"externalInfoHeight":0,"externalInfoWidth":0},"container":{"top":"","bottom":"","left":"","right":"","width":980,"height":494,"position":"","avoidGallerySelfMeasure":true,"galleryWidth":980,"galleryHeight":494,"scrollBase":0}}
Ideation
An evolution of nine different subfeatures. These iterations were the result of a developing UI Pattern and from the feature being rewritten, edited, and updated.
