https://www.juanperegrina.com/experience daily 0.75 2026-01-03 https://www.juanperegrina.com/about daily 0.75 2025-08-07 https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/87252388-891a-496f-8cd4-9cf1801573de/IMG_1324+3.png https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1729006483982-DG8KWOKXCCTNJRW7HCPY/image-asset.jpeg https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/63d092e0-4633-4b2f-a859-57c503d5431e/Cover%2BMake%2Bit%2BStick.jpg https://www.juanperegrina.com/contact daily 0.75 2025-03-05 https://www.juanperegrina.com/video daily 0.75 2024-10-18 https://www.juanperegrina.com/work daily 1.0 2025-03-12 https://www.juanperegrina.com/work/dirtyjuan-t5hes-j98cd-ah7g5-cjb5t monthly 0.5 2021-03-05 https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298536-ATZ8J7H778I9WQ28779I/41.jpg WORK - DIRTY JUAN- typeface https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298541-DARLXI7CLT35LIQH64H3/IMG_7734.PNG WORK - DIRTY JUAN- typeface https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298546-PQV3BKQ5DLJDU6GZ7I05/Screen+Shot+2021-01-08+at+11.44.07+AM.png WORK - DIRTY JUAN- typeface - Setting up my Illustrator file. Since the key purpose of this font was to create an organic feel, it made sense to start with big hand-drawn letters. I had to start with guides for consistency. This is when I started to scan my letters and started using the pen tool to build the letters. I learned that the less points the better. https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298556-46KX7JJJCOTBAKRBNHRZ/60437536210__BC77883B-C7CB-4629-8F35-50450CDD4CB3.JPG WORK - DIRTY JUAN- typeface - The beginning wasn’t so great but that’s okay! At the start I was having a hard time understanding how to reuse letters to make new once. https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298561-EYMR9EM5ZRJEPYCZ0Y5R/Screen+Shot+2021-01-08+at+12.18.37+PM.png WORK - DIRTY JUAN- typeface - Using Glyphs App for the first time I learned how to set up an Illustrator File for Glyphs App To make the transfer to Glyphs App easier later, I realized it's best to set up your Illustrator file so that you can quickly copy and paste each glyph. https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298566-HRRJ5ZBOHZJ887PUCXCH/Screen+Shot+2020-05-19+at+3.44.19+PM.png WORK - DIRTY JUAN- typeface https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298572-VO1OGOJW42XAF2F3QVLJ/Screen+Shot+2020-05-19+at+8.47.13+PM.png WORK - DIRTY JUAN- typeface https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298577-R2ILJC458O732EDMOJZ5/Screen+Shot+2020-05-19+at+3.44.19+PM.png WORK - DIRTY JUAN- typeface https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298589-PZCH6L5AAYHZTECLKJ0V/Screen+Shot+2020-05-19+at+8.42.02+PM.png WORK - DIRTY JUAN- typeface SYMBOLS https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298584-VCTVK32VKK2V89Z2XRRD/Screen+Shot+2020-05-19+at+8.54.33+PM.png WORK - DIRTY JUAN- typeface LATIN CHARACTERS https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298720-RVOIH10O0NX2KLDDSDIR/02.jpg WORK - DIRTY JUAN- typeface https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298827-WTK9SR73LD3XW9IJS8AI/02.jpg WORK - DIRTY JUAN- typeface https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298688-KDINGQJ1OGOL1X4LJUNM/k-181-eye-0090-l.jpg WORK - DIRTY JUAN- typeface https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298697-MEPRARLJMI7RWEV8ET3S/Tote-Bag-Fabric-Mockup-Vol4.jpg WORK - DIRTY JUAN- typeface https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298791-2MI0Z62D03BP63VB8XAJ/41.jpg WORK - DIRTY JUAN- typeface https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298674-JUCDIGQO18V0Y6SKWD9U/Mockup.jpg WORK - DIRTY JUAN- typeface https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298709-3W07HR71SY0NADMWVLDP/bulbfish-free-craft-bag-mockup.jpg WORK - DIRTY JUAN- typeface https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298728-7I01A5682HQ2UDV5NE3Z/41.jpg WORK - DIRTY JUAN- typeface https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298758-92L0ILS46QDM36QFLAHQ/bulbfish-free-craft-bag-mockup.jpg WORK - DIRTY JUAN- typeface https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298838-5FVU1PAFTFKJYAJ8J6YH/image-from-rawpixel-id-540956-original.jpg WORK - DIRTY JUAN- typeface https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298819-ZG2GPHMRBX6R3V9MKHL2/k-181-eye-0090-l.jpg WORK - DIRTY JUAN- typeface https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298802-J77P9KGCF4O80AE7XLCD/Mockup.jpg WORK - DIRTY JUAN- typeface https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298811-4161OBJ4B7VATOT3EBCQ/Pizza-Box-Mockup-Presentation.jpg WORK - DIRTY JUAN- typeface https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298782-UG29O53P03PQ4SHK6MYT/Screen+Shot+2020-05-19+at+2.14.45+PM.png WORK - DIRTY JUAN- typeface https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298768-UEB6F55Q8AJV0H4ZMUVI/Tote-Bag-Fabric-Mockup-Vol4.jpg WORK - DIRTY JUAN- typeface https://www.juanperegrina.com/work/reel2020-58k5c-977na-xexwt-amtgs monthly 0.5 2023-11-28 https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298303-UAEAZ9705OBEAQFW14QO/Screen+Shot+2021-01-04+at+1.09.29+PM.png WORK - REEL- motion https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298307-6644E80VG2QE9Q2LSRP4/Screen+Shot+2021-01-04+at+1.11.30+PM.png WORK - REEL- motion https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298311-MC3MQHB4T2IMS7H70Z2P/Untitled_Artwork.png WORK - REEL- motion https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298319-704FMZZLRBATSDFG7CSE/parkedpaws_me.jpg WORK - REEL- motion https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298324-PRHZDB182BZXSJIZDBCD/smartmockups_ki5fxkrz.gif WORK - REEL- motion - Creating from scratch Timing, Spacing, and Rhythm Eases Mass & Weight Anticipation Arcs Squash, Stretch & Smears Follow Through & Overlapping Action Exaggeration Secondary and Layered Animation Appeal https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298329-KEFDP92R4V79J84TXY6B/8e68d87dd1c31ed60ebb4c.jpg WORK - REEL- motion - Creating a smooth animation. Eases are graphs we use to animate the rates of change for different properties. https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298335-YUZ01MDG4PXR7YINRLK3/_AE_screenshot_.png WORK - REEL- motion https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298342-749ESG20GLS7DD2J921X/Screen+Shot+2021-01-04+at+1.30.44+PM.png WORK - REEL- motion https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298346-T92L1TRS6V2381PRRA0Z/Screen+Shot+2021-01-04+at+1.35.39+PM.png WORK - REEL- motion https://www.juanperegrina.com/work/dinero-xn5xl-4t4mb-sgj38-bn6zh monthly 0.5 2021-03-06 https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298881-R53Z9DB1B9ZO5ZNJUAWO/Group+333.png WORK - DINERO- UI challenge https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298887-0GZLDOQ99I782RMQBUKQ/smartmockups_klrkd8u2.jpg WORK - DINERO- UI challenge https://www.juanperegrina.com/work/harryanddavid-x6xmw-dez56-73xcl-ga2rt monthly 0.5 2023-01-25 https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298227-87FVJI2EX1L0JGFOJ8SM/Group+1.png WORK - HARRY AND DAVID- UX https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298232-NPHUTRZ1WLZ70E3E22P7/IMG_0294.JPG WORK - HARRY AND DAVID- UX https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298239-VX6RZKGZUKTX3SXABUM8/IMG_3805.JPG WORK - HARRY AND DAVID- UX https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298243-DLN9EKIXE33JJSRR1J45/Frame+4+%282%29.png WORK - HARRY AND DAVID- UX - Discover When starting a project, I first go talk to people. Who worked on this before? Are there any existing research done? Who has user data on this? Who should know I am working on this? When I have some hypotheses, I would start looking at competitors and conduct my own research. https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298248-XDDKXVGVD2Y8W3T3FLHX/Frame+5+%282%29.png WORK - HARRY AND DAVID- UX - Define Very often we get a brief describing the problem on a surface level. We usually spend some time to peel back and define what we should really try to achieve. https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298254-U79KNJ8AVBN1WDEXB6YL/Frame+8+%281%29.png WORK - HARRY AND DAVID- UX - Design After a few quick flow sketches, I usually dive into the component libraries to see if any established design pattern solve the problem. Every other day, I share progress with other designers to gather feedback. Figma prototype was frequently used to do quick tests on usertesting.com. On a need basis, researchers would help with recruiting to conduct in-person studies. https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298259-LFDD0YZLJICXPBU9DMXY/Web+Workflow+%282%29.png WORK - HARRY AND DAVID- UX - Deliver Figma files were branched and Sent out to the Dev team. Design process was documented on Figma and Miro with links to research and testing results. https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298263-SET80X1V7DD6ICPF0VEG/Screen+Shot+2021-01-03+at+10.55.33+AM.png WORK - HARRY AND DAVID- UX https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298277-S89DI5R7Y57S63FC438W/Screen+Shot+2020-11-19+at+6.43.41+PM.png WORK - HARRY AND DAVID- UX https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298268-U3D6Y9B0PU0869425U1T/Screen+Shot+2020-11-19+at+6.30.54+PM.png WORK - HARRY AND DAVID- UX Making user aware red is our CTA all through out the cite. https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298282-4SO8HCAXW1329FPH1VHL/Frame+2.png WORK - HARRY AND DAVID- UX https://www.juanperegrina.com/work/peloton-az9a4-gpgfr-6fddw-kmmxj monthly 0.5 2023-12-05 https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298917-J7ZF6HX6912DRL98UUM2/Peloton_Meta_Image.png WORK - PELOTON- product design https://www.juanperegrina.com/work/apple monthly 0.5 2025-02-05 https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/a866321f-fc88-4c69-8f30-65baaabf9701/3.png WORK - APPLE- visual design https://www.juanperegrina.com/work/gorecycle-pmmzw-yb5xc-a2dth-jfnws monthly 0.5 2021-03-18 https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298370-QRTZBSPDCOICK0DR4EEO/Group+209.png WORK - GORECYCLE- UX https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298381-XAW50MPQ9TKB6XYIVSPL/Frame+21.png WORK - GORECYCLE- UX https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298386-NE3JRX0FRGTPPLH2B2W8/Frame+13.png WORK - GORECYCLE- UX https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298392-1LD1OYSHTDLQO03DGJFH/Group+109.png WORK - GORECYCLE- UX https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298396-YSNYZNJHWS0QPVM3W031/image+92.png WORK - GORECYCLE- UX https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298402-HMAOS57Y6Z1FJV2TF7X5/Frame+18.png WORK - GORECYCLE- UX https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298406-VLPHUFNZOFN8K6K4GIOQ/dew.png WORK - GORECYCLE- UX https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298411-GDV9U12J5QZ9UPW38CVH/sd.png WORK - GORECYCLE- UX https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298416-O33BYQMKHL4L9OW3VZHP/gorec.png WORK - GORECYCLE- UX https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298420-VHMD46808PYVHEJNI4WO/storyboard.png WORK - GORECYCLE- UX https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298427-BBZXCX7W5ZSO4B5IUMLN/z.png WORK - GORECYCLE- UX https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298433-GNWTGVN3RWIDTUXN7CRZ/seeeeeee.png WORK - GORECYCLE- UX https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298437-8IXO0Y9EZ1ZN926ZWHR7/userfl.png WORK - GORECYCLE- UX https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298442-9CL29ST7B42Q660A3WNP/awire.png WORK - GORECYCLE- UX https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298448-T48Q1EGD9GB09XA8WTN9/c1.png WORK - GORECYCLE- UX https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298452-VOAF1F6GUOFA1WCXQ6EW/c2.png WORK - GORECYCLE- UX https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298456-0GYV5PBAS9NO9EWMK2DV/03.png WORK - GORECYCLE- UX https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298460-A454DSG1LSKHYJHASNCF/workdlfow.png WORK - GORECYCLE- UX https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298464-MJQB4FNAQ3UJQUK6F7TO/functions.png WORK - GORECYCLE- UX https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298472-G5NJM8I79CZGEQQ0KSWW/usa.png WORK - GORECYCLE- UX https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298480-P1ZKE83GZE56UXFGAWKA/Screen+Shot+2020-12-16+at+10.45.38+AM.png WORK - GORECYCLE- UX https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298484-YC28ZFRN633K40B1S01B/Colors.png WORK - GORECYCLE- UX https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298489-2SPY1M0YL9G74WMY46JI/Icon.png WORK - GORECYCLE- UX https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298493-1WJ0PWFR5Z3TB0RNLR3W/Headings.png WORK - GORECYCLE- UX https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298497-GAVQ3QN42L530BZPWR86/Grid+system.png WORK - GORECYCLE- UX https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298506-MIJ1RDHPTSNU036BT4G6/ezgif.com-gif-maker+%281%29.gif WORK - GORECYCLE- UX - Making the onboarding fun and informative. Quick Motion Start Testers were excited when seeing a fun little animation when loading the prototype, this caused the user to look forward to using the app. https://images.squarespace-cdn.com/content/v1/61e0b0de0f8afa2b998c2d9c/1642115298510-TTR0GHTNI2MR9HM13IXM/asww.png WORK - GORECYCLE- UX - Identifying users location feelings Turn on location vs manual Testers were a mix of people who don’t like sharing their location with apps and others who didn’t care and tend to click the allow one or allow only when using the app. https://www.juanperegrina.com/work/lithiamotors-ykemw-pea8y-ectr4-zeeyw monthly 0.5 2021-08-18