https://kevincruz.work Kevin Cruz Mon, 09 Sep 2019 17:37:54 +0000 https://kevincruz.work en https://kevincruz.work/Main Mon, 23 Apr 2018 21:45:51 +0000 Kevin Cruz https://kevincruz.work/Main INFO &nbsp; &nbsp; &nbsp; &nbsp; KEVIN CRUZ IS A UI AND UX DESIGNER ☞ WORKS AT HD MADE ☞ ENJOYS WRITING CODE AND MUSIC ☞ &nbsp; https://kevincruz.work/All-Projects-Header Mon, 23 Apr 2018 21:45:52 +0000 Kevin Cruz https://kevincruz.work/All-Projects-Header https://kevincruz.work/TANKEE Mon, 23 Apr 2018 21:45:53 +0000 Kevin Cruz https://kevincruz.work/TANKEE INFO Designed at HD MADE Tankee website TANKEE&nbsp; &nbsp; &nbsp; &nbsp; PROJECT Designed an app for kids to watch gaming content. <img width="1329" height="949" width_o="1329" height_o="949" data-src="https://freight.cargo.site/t/original/i/4b52b03c0ba831dea1342167e24d4b575c3835e330846325378065d7fc809404/Screen-Shot-2019-09-09-at-11.22.33-AM.png" data-mid="50203730" border="0" src="https://freight.cargo.site/w/1000/i/4b52b03c0ba831dea1342167e24d4b575c3835e330846325378065d7fc809404/Screen-Shot-2019-09-09-at-11.22.33-AM.png" /> BACKGROUNDKids under 13 spend a lot of time watching video-game content. Unfortunately, many apps leave the content approval process to algorithms which lets some pretty awful things slip through the cracks. SOLUTIONThe product itself is a mobile entertainment platform where kids can watch the gaming content they love, engage in an environment that is parent-approved and compliant with the Children’s Online Privacy Protection Act (COPPA). <img width="1555" height="716" width_o="1555" height_o="716" data-src="https://freight.cargo.site/t/original/i/ca3e561d2dc5eb98ed9d5cdada68794d3d07e519f2b34c45f1a5e64bd314b0ad/Screen-Shot-2019-09-09-at-2.01.13-PM.png" data-mid="50219243" border="0" src="https://freight.cargo.site/w/1000/i/ca3e561d2dc5eb98ed9d5cdada68794d3d07e519f2b34c45f1a5e64bd314b0ad/Screen-Shot-2019-09-09-at-2.01.13-PM.png" /> <img width="1280" height="850" width_o="1280" height_o="850" data-src="https://freight.cargo.site/t/original/i/9bcf06bad7fe1819ce2b9a386393369b7a7c5b021818bbf6156b8eb09ab82d28/tankee2.jpg" data-mid="50161846" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/9bcf06bad7fe1819ce2b9a386393369b7a7c5b021818bbf6156b8eb09ab82d28/tankee2.jpg" />In the first month after launch, kids watched over an hour of videos. Kids also reacted with over 58,000 stickers and followed 850 gamers. <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/39629a221ae019068ec9fe9dd816df95081711338e5921ab9a474c7f7ccc55e0/octodad.jpg" data-mid="50163131" border="0" data-scale="100" alt="Tankee video screen" data-caption="Tankee video screen" src="https://freight.cargo.site/w/1000/i/39629a221ae019068ec9fe9dd816df95081711338e5921ab9a474c7f7ccc55e0/octodad.jpg" />Tankee website https://kevincruz.work/URBANTECH-NYC Mon, 23 Apr 2018 21:45:54 +0000 Kevin Cruz https://kevincruz.work/URBANTECH-NYC INFO Designed at HD MADE Urbantech website Photography by Patrick Lyn URBANTECH NYC&nbsp; &nbsp; &nbsp; &nbsp; PROJECT Designed a site that connects and showcases NYC’s diverse urban tech ecosystem while defining what urban tech means to NYC. <img width="1276" height="896" width_o="1276" height_o="896" data-src="https://freight.cargo.site/t/original/i/9027b7d8118f29bbb3d03b28da57f9327dad00a0b8242ffb2067b312ea78837f/UT.jpg" data-mid="50215127" border="0" src="https://freight.cargo.site/w/1000/i/9027b7d8118f29bbb3d03b28da57f9327dad00a0b8242ffb2067b312ea78837f/UT.jpg" /> BACKGROUND Urbantech NYC, is an initiative of NYC&nbsp; created to promote and facilitate connections within the urban tech sector. <img width="1147" height="1056" width_o="1147" height_o="1056" data-src="https://freight.cargo.site/t/original/i/913e436c0f1fc6e06496acea67a204281d94e9b548fb1844ac114e60fb035cc8/Screen-Shot-2019-09-09-at-11.18.48-AM.png" data-mid="50203100" border="0" src="https://freight.cargo.site/w/1000/i/913e436c0f1fc6e06496acea67a204281d94e9b548fb1844ac114e60fb035cc8/Screen-Shot-2019-09-09-at-11.18.48-AM.png" /> SOLUTION Overall, we created a design that emphasizes the diversity of people involved and impacted by NYC’s urban tech efforts through custom photography and bold stats. We also created an ecosystem map that serves a dual purpose of showing potential investors the significance of the urban tech sector in NYC, while also allowing people in the urban tech space to connect with each other and find organizations with hiring opportunities.&nbsp; Urbantech website https://kevincruz.work/BEHAVIORAL-EVIDENCE-HUB Mon, 23 Apr 2018 21:45:53 +0000 Kevin Cruz https://kevincruz.work/BEHAVIORAL-EVIDENCE-HUB INFO designed&nbsp; at HD MADE bhub website BEHAVIORAL EVIDENCE HUB &nbsp; &nbsp; &nbsp; &nbsp; BACKGROUND HD MADE worked with ideas42 and Innovations for Poverty Action to create a hub of behavioral science “innovations” where users can explore scientifically tested strategies to use for their projects. BRANDING <img width="1540" height="851" width_o="1540" height_o="851" data-src="https://freight.cargo.site/t/original/i/b0704620d1e982478bb9ed95ebc261d4cde2151b28beb2c8dbb0c75ab687f8fa/Screen-Shot-2019-09-09-at-12.18.26-PM.png" data-mid="50211669" border="0" src="https://freight.cargo.site/w/1000/i/b0704620d1e982478bb9ed95ebc261d4cde2151b28beb2c8dbb0c75ab687f8fa/Screen-Shot-2019-09-09-at-12.18.26-PM.png" /> <img width="1189" height="329" width_o="1189" height_o="329" data-src="https://freight.cargo.site/t/original/i/09ac9deb0c12c4e0a1bcb1219e8f849f84f301361bb9d49ab046b8691dda2a5e/Screen-Shot-2019-09-09-at-12.18.19-PM.png" data-mid="50211670" border="0" src="https://freight.cargo.site/w/1000/i/09ac9deb0c12c4e0a1bcb1219e8f849f84f301361bb9d49ab046b8691dda2a5e/Screen-Shot-2019-09-09-at-12.18.19-PM.png" /> We designed a generative logo for a brand that is always changing.&nbsp;<img width="900" height="900" width_o="900" height_o="900" data-src="https://freight.cargo.site/t/original/i/d0e98b82789508b4bcc99975f1067dac84dcb76c3e6897e53b1ff5d2ca1c7f2d/B-bub-style-1.jpg" data-mid="62836832" border="0" src="https://freight.cargo.site/w/900/i/d0e98b82789508b4bcc99975f1067dac84dcb76c3e6897e53b1ff5d2ca1c7f2d/B-bub-style-1.jpg" /> Early style-tiles and design direction that helped guide the site design.&nbsp; SOLUTION We started by simplifying the user journey into 2 paths: 1) for users looking for behavioral solutions to a problem. 2) for users who have already arrived at a solution and want to optimize their process.&nbsp; The site helps to to bridge the research-practice gap by giving users a wide array of scientifically-tested behavioral science best practices and case studies to draw from. <img width="1276" height="896" width_o="1276" height_o="896" data-src="https://freight.cargo.site/t/original/i/e9eda9f2b79fb89bf44ab36136a7ff9c5b122eba1a10518f3d2298ec976cf16e/bhub.jpg" data-mid="50214538" border="0" src="https://freight.cargo.site/w/1000/i/e9eda9f2b79fb89bf44ab36136a7ff9c5b122eba1a10518f3d2298ec976cf16e/bhub.jpg" /> We also designed useful checklists to help users avoid common behavioral pitfalls in the designs of their programs and products. The end product was a robust resource hub and training center for those looking to develop behavioral science in their community. <img width="1280" height="1491" width_o="1280" height_o="1491" data-src="https://freight.cargo.site/t/original/i/9364939cd361f8df284019da35c1431ef7de1ac70be3f5b93db88a725ab3fb74/B-hub-Project-Detail.jpg" data-mid="62836834" border="0" src="https://freight.cargo.site/w/1000/i/9364939cd361f8df284019da35c1431ef7de1ac70be3f5b93db88a725ab3fb74/B-hub-Project-Detail.jpg" />bhub website https://kevincruz.work/NATIONAL-CAPACD Mon, 09 Sep 2019 15:45:54 +0000 Kevin Cruz https://kevincruz.work/NATIONAL-CAPACD INFO Designed at HD MADE National CAPACD website NATIONAL CAPACD&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; PROJECT Rebranded and repositioned National CAPACD to better communicate their message to new users and create more value for active members. <img width="1276" height="896" width_o="1276" height_o="896" data-src="https://freight.cargo.site/t/original/i/62702a80e26c87880310251f9f9275b64d4f4df0ec775a44f1e84611b0ccb735/natcapacd.jpg" data-mid="50220390" border="0" src="https://freight.cargo.site/w/1000/i/62702a80e26c87880310251f9f9275b64d4f4df0ec775a44f1e84611b0ccb735/natcapacd.jpg" /> BACKGROUND National Coalition for Asian Pacific American Community Development's (National CAPACD) is made of 100+ member organizations across the US. Their mission is to build racial and social justice by promoting the economic vitality and civic and political participation for the Asian Americans and Pacific Islanders. <img width="2947" height="1834" width_o="2947" height_o="1834" data-src="https://freight.cargo.site/t/original/i/86013c69cf6c8113615b2bc90acf5fa902d3e9414b0a7daebe9be6cb021a3619/capacd-design-direction.jpg" data-mid="62837413" border="0" src="https://freight.cargo.site/w/1000/i/86013c69cf6c8113615b2bc90acf5fa902d3e9414b0a7daebe9be6cb021a3619/capacd-design-direction.jpg" /> Early style-tiles and design direction that helped guide the design for the rest of the site.&nbsp; <img width="1547" height="520" width_o="1547" height_o="520" data-src="https://freight.cargo.site/t/original/i/26e8ae41d2209a2d8ca018a3e65228ba99a27fd2a16b831e88f0683326e17b4f/capacd-logo-directions.jpg" data-mid="62837560" border="0" src="https://freight.cargo.site/w/1000/i/26e8ae41d2209a2d8ca018a3e65228ba99a27fd2a16b831e88f0683326e17b4f/capacd-logo-directions.jpg" /> Early logo designs. National CAPACD wanted a modern, minimal, logo that represented the idea of “building a foundation”.&nbsp; SOLUTION We helped simplify and streamline National CAPACD’s message so it fits into three categories: policy &amp; advocacy, programs and data &amp; research. We also implemented a color coded system which distinguishes content into these three categories and helps create a better user experience. National CAPACD often has to act quickly by responding to administrative changes and encouraging users to take action. As a result, we designed a system that allows National CAPACD to feature time sensitive news stories, petitions, and events on their homepage. <img width="1280" height="2729" width_o="1280" height_o="2729" data-src="https://freight.cargo.site/t/original/i/e21f1b84c95c92b6d2708f78b4b175dec69449680c45533abe19e9792d8e4493/CAPACD-Home.jpg" data-mid="62837127" border="0" src="https://freight.cargo.site/w/1000/i/e21f1b84c95c92b6d2708f78b4b175dec69449680c45533abe19e9792d8e4493/CAPACD-Home.jpg" /> National CAPACD website https://kevincruz.work/SEAT-14C Mon, 09 Sep 2019 15:51:40 +0000 Kevin Cruz https://kevincruz.work/SEAT-14C INFO Designed at HD MADE Seat14c Website&nbsp; SEAT 14C&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; PROJECT As part of a partnership between ANA and XPRIZE we were tasked with designing a site that housed a collection of science fiction stories from known authors in the space. <img width="1930" height="1048" width_o="1930" height_o="1048" data-src="https://freight.cargo.site/t/original/i/f27742176d3d5cee945597ee849009ed7069a09e3eed6f07f323a1421f731f4b/xprize-design-direction.jpg" data-mid="62837826" border="0" src="https://freight.cargo.site/w/1000/i/f27742176d3d5cee945597ee849009ed7069a09e3eed6f07f323a1421f731f4b/xprize-design-direction.jpg" /> Early design direction that helped guide the site design. Although the design changed a bit, the overall idea of selecing a story from a passenger manifest remained.&nbsp; BACKGROUND Each story explores how global issues today would manifest and be addressed in the near future, and are told from the perspective of an ANA passenger who arrives in San Francisco only to discover that their flight has transported them 20 years in the future. The ultimate goal of these stories is to help guide real XPRIZE initiatives. <img width="1427" height="640" width_o="1427" height_o="640" data-src="https://freight.cargo.site/t/original/i/70c7da1e8f70191437a41b07ff646d322fd04324010e4fcc52cda60e50c0474f/Screen-Shot-2019-09-09-at-1.40.13-PM.png" data-mid="50217823" border="0" src="https://freight.cargo.site/w/1000/i/70c7da1e8f70191437a41b07ff646d322fd04324010e4fcc52cda60e50c0474f/Screen-Shot-2019-09-09-at-1.40.13-PM.png" /> SOLUTION To tie the narrative together, we created a video that puts users in the seat of the flight that travels through time. This narrative follows the user through to the index page, where users can click on a seat to view the passenger’s story and “reserve their seat” by submitting their own story. The site garnered over 1,300 user stories from 74 different countries, was featured on Wired, and won PR Daily’s Advocacy Campaign Award. <img width="1275" height="1088" width_o="1275" height_o="1088" data-src="https://freight.cargo.site/t/original/i/116d2588da6fdd05a1f2a6688ad6c6c2fb4b4f118698de3bbbc352224f9a3f84/Screen-Shot-2019-09-09-at-1.54.32-PM.png" data-mid="50218871" border="0" src="https://freight.cargo.site/w/1000/i/116d2588da6fdd05a1f2a6688ad6c6c2fb4b4f118698de3bbbc352224f9a3f84/Screen-Shot-2019-09-09-at-1.54.32-PM.png" />Seat14c Website https://kevincruz.work/BREAST-CANCER-RESEARCH-FOUNDATION Mon, 09 Sep 2019 15:58:38 +0000 Kevin Cruz https://kevincruz.work/BREAST-CANCER-RESEARCH-FOUNDATION INFO Designed at HD MADE BCRF website BREAST CANCER RESEARCH FOUNDATION&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; PROJECT BCRF wanted to refresh their brand and build a community of grassroots supporters that could join them in their fight against breast cancer.&nbsp; <img width="1276" height="896" width_o="1276" height_o="896" data-src="https://freight.cargo.site/t/original/i/d31a0afc3223ff3363d723fcaa8c64a4c67cbd81f98c6840fedd7b5650351e45/bcrf.jpg" data-mid="50212087" border="0" src="https://freight.cargo.site/w/1000/i/d31a0afc3223ff3363d723fcaa8c64a4c67cbd81f98c6840fedd7b5650351e45/bcrf.jpg" /> BACKGROUND BCRF provides critical funding for cancer research worldwide to fuel advances in tumor biology, genetics, prevention, treatment, metastasis and survivorship. Breast Cancer Research Foundation (“BCRF”) designed the pink ribbon that has become synonymous with breast cancer. <img width="1132" height="490" width_o="1132" height_o="490" data-src="https://freight.cargo.site/t/original/i/e029820a9b0e6266b54647a87965fd3b06c6e2bc691fe8ce2fa0e9764ffb4f98/Screen-Shot-2019-09-09-at-12.09.32-PM.png" data-mid="50215902" border="0" src="https://freight.cargo.site/w/1000/i/e029820a9b0e6266b54647a87965fd3b06c6e2bc691fe8ce2fa0e9764ffb4f98/Screen-Shot-2019-09-09-at-12.09.32-PM.png" />Some early logo directions - BCRF was leaning towards the bottom one, but ended up using that hexagon as a design element instead. &nbsp; SOLUTION We utilized Classy’s API to design a site that allowed BCRF to put their community of supporters at the forefront. The pages we designed allowed BCRF to elevate the people involved and effected by research through prominent photography and impactful stats. https://kevincruz.work/NHL Mon, 09 Sep 2019 16:03:10 +0000 Kevin Cruz https://kevincruz.work/NHL INFO Designed at HD MADE NHL&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; PROJECT Designed and animated unique ads for all things NHL. BACKGROUND NBC Sports knows their fans super well, from the games they love to their favorite players. This means that they needed help creating custom targeted ads for key games across many locations. <img width="1388" height="865" width_o="1388" height_o="865" data-src="https://freight.cargo.site/t/original/i/05aeadef3df40a7bc42aac8adc589540a28eedfb25333fad8fca016e9919d61c/Screen-Shot-2019-09-09-at-12.10.19-PM.png" data-mid="50210784" border="0" src="https://freight.cargo.site/w/1000/i/05aeadef3df40a7bc42aac8adc589540a28eedfb25333fad8fca016e9919d61c/Screen-Shot-2019-09-09-at-12.10.19-PM.png" /> The look and feel for each set of ads and social posts was pretty diverse.&nbsp; SOLUTION For big games like the All Star games in Florida, and the Stadium Series in the Annapolis Military Stadium, we created sets of animated ads that invoke the feeling of the unique locations. <img width="600" height="73" width_o="600" height_o="73" data-src="https://freight.cargo.site/t/original/i/c880f2c949fc30dfdaa3f354937578718d2a7c55471311340d8ae3b2cb224cbc/winderclasic-nhl-ad.gif" data-mid="50493436" border="0" src="https://freight.cargo.site/w/600/i/c880f2c949fc30dfdaa3f354937578718d2a7c55471311340d8ae3b2cb224cbc/winderclasic-nhl-ad.gif" /> One of many animated banner ads. <img width="1200" height="1200" width_o="1200" height_o="1200" data-src="https://freight.cargo.site/t/original/i/535d5f4e6785640da6746eafa9a16c412f2992de73c2575c1c543a37496807e1/Flames-vs-Avalanche-1.jpg" data-mid="50218560" border="0" src="https://freight.cargo.site/w/1000/i/535d5f4e6785640da6746eafa9a16c412f2992de73c2575c1c543a37496807e1/Flames-vs-Avalanche-1.jpg" /> One of many social posts.&nbsp; In total we designed over 300 animated ads and posts or key games throughout the year. Also Justin Timberlake retweeted one of our social posts where we replaced him with a horse – so that was pretty cool! &nbsp; https://kevincruz.work/Klutch Mon, 09 Sep 2019 17:37:54 +0000 Kevin Cruz https://kevincruz.work/Klutch INFO Designed at Player2 Klutch Website KLUTCH &nbsp; &nbsp; &nbsp; &nbsp; PROJECTCreate branding for Klutch to help them stand out in the crowded aim-trainer space while remaining appealing to a non-gamer aucience.&nbsp; &nbsp; BACKGROUND Klutch is made up of neuroscientists, data scientists, and other types of people who are smarter than me. They’re are all dedicated to helping gamers improve their game! <img width="2046" height="921" width_o="2046" height_o="921" data-src="https://freight.cargo.site/t/original/i/bc29efcf96b2605fb667958103704f922bcaa515febb01d2999459cd7b32e345/klutch-concepts.jpg" data-mid="62839159" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/bc29efcf96b2605fb667958103704f922bcaa515febb01d2999459cd7b32e345/klutch-concepts.jpg" /> Early logo concepts showing how we could apply the Klutch brand to various sub-brands.&nbsp; <img width="2282" height="804" width_o="2282" height_o="804" data-src="https://freight.cargo.site/t/original/i/a72ed5520a7e10392783e12d8966188f290b09450e6474d7e33ada8379578012/klutch-logos.jpg" data-mid="62840274" border="0" src="https://freight.cargo.site/w/1000/i/a72ed5520a7e10392783e12d8966188f290b09450e6474d7e33ada8379578012/klutch-logos.jpg" />Final logo variations SOLUTION We worked with a bright palette to help Klutch stand out in a space full of black, red and crosshairs.&nbsp; <img width="1196" height="2089" width_o="1196" height_o="2089" data-src="https://freight.cargo.site/t/original/i/90557444accc6c916a9f41ad764d0793b8bd7dfbc665fe5d8467b907427cc946/klutch-stationary.jpg" data-mid="62839330" border="0" src="https://freight.cargo.site/w/1000/i/90557444accc6c916a9f41ad764d0793b8bd7dfbc665fe5d8467b907427cc946/klutch-stationary.jpg" /> The final branding was bold, geometric, and energetic – engaging gamers and non-gamers alike. <img width="2560" height="2912" width_o="2560" height_o="2912" data-src="https://freight.cargo.site/t/original/i/55e6254852e19522cc20df0105ad5986f88f0f54bc161a2e80eb4e1163ac5ad4/klutch-site.jpg" data-mid="62839104" border="0" src="https://freight.cargo.site/w/1000/i/55e6254852e19522cc20df0105ad5986f88f0f54bc161a2e80eb4e1163ac5ad4/klutch-site.jpg" /> Branding in action on the&nbsp;Klutch Website (website not designed by me)