https://www.vivianetteocasio.com/work daily 1.0 2023-11-08 https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616972745003-4VO9G7N2LMC5O2UQYJOR/Thumbnail.png Work - Discovering secrets in Tellstones Tellstones: King’s Gambit https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616970247777-LAP1JP9D24NTCBRPBF3E/Thumbnail.png Work - Building Riot Games’ Publishing Site Riot Forge Publishing https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616971355466-4MA0XCY7Z0ZT8WJ3Q0J2/Thumbnail.png Work - Transforming Summoner’s Rift through Dragons League of Legends https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616373474759-9G3VODRN8Q85NXADH54J/test.jpg Work - Rewarding Slayers for slaying together Dauntless TBD — Come back soon! https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616871806321-OY2JJC7Z7BJGS2F2URQS/Final+WR-thumb2.png Work - Creating a Mobile-First Promo Site League of Legends: Wild Rift https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616872039946-W8MJ7ONGOJCZHQEK6JFK/KDA2.png Work - Creating One Place for All Themed Content League of Legends https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616970967705-3UXRT0XA42EZK0OE9NZU/Thumbnail2.png Work - Designing the Runeterra Interactive Map Experience League of Legends https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616970729042-YYA6COCJUOQDBS09A9IG/Thumbnail.png Work - Building a Comics Platform for League Fans Riot Games Comics https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616971008962-QXQ17SFJN295BRN14RVT/Fanart.png Work - Improving Fanart Discovery & Engagement League of Legends Fanart Showcase https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616364384503-ZO77LED2NPTLVQYMKWGP/hunting-grounds-cover.jpg Work https://www.vivianetteocasio.com/process daily 0.75 2019-09-07 https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1508697311339-7JAFSDPTP83CJ0SK5E18/SG+Wires+to+VD.png My Process Star Guardian bio page wireframes were made before implementing visual design passes. https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1567819613518-089XB973CR6PMLA13J53/img_20190903_144236.jpg My Process Sketching interaction ideas and flow for points of interest on the Runeterra Interactive Map. https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1508696494171-1QCODSJ2WC7I2IM75RNF/heatmap-1434246-movement-desktopv2.jpg My Process Hotjar heatmap tracking user mouse movement on the Animation Workshop page on Universe (Desktop). https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1508696733621-XZHXUANB12IHZ7IFK00T/IMG_2362.JPG My Process End-to-end player journey map for League of Legends store gifting and gift receiving experience exercise. https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1508697802592-ZJFBM76CLWRFZ3XJADRC/Comics+Mood+Board.png My Process Early explorations and research around mobile comics. https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1508697095115-2FQ8AF1Z1BQMZ2QWXZKM/Prototype1.png My Process Uploading wireframes into InVision to test mobile device size legibility, mobile gestures and interactions. https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1508699501439-W6D0HAGHF3TJHLFQ5U10/20171022_120503.jpg My Process https://www.vivianetteocasio.com/new-page-2 daily 0.75 2023-11-08 https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/6c08c012-1c8c-4fae-a5cd-4c914be0a89f/EGS_Destiny2Lightfall_Bungie_AddOn_S2_1200x1600-3a820ab4d96977371ca4e152059efa8c.jpg About - 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/5987c7c637c5815a82246bc4/10f40a89-fed1-4250-ac80-379bacfb4e66/Party_Animals_cover.jpg About - 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/5987c7c637c5815a82246bc4/cb9550a4-e17d-47fc-94e8-50dcf6670089/bg3+cover.png About - 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/5987c7c637c5815a82246bc4/1504545968494-I6F81L3KZF6CNMB5Q7GH/Vivi%26Larry+033.jpg About https://www.vivianetteocasio.com/resume daily 0.75 2022-05-16 https://www.vivianetteocasio.com/riot-comics daily 0.75 2021-03-28 https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616961155143-4J5RMCCVVP849SHWLGVM/Comics%2BMood%2BBoard.png Riot Comics Early explorations and research around mobile comics. https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616961364564-HYOHFXUCUNZAGZVQ1IIT/Problem%2B2-2.png Riot Comics https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1568173631540-8BPZKFD4WGZQZNRM6R6X/Comics+Final+Product+2.png Riot Comics https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616963127528-DXKX3AUNO3U159039A7F/Varus_Vertical_Journey.png Riot Comics https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616961968470-T3TZT65F4CD0C3ZUTOEL/Final+Product1.png Riot Comics https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616963708735-NJSCHGJ6V55Y09BL1EVN/MVP-READER.jpg Riot Comics https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616962481452-DJUA60W7DVZ434JTDOLH/2021-03-28-13-13-universe.leagueoflegends.com+%281%29.png Riot Comics https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616961627925-CH0J5QBWNZEM690KRU0Y/Problem%2B3-2.png Riot Comics https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616961520154-XRZIN7153XLWX6PTHTZN/Problem%2B1-3.png Riot Comics https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616963648212-E9AKSAHF3DMX7VWNW1RK/Desktop+Issue+Navigation+-+1.png Riot Comics https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616963315959-HE4KU7S5K25O8TG517SS/2021-03-28+13_27_56-Window.png Riot Comics https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616962113256-C8DWF762ESBN0CVR3SKQ/Comics2.png Riot Comics https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616961773328-KEWE2111PONG9XBYFIII/01_Comic_Hub_Page.png Riot Comics https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616961902750-VII7QHXD126KOVRO99WW/comicshub2.png Riot Comics https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1567825544875-BET9PX4FJO1UC9D67ASL/Background%2B2.png Riot Comics Identified user pain points within the Camille: Severed Ties League comic on mobile. https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616961856754-800SYW7KT69RBRD11M7P/comicshub1.png Riot Comics https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1567823809338-TFTV28361CJX4EPFBL20/AsheWarmother_Series_YT_Thumbnail_TEXTLESS.jpg Riot Comics https://www.vivianetteocasio.com/league-fanart-showcase daily 0.75 2021-03-28 https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1567836954318-ONSXHLJRY2VD5B3YQD8N/Pasted%2Bimage%2Bat%2B2017_08_03%2B05_48%2BPM.png League Fanart Showcase Original landing page for the League of Legends Fanart Showcase. Champion card grids created visual clutter and made it difficult to navigate the site. In addition, no search bar and relying only on filters to find champions greatly decreased accessibility and discovery of content. https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616959473777-D1KIKSLBIPD4CHWPPGW4/Problem%2B1-3.jpg League Fanart Showcase https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616959572493-VWEBWXGWBT5CYTGB8KSB/fanartsearchfinal.png League Fanart Showcase https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1567837162847-ZWMZ79GRR3TR7ZM6SMPK/Status%2B1.png League Fanart Showcase Search results would also highlight letters included in champion names, which results in bloating the search results list to include more champions than the desired search intent. Additionally, call to actions, such as “Submit Artwork”, are not very visible or clear in the navigation bar. https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1568173706093-P0G5J51RQYD6TRLLQJ1O/Fanart%2BFinal%2BProduct2.png League Fanart Showcase https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616959532665-KHTILNS83ASZEZ1SBA40/Problem%2B1-4.jpg League Fanart Showcase https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616960260312-0FIWHQCO6B4E5YZW3Q9P/unknown.png League Fanart Showcase https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616960335964-C4S1B344YBXDBX4Z10T6/154771793.jpg League Fanart Showcase https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616959493943-MAU9D6OZXFPSDCEP01JS/Design+1.png League Fanart Showcase https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1567838206052-LK29AY16681CUEGPX2SF/4e16a184-2fe9-46eb-ba3d-b41ed0a21b0d_1000x1000_scaled.jpg League Fanart Showcase https://www.vivianetteocasio.com/explore-runeterra daily 0.75 2021-03-28 https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1568052121353-DHV5H4R1J1G70DNVF79K/Copy+of+after.jpg Explore Runeterra This was one of the earlier iterations for the interactive map. After conducting usability testing, we learned that the map felt empty without things to interact with outside of locations and champions. https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1568154293468-5UOHT58JKONQT0T7CTWQ/RUNETERRA_CAMPAIGN_UXFLOW_02.png Explore Runeterra Laying out the entire collection celebration interactions allowed me to best communicate design intent and vision to visual design and engineers for implementation. https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616954407040-5OKE1T7IK1GMA0ZK6M5C/landmarks+sketches.jpg Explore Runeterra https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1568158251560-YDDFK2LZEX15BM9B18UF/borders1.png Explore Runeterra Players can also see where Noxus territory starts and ends at the closest zoom state with boundaries drawn in the map tiles. https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1568075881890-6EPITR12VX571QO6TFH6/Research1.png Explore Runeterra In this example of data debriefing, I reported to the team that our iconography was not clear to users and we needed to invest time iterating on clarity concerns with this new feature. https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616951609460-ZTT7O93UEM6DS2A573F0/img_20190903_144236.jpg Explore Runeterra https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616952084266-5DE4LYN38T2CFNZLE5DI/Artboard+%E2%80%93+2.png Explore Runeterra https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1568151931682-LZ66Q1Y2BVGFUB72KEOQ/2019_09_10_14_44_51_Window.png Explore Runeterra Brush icons were received very well during user testing and were chosen for the final product to best represent image galleries on the map. https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1568155420871-CGAHD8A13SI4ZZFMMOV7/Artboard+%E2%80%93+5.png Explore Runeterra Map Collections are archived and accessible through the toolbar. This feature did not ship with the MVP release, but we did include it in the next iteration. https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1568156358060-97A3DTMLJLVY4YLKBU8T/demacraptors.jpg Explore Runeterra Final Product - Image Gallery Modal. https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1568051523053-GQM7MGNYN6Z3CNFO57OM/PlayerMaps.png Explore Runeterra This is an example of the diverse range of player made maps available on the Internet. https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1568156311533-DRV493EC619L0YQSP11C/2.png Explore Runeterra Final Product - Rollovers and POIs on the map. https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1568154905621-Q699W5DES7V985QO27JN/Artboard+%E2%80%93+4.png Explore Runeterra We scrapped the Explore medallion idea and incorporated its features more clearly on the toolbar. https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1568157592105-93OWCUBRXFB750OR076V/MapFinalProductShot.png Explore Runeterra https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1568152397490-23G1YSLY4HDZ0XE78DQC/Artboard+%E2%80%93+3.png Explore Runeterra Wireframe displaying event icon (e.g. story collection) animation transition as new POIs populate the map. https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1568149183672-IBKS3ANPXRHB4KYZ116G/IMG_0011.jpg Explore Runeterra I found all the Demacian conceptual artwork and grouped them into themed galleries that would be accessible within specific locations on the map or within cities and landmarks. https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1568155947725-QOFKQOKLOVWGYSDSYCC1/2019_09_10_15_51_35_Window.png Explore Runeterra Region overlays at highest level can quickly tell players a general narrative of what’s happening in Runeterra. In this screen, players can assume that Noxus is conquering and invading all sorts of territories. https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616957775292-DBW8F0EQA6N78GTPI9YV/Frame+2.png Explore Runeterra https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1568156238423-RJ074OX1G756432HG2HF/0.png Explore Runeterra Final Product - World View. https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1568148515387-GL3RLCZIR7GYDY8CIRFF/Galleries1.png Explore Runeterra Screenshot of creating theme groupings with appropriate copy and image per gallery. Using Google Slides allowed me to work more collaboratively with other members of the team with content management and editorial support. https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616958245888-5A387WY6EKGTZJ88EM5D/JMobile1.png Explore Runeterra Final Product - Mobile. https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616954211269-WXY9JV9QMUJOP8EGPV8M/2019_09_10_15_51_35_Window.png Explore Runeterra https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616951549610-OG4APEVS9IIPTSQCGDP6/03.jpg Explore Runeterra https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616952056129-Q9RUZ1G9FP9OQXEGA0R0/Artboard+%E2%80%93+1.png Explore Runeterra https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616954086369-4XLFGCFHI8LRPVMSVGEH/UsabilityTesting.png Explore Runeterra https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1568051021076-N4TK0OC4M4TEONFAYD28/Map1.png Explore Runeterra An example of Amanda Jeffrey’s (Riot Bioluminescence) cartography work in support of the Runeterra Map Experience. https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1567839449842-3ZOAAJ49T17EL1ZHUQIO/RuneterraMap.jpg Explore Runeterra https://www.vivianetteocasio.com/tellstones daily 0.75 2021-03-28 https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616900056306-I8LD4R4PPRJ6CA1O341S/2021-03-27+19_53_39-Window.png Tellstones https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616905693241-75I794MC4FTS2JAFC3HG/Results.png Tellstones https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616905074569-N7TG9J3VGDQFKX1M91HF/2021-03-27+21_16_38-Window.png Tellstones https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616894138323-YUU27R9PFTY9E8YM1KRF/Riot-Tellstone.jpg Tellstones https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616904517479-BGYRYWN7SOY53ZKT44Y0/Frame+1.png Tellstones https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616897682361-ILMTEROAQP4WITAQWZQM/UserResearch.png Tellstones https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616899819887-IL5N9YF4WYJ3CBNV7LIW/EarlyExplorations.png Tellstones https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616905182117-O1BQFEQK0Y0I1CQ9B7T9/j4jeZNx.jpg Tellstones https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616893044386-UQYZR9O1QCUFVD8DE63V/Banner2.png Tellstones https://www.vivianetteocasio.com/slayer-links daily 0.75 2021-03-28 https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1616911844014-IL9QTXJ040V684RCKCTL/slayer-links-cover.jpg Slayer Links https://www.vivianetteocasio.com/unannounced_01 daily 0.75 2021-12-13 https://images.squarespace-cdn.com/content/v1/5987c7c637c5815a82246bc4/1639373432450-NVZEMKQFU00BJEMH3FH5/dauntless-screenshot-linnea_login-fullsize.jpg Reforged