https://jaimepatino.com jaimepatino Tue, 05 Mar 2024 00:09:36 +0000 https://jaimepatino.com en https://jaimepatino.com/New-York-Review-of-Books Thu, 06 Jan 2022 03:24:33 +0000 jaimepatino https://jaimepatino.com/New-York-Review-of-Books The New York Review of Books The Review has been considered by many to be the “premier literary-intellectual magazine in the English language” but their digital presence was lagging. We updated the Reviews website to appeal to a new audience while staying close to their heritage.&nbsp;Designed at AthleticsWebsite:&nbsp;nybooks.com Role: UX, UI, Interaction and system design Recognition: 2021&nbsp;Webby winner <img width="4000" height="2750" width_o="4000" height_o="2750" data-src="https://freight.cargo.site/t/original/i/b8ffc58fa7a34fec4695f9b7c1428d2d711cb56b73e34d3b70d32aa57fb54156/Tablet-Mock-up.jpg" data-mid="129181755" border="0" src="https://freight.cargo.site/w/1000/i/b8ffc58fa7a34fec4695f9b7c1428d2d711cb56b73e34d3b70d32aa57fb54156/Tablet-Mock-up.jpg" /> Big pictureWorking closely with the editors and content managers, we redesign the website experience to include a new modular approach for both the homepage and lander pages. This approach gave content managers a dynamic way to build pages and tell stories. We also designed unique templates for different types of article pages. With multiple templates, editors have the freedom to highlight and elevate different stories.&nbsp; Lastly, Within our digital system, we developed unique modules to surface other content like books, archive content, and quotes. <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/5314b3dce68c30942fa7988d8bd83600976e61bc1afb1fa336e180714d8831f3/NYRev_landers.jpg" data-mid="129181761" border="0" src="https://freight.cargo.site/w/1000/i/5314b3dce68c30942fa7988d8bd83600976e61bc1afb1fa336e180714d8831f3/NYRev_landers.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/d7bfc468776785e5dbc88c9bd730a07631035f5c311d1b017fdda040fe89f930/NYRev_Articles.jpg" data-mid="129181760" border="0" src="https://freight.cargo.site/w/1000/i/d7bfc468776785e5dbc88c9bd730a07631035f5c311d1b017fdda040fe89f930/NYRev_Articles.jpg" /> UX strategy We began defining the website experience by outlining site and client goals based on stakeholder interviews. We then took those findings and ran workshops to determine taxonomy and website features. After collecting findings from the workshops, we began defining sitemap, wireframes, and prototyping key pages and website features like navigation and archive collections. <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/39b1e01fa5146e2be10fb928d1ff61443e917e5da01f38ed2ae01b1ff34e0e2b/NYRB_UX_1.jpg" data-mid="129185008" border="0" src="https://freight.cargo.site/w/1000/i/39b1e01fa5146e2be10fb928d1ff61443e917e5da01f38ed2ae01b1ff34e0e2b/NYRB_UX_1.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/813bdc0ab01fdd8fd16b01eea4c86819580ea9f119cec1e7985cd333947d2c61/NYRB_UX_2.jpg" data-mid="129185009" border="0" src="https://freight.cargo.site/w/1000/i/813bdc0ab01fdd8fd16b01eea4c86819580ea9f119cec1e7985cd333947d2c61/NYRB_UX_2.jpg" /> Visual systemOur visual system brings the heritage of The Review to the forefront by embracing their signature font, Giza. We used it for headlines and titles. We also found a complimentary font, Ivar, for body copy. The color system is another way of bringing the heritage of the Review to the digital experience. The colors we chose came from old magazine covers, we then created color pairs that could work in different color combinations alongside illustrations and photography. <img width="1800" height="2025" width_o="1800" height_o="2025" data-src="https://freight.cargo.site/t/original/i/adc6ecc82275412822de575871c77d88639549e6b680678b855cafbd0d4cbd85/UI-System.jpg" data-mid="129182338" border="0" src="https://freight.cargo.site/w/1000/i/adc6ecc82275412822de575871c77d88639549e6b680678b855cafbd0d4cbd85/UI-System.jpg" /> <img width="1800" height="1012" width_o="1800" height_o="1012" data-src="https://freight.cargo.site/t/original/i/abdebcf13796a6e88499c3b217674f781a58d9c6a18be650f09fede1f2160941/red-blue.jpg" data-mid="129181999" border="0" src="https://freight.cargo.site/w/1000/i/abdebcf13796a6e88499c3b217674f781a58d9c6a18be650f09fede1f2160941/red-blue.jpg" /> <img width="1800" height="1012" width_o="1800" height_o="1012" data-src="https://freight.cargo.site/t/original/i/1fe744768253c0e247d117449f26823e927e83f78176a1f8298a446080436f47/Blue-green.jpg" data-mid="129181996" border="0" src="https://freight.cargo.site/w/1000/i/1fe744768253c0e247d117449f26823e927e83f78176a1f8298a446080436f47/Blue-green.jpg" /> <img width="1800" height="1012" width_o="1800" height_o="1012" data-src="https://freight.cargo.site/t/original/i/1fcb5bb4493dab3dc073d06d66a761e448bd38d9c0946df88135787f967a947b/Yellow-green.jpg" data-mid="129182001" border="0" src="https://freight.cargo.site/w/1000/i/1fcb5bb4493dab3dc073d06d66a761e448bd38d9c0946df88135787f967a947b/Yellow-green.jpg" /> <img width="1800" height="1012" width_o="1800" height_o="1012" data-src="https://freight.cargo.site/t/original/i/87d9cfc0f183390ffc9bb343c573a116439708affa145087d20a29c833679610/Orange-Blue.jpg" data-mid="129181998" border="0" src="https://freight.cargo.site/w/1000/i/87d9cfc0f183390ffc9bb343c573a116439708affa145087d20a29c833679610/Orange-Blue.jpg" /> <img width="1800" height="1012" width_o="1800" height_o="1012" data-src="https://freight.cargo.site/t/original/i/7a5291faf5ca1a8238fee45561725d4fb142819754b999e17076d6c79099f428/Yellow-red.jpg" data-mid="129182002" border="0" src="https://freight.cargo.site/w/1000/i/7a5291faf5ca1a8238fee45561725d4fb142819754b999e17076d6c79099f428/Yellow-red.jpg" /> <img width="1800" height="1012" width_o="1800" height_o="1012" data-src="https://freight.cargo.site/t/original/i/c297a902bf5ed51d4573927477b169caeda84d3ca963bd4b676550bd027a4093/Yellow-blue.jpg" data-mid="129182000" border="0" src="https://freight.cargo.site/w/1000/i/c297a902bf5ed51d4573927477b169caeda84d3ca963bd4b676550bd027a4093/Yellow-blue.jpg" /> <img width="1800" height="1012" width_o="1800" height_o="1012" data-src="https://freight.cargo.site/t/original/i/7689b9d170d1c5591bf7617718a9b45b268875087622d177581daf3b66c60162/Light-blue-green.jpg" data-mid="129181997" border="0" src="https://freight.cargo.site/w/1000/i/7689b9d170d1c5591bf7617718a9b45b268875087622d177581daf3b66c60162/Light-blue-green.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/d24f9124bb2de29cdafe877ee8fd62a1274a8102ba4d26a09d8368ded3aa3bbc/Cover_5.jpg" data-mid="129182574" border="0" src="https://freight.cargo.site/w/1000/i/d24f9124bb2de29cdafe877ee8fd62a1274a8102ba4d26a09d8368ded3aa3bbc/Cover_5.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/16780f3fdaa52d6373d7fc6ffab325a04526034438f4c561a06a7a07b4f00061/Cover_4.jpg" data-mid="129182570" border="0" src="https://freight.cargo.site/w/1000/i/16780f3fdaa52d6373d7fc6ffab325a04526034438f4c561a06a7a07b4f00061/Cover_4.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/1c67c3a3d985d82163863b2d663d6ee6b3dd339381ca7d824d00f667619e7d9c/Cover_3.jpg" data-mid="129182564" border="0" src="https://freight.cargo.site/w/1000/i/1c67c3a3d985d82163863b2d663d6ee6b3dd339381ca7d824d00f667619e7d9c/Cover_3.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/884940b457f47a71171f1d1e0ddafc214f0dffec19c839b1c8b85d0ad8c21986/Cover_2.jpg" data-mid="129182563" border="0" src="https://freight.cargo.site/w/1000/i/884940b457f47a71171f1d1e0ddafc214f0dffec19c839b1c8b85d0ad8c21986/Cover_2.jpg" /> Content modulesWithin the larger modular system, we developed a set of dynamic content modules that give the editorial team freedom to craft unique stories across the homepage and lander pages. These modules work in different combinations and can be grouped as content collections. <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/db0954730e53a129c40896e20ecdc78848c3986bf9803480aae78e01ad354fad/Two-modules.jpg" data-mid="129182899" border="0" src="https://freight.cargo.site/w/1000/i/db0954730e53a129c40896e20ecdc78848c3986bf9803480aae78e01ad354fad/Two-modules.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/cc1e5c19b036c79048e34a181dbd8f3e29d911b1beeb8fa4040b805025ecb52b/Three-modules.jpg" data-mid="129182898" border="0" src="https://freight.cargo.site/w/1000/i/cc1e5c19b036c79048e34a181dbd8f3e29d911b1beeb8fa4040b805025ecb52b/Three-modules.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/bb61cd06b7e6ccf295e18414bf93f0c7fd55ac441f9b90aabebc27e9761a2b10/Four-modules.jpg" data-mid="129182896" border="0" src="https://freight.cargo.site/w/1000/i/bb61cd06b7e6ccf295e18414bf93f0c7fd55ac441f9b90aabebc27e9761a2b10/Four-modules.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/02e2bbee85f4ce3d3cfac75721696c63b158dd6be03fe90de71b47c61e455c0e/Large-Text-Module.jpg" data-mid="129182897" border="0" src="https://freight.cargo.site/w/1000/i/02e2bbee85f4ce3d3cfac75721696c63b158dd6be03fe90de71b47c61e455c0e/Large-Text-Module.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/7521cb2a51c9d775071d259000057e867efb2ce93e2684875f04fec0b496c270/Content-Collections_1.jpg" data-mid="129182875" border="0" src="https://freight.cargo.site/w/1000/i/7521cb2a51c9d775071d259000057e867efb2ce93e2684875f04fec0b496c270/Content-Collections_1.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/07bfb703f7a3d7f267587473166ff1230ac52d0c25ed86bad2e46c992e8a93de/Content-Collections_3.jpg" data-mid="129182877" border="0" src="https://freight.cargo.site/w/1000/i/07bfb703f7a3d7f267587473166ff1230ac52d0c25ed86bad2e46c992e8a93de/Content-Collections_3.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/bbc3959e5d4f2f7951b6c7ce52fcf41a246702066bc44478548f3d34df67770a/Content-Collections_2.jpg" data-mid="129182876" border="0" src="https://freight.cargo.site/w/1000/i/bbc3959e5d4f2f7951b6c7ce52fcf41a246702066bc44478548f3d34df67770a/Content-Collections_2.jpg" /> Content strategyWe helped the editorial team with a new content architecture, one that makes them lead with the topics they review and write about. The new structure helped streamline the main site navigation, giving the new users a better way to navigate the website. <img width="4000" height="3000" width_o="4000" height_o="3000" data-src="https://freight.cargo.site/t/original/i/af4dfdbbe2ee01918f9a48d499e1f3d46ef795bbb3b45abf262ed0acfbf6a68a/Mobile_Content-Categories.jpg" data-mid="129183515" border="0" src="https://freight.cargo.site/w/1000/i/af4dfdbbe2ee01918f9a48d499e1f3d46ef795bbb3b45abf262ed0acfbf6a68a/Mobile_Content-Categories.jpg" /> <img width="1800" height="2025" width_o="1800" height_o="2025" data-src="https://freight.cargo.site/t/original/i/8043e09e414330685fa06aa5cd4860496d58119ee26669147c17d8a1a85ba755/Content-Modules_v01.jpg" data-mid="129182333" border="0" src="https://freight.cargo.site/w/1000/i/8043e09e414330685fa06aa5cd4860496d58119ee26669147c17d8a1a85ba755/Content-Modules_v01.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/51c195fb6acef70cede81b5a333214e23b16d2a31b531f3f7111aae00517c30d/NYRev_LanderElements.jpg" data-mid="129183645" border="0" src="https://freight.cargo.site/w/1000/i/51c195fb6acef70cede81b5a333214e23b16d2a31b531f3f7111aae00517c30d/NYRev_LanderElements.jpg" /> <img width="1800" height="2025" width_o="1800" height_o="2025" data-src="https://freight.cargo.site/t/original/i/04b5a1731d958e7ea4b2bc14c42ca85f0d61362cba8e5578a90a3a9e9f49ebda/Content-Modules_v02.jpg" data-mid="129182336" border="0" src="https://freight.cargo.site/w/1000/i/04b5a1731d958e7ea4b2bc14c42ca85f0d61362cba8e5578a90a3a9e9f49ebda/Content-Modules_v02.jpg" /> Issues &amp; ArchiveWe wanted to bring old issues and archive content higher in the content hierarchy. We redesigned the issues lander to be more user-friendly and easy to search for older magazines. We also created an archive lander where editors can curate unique stories using archive content.&nbsp; Another way we surfaced archive content was by creating an issues module on the homepage that highlights current issues and drives traffic into the issues lander. <img width="6400" height="4400" width_o="6400" height_o="4400" data-src="https://freight.cargo.site/t/original/i/dced1bc3484994427eb7664393edb25052839c5f85d1bab3ad373716b8e8f1e9/Archive-Lander_iPad-MOck-up.jpg" data-mid="129183747" border="0" src="https://freight.cargo.site/w/1000/i/dced1bc3484994427eb7664393edb25052839c5f85d1bab3ad373716b8e8f1e9/Archive-Lander_iPad-MOck-up.jpg" /> <img width="6400" height="4400" width_o="6400" height_o="4400" data-src="https://freight.cargo.site/t/original/i/69e7d6a4fdb4d7101b37870b3fdaa3a53e6dceeac73fd428411155aaf4cee303/Archive-Lander-Hover_iPad-MOck-up.jpg" data-mid="129183748" border="0" src="https://freight.cargo.site/w/1000/i/69e7d6a4fdb4d7101b37870b3fdaa3a53e6dceeac73fd428411155aaf4cee303/Archive-Lander-Hover_iPad-MOck-up.jpg" /> <img width="6400" height="4400" width_o="6400" height_o="4400" data-src="https://freight.cargo.site/t/original/i/a4ccb23feebd018277122f8109e3b0a07b8adec2d5cec161ee92d1df0f817851/Archive-issue_iPad-MOck-up.jpg" data-mid="129183746" border="0" src="https://freight.cargo.site/w/1000/i/a4ccb23feebd018277122f8109e3b0a07b8adec2d5cec161ee92d1df0f817851/Archive-issue_iPad-MOck-up.jpg" /> Athletics project teamPartner: Jameson ProctorProject Manager:&nbsp;Kathryn FarwellDesigners: Allison Connell &amp; Jaime Patino-CalvoStrategists: Mila Linares &amp; Jesse PoeDevelopers: Ross Luebe &amp; Britton Walker https://jaimepatino.com/Van-Cleef-Arpels Wed, 21 Feb 2024 23:26:11 +0000 jaimepatino https://jaimepatino.com/Van-Cleef-Arpels Van Cleef &amp; Arpels Van Cleef &amp; Arpels has been making jewelry for more than 100 years, and its extensive archive documents all of it dating back to 1906. They asked if we could pitch ideas about turning their physical archive into a digital experience.&nbsp;Design in&nbsp;Collaboration with Decimal Studio. Role: Visual and interaction design <img width="2560" height="1760" width_o="2560" height_o="1760" data-src="https://freight.cargo.site/t/original/i/7711c3b5816086354fbb3eb406c0b27928d17176c735fa9442633f20cf2c0361/VC_Hero-mock-up.jpg" data-mid="205177098" border="0" src="https://freight.cargo.site/w/1000/i/7711c3b5816086354fbb3eb406c0b27928d17176c735fa9442633f20cf2c0361/VC_Hero-mock-up.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/da2a8e843ab23d254a4cace6686228fca90d878c957c606194040046d23a2790/VC_UX-1.jpg" data-mid="205177131" border="0" src="https://freight.cargo.site/w/1000/i/da2a8e843ab23d254a4cace6686228fca90d878c957c606194040046d23a2790/VC_UX-1.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/48c8cf516ed8749217e367b20e28f4d607121617e40f6dc19bf3e2b283bb0fd0/VC_UX-2.jpg" data-mid="205177148" border="0" src="https://freight.cargo.site/w/1000/i/48c8cf516ed8749217e367b20e28f4d607121617e40f6dc19bf3e2b283bb0fd0/VC_UX-2.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/f612ff84a422e4bec078854ec20a84bebfb6417132ec6a29b2295839c6944c7c/VC_UX-3.jpg" data-mid="205177150" border="0" src="https://freight.cargo.site/w/1000/i/f612ff84a422e4bec078854ec20a84bebfb6417132ec6a29b2295839c6944c7c/VC_UX-3.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/84d19267c642c301f04781b651137f5173fe60108d418ad6030d56dfd675dea8/VC_UX-4.jpg" data-mid="205177151" border="0" src="https://freight.cargo.site/w/1000/i/84d19267c642c301f04781b651137f5173fe60108d418ad6030d56dfd675dea8/VC_UX-4.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/8b0fb372d11d88f4c7c9d463af07bc908928ea3e4abac92bcc622fc1e0b57a3d/VC_UX-5.jpg" data-mid="205177152" border="0" src="https://freight.cargo.site/w/1000/i/8b0fb372d11d88f4c7c9d463af07bc908928ea3e4abac92bcc622fc1e0b57a3d/VC_UX-5.jpg" /> User experienceThe archive content is vast. The main content encompasses the history of Van Cleef in a timeline manner; the artifacts are also presented in a timeline context, but through search, users can explore the artifacts, drill down, and go deeper into the content. With that in mind, we created an experience where users could seamlessly go between editorial content, artifact timeline, and search. Threading the needle between these three areas was vital to speaking to our three types of users: Customers, Collectors, and Researchers. <img width="2880" height="1620" width_o="2880" height_o="1620" data-src="https://freight.cargo.site/t/original/i/15cc0079758a5921ac138fc70ddcc32ea47c2446c6618cf6df663d1ec40d0ab3/VC_Full-view.jpg" data-mid="205177171" border="0" src="https://freight.cargo.site/w/1000/i/15cc0079758a5921ac138fc70ddcc32ea47c2446c6618cf6df663d1ec40d0ab3/VC_Full-view.jpg" /> <img width="1800" height="2025" width_o="1800" height_o="2025" data-src="https://freight.cargo.site/t/original/i/e94de7d2596bd4b13f450fa4d4d38c1d01126e1e4379ccb2a4a2048d204392bc/UI-Modules_v01.jpg" data-mid="205177414" border="0" src="https://freight.cargo.site/w/1000/i/e94de7d2596bd4b13f450fa4d4d38c1d01126e1e4379ccb2a4a2048d204392bc/UI-Modules_v01.jpg" /> <img width="1800" height="2025" width_o="1800" height_o="2025" data-src="https://freight.cargo.site/t/original/i/0055edbd4fdc565a026a1a101c82c92701f3b9f65a790d5ce16e92f24bac17b2/UI-Modules_v02.jpg" data-mid="205177444" border="0" src="https://freight.cargo.site/w/1000/i/0055edbd4fdc565a026a1a101c82c92701f3b9f65a790d5ce16e92f24bac17b2/UI-Modules_v02.jpg" /> <img width="3240" height="1823" width_o="3240" height_o="1823" data-src="https://freight.cargo.site/t/original/i/cc29197dae432f8ca66189071b271ec083e63f92e92934f6e9a5730b50d593e7/VC_Chapter-openers.jpg" data-mid="205177553" border="0" src="https://freight.cargo.site/w/1000/i/cc29197dae432f8ca66189071b271ec083e63f92e92934f6e9a5730b50d593e7/VC_Chapter-openers.jpg" /> Brand systemFor this project, our visual system utilizes a soft color palette of warm tints and earthy tones inspired by some of their signature pieces. We wanted to evoke a sense of luxury but grounding it in history. The type system relied on the Van Cleef &amp; Arpels brand guideline, using an editorial serif for titles and a more geometric san serif for UI moments and body copy. This combination embodies Van Cleef &amp; Arpel's history and timeless craft. Dual viewsThe main feature of the experience is the dual view. This feature lets the user quickly switch between the editorial view, where they can read about the history of Van Cleef &amp; Arpels, and the Timeline view, where they can browse the different collection pieces chronologically. <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/68ee2dc74f8b24b148b1e43c52d51ec75259bf96683667083c90e262e93420cc/UI-Modules_v05.jpg" data-mid="205178087" border="0" src="https://freight.cargo.site/w/1000/i/68ee2dc74f8b24b148b1e43c52d51ec75259bf96683667083c90e262e93420cc/UI-Modules_v05.jpg" /> <img width="2880" height="1620" width_o="2880" height_o="1620" data-src="https://freight.cargo.site/t/original/i/487fe47ebf0670190584f4e811f9e0b1f64bae647c96df73a140269148f60e8c/VC_Full-Pages_v01.jpg" data-mid="205178130" border="0" src="https://freight.cargo.site/w/1000/i/487fe47ebf0670190584f4e811f9e0b1f64bae647c96df73a140269148f60e8c/VC_Full-Pages_v01.jpg" /> <img width="2880" height="1620" width_o="2880" height_o="1620" data-src="https://freight.cargo.site/t/original/i/8127e5cd22e63768130e4d94d055dea9f866ff4faa00caddc8f41ad8af14fff1/VC_Full-Pages_v02.jpg" data-mid="205178131" border="0" src="https://freight.cargo.site/w/1000/i/8127e5cd22e63768130e4d94d055dea9f866ff4faa00caddc8f41ad8af14fff1/VC_Full-Pages_v02.jpg" /> Editorial designFor the editorial design, we wanted to showcase some of the signature pieces alongside historical and archival artifacts, like old photos, vintage catalogs, and videos. <img width="3600" height="1976" width_o="3600" height_o="1976" data-src="https://freight.cargo.site/t/original/i/c476ebb5214ec9cef98f46bc299acca16c758150d35cbdac3857961fd0a8eac3/VC_Mobile-templates_v02.jpg" data-mid="205178174" border="0" src="https://freight.cargo.site/w/1000/i/c476ebb5214ec9cef98f46bc299acca16c758150d35cbdac3857961fd0a8eac3/VC_Mobile-templates_v02.jpg" /> <img width="3456" height="2304" width_o="3456" height_o="2304" data-src="https://freight.cargo.site/t/original/i/817f3be8c8c4ae7f232961eda784d3b96680af8c41c17a3d42d112e41861c1ae/VC_Timeline-01.jpg" data-mid="205178186" border="0" src="https://freight.cargo.site/w/1000/i/817f3be8c8c4ae7f232961eda784d3b96680af8c41c17a3d42d112e41861c1ae/VC_Timeline-01.jpg" /> <img width="3168" height="2112" width_o="3168" height_o="2112" data-src="https://freight.cargo.site/t/original/i/4de0af01373b98766aa7cedd1d0f8195e373ed4519f6ceff70474f92d0b53979/VC_Timeline-02.jpg" data-mid="205178188" border="0" src="https://freight.cargo.site/w/1000/i/4de0af01373b98766aa7cedd1d0f8195e373ed4519f6ceff70474f92d0b53979/VC_Timeline-02.jpg" /> TimelineIn this mode, the user can browse by year and can also see what art movement inspired what piece. The art movement feature is an exploratory mode that lets the user see artifacts alongside the different art pieces that might have inspired the artifact. <img width="2400" height="1800" width_o="2400" height_o="1800" data-src="https://freight.cargo.site/t/original/i/a5a2dd8a34344eec6aa7a5e77b9b140bfcfbe1a13ed037ad9639108074ea7e83/VC_Timeline-Mobile.jpg" data-mid="205178212" border="0" src="https://freight.cargo.site/w/1000/i/a5a2dd8a34344eec6aa7a5e77b9b140bfcfbe1a13ed037ad9639108074ea7e83/VC_Timeline-Mobile.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/dee699f2ca746e3ddd7f3b7739916b65820e29e9f06eae24da2a6ec586c675fd/UI-Modules_v04.jpg" data-mid="205178238" border="0" src="https://freight.cargo.site/w/1000/i/dee699f2ca746e3ddd7f3b7739916b65820e29e9f06eae24da2a6ec586c675fd/UI-Modules_v04.jpg" /> The catalogueIn search mode, the user can explore the entire archive catalog and drill down into more detailed content. While searching, the user can filter by different categories, including the type of gold and stone. When looking at a particular artifact, the user has access to all the specs, related artifacts, and art. <img width="3200" height="2200" width_o="3200" height_o="2200" data-src="https://freight.cargo.site/t/original/i/db4ad6c11524f996c152552ec0c44b5562eca30ca96c242294d625d52215bc83/VC_Detail-page.jpg" data-mid="205178246" border="0" src="https://freight.cargo.site/w/1000/i/db4ad6c11524f996c152552ec0c44b5562eca30ca96c242294d625d52215bc83/VC_Detail-page.jpg" /> <img width="3200" height="2200" width_o="3200" height_o="2200" data-src="https://freight.cargo.site/t/original/i/c4e76c2464303b3bc993164fd72985b0b5b96df995d5c7ca1d61d671b734d68b/VC_Search-view.jpg" data-mid="205178244" border="0" src="https://freight.cargo.site/w/1000/i/c4e76c2464303b3bc993164fd72985b0b5b96df995d5c7ca1d61d671b734d68b/VC_Search-view.jpg" /> <img width="3600" height="1976" width_o="3600" height_o="1976" data-src="https://freight.cargo.site/t/original/i/d68145775cddbe2db978c8a6889c0a0e440edabb37f595465a8b425a9f42348b/VC_Mobile-templates_v01.jpg" data-mid="205178268" border="0" src="https://freight.cargo.site/w/1000/i/d68145775cddbe2db978c8a6889c0a0e440edabb37f595465a8b425a9f42348b/VC_Mobile-templates_v01.jpg" /> Creating collectionsFor users who might be collectors or researchers, we decided to develop a feature where they can create folders and save any artifact they want. With this feature, you can create new folders or add to an already-created collection. This experience opens up another way for users to engage with the archive content. <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/6e07ae46cd4750295972212c8e51bf5a2a1a6f2c847c0e8b39744bdff6227173/VC_My-collection.jpg" data-mid="205179419" border="0" src="https://freight.cargo.site/w/1000/i/6e07ae46cd4750295972212c8e51bf5a2a1a6f2c847c0e8b39744bdff6227173/VC_My-collection.jpg" /><img width="3200" height="2400" width_o="3200" height_o="2400" data-src="https://freight.cargo.site/t/original/i/5dfddb53a12892817b509e36bc247ec364e6145edf9c8d9db85e4de1f2eb38b1/VC_Editorial-Mobile.jpg" data-mid="205179453" border="0" src="https://freight.cargo.site/w/1000/i/5dfddb53a12892817b509e36bc247ec364e6145edf9c8d9db85e4de1f2eb38b1/VC_Editorial-Mobile.jpg" /> <img width="2200" height="1446" width_o="2200" height_o="1446" data-src="https://freight.cargo.site/t/original/i/bcd4712763b4539f5b1650991592ac7af5b14a0f045f678d2fe3a0fabae9a625/VC_Mobile-Carousel.jpg" data-mid="205179467" border="0" src="https://freight.cargo.site/w/1000/i/bcd4712763b4539f5b1650991592ac7af5b14a0f045f678d2fe3a0fabae9a625/VC_Mobile-Carousel.jpg" /> Project teamDesing Director: Guillermo BrotonsTechnical Director: Cherif ZoueinVisual &amp; Interaction design: Jaime Patino-Calvo&nbsp; https://jaimepatino.com/Zeta-Charter-Schools Sat, 17 Feb 2024 22:52:44 +0000 jaimepatino https://jaimepatino.com/Zeta-Charter-Schools Zeta Charter Schools Zeta Schools are charter schools across New York City focusing on a service-driven whole-child approach to schooling. To celebrate the opening of their new campus, we helped the Zeta team refresh their website, bringing the brand energy from the new campus into the website.&nbsp;Design in&nbsp;Collaboration with Apartment One Role: Visual and interaction design Website: zetaschools.org <img width="2393" height="1596" width_o="2393" height_o="1596" data-src="https://freight.cargo.site/t/original/i/ae8192ed3c05fb7c5bae04527f9aaa6a7d1e2bde4d4b9a2ae130e51d0618f4bc/Zeta_Hero-image.jpg" data-mid="204872167" border="0" src="https://freight.cargo.site/w/1000/i/ae8192ed3c05fb7c5bae04527f9aaa6a7d1e2bde4d4b9a2ae130e51d0618f4bc/Zeta_Hero-image.jpg" /> <img width="2520" height="1418" width_o="2520" height_o="1418" data-src="https://freight.cargo.site/t/original/i/61949f1363c356487e46609e58db2e2fc039a99bd17d27e7e5f24da2357bb113/Full-Page_3-Column.jpg" data-mid="204872355" border="0" src="https://freight.cargo.site/w/1000/i/61949f1363c356487e46609e58db2e2fc039a99bd17d27e7e5f24da2357bb113/Full-Page_3-Column.jpg" /> <img width="2880" height="1620" width_o="2880" height_o="1620" data-src="https://freight.cargo.site/t/original/i/565967e52a12f37f23fcfe8cffb7676fbabcf698c871466678a89226328d4fed/Full-Page_2-Column_v02.jpg" data-mid="204872285" border="0" src="https://freight.cargo.site/w/1000/i/565967e52a12f37f23fcfe8cffb7676fbabcf698c871466678a89226328d4fed/Full-Page_2-Column_v02.jpg" /> Website StrategyOur collaboration with the Zeta team led to the development of a new content strategy that aligns with their new messaging, emphasizing specific aspects of the school's mission or values. This strategy facilitated the creation of a user-friendly navigation system akin to chapters at the end of each page. We also revamped the content hierarchy, giving prominence to the voices of students and faculty and enhancing the overall user experience. <img width="1800" height="2025" width_o="1800" height_o="2025" data-src="https://freight.cargo.site/t/original/i/a6c2d30731cf27ec0b12b8ab8834a24477e529bb02ca3db6475594fdc63e1384/UI-Modules_v02.jpg" data-mid="204872372" border="0" src="https://freight.cargo.site/w/1000/i/a6c2d30731cf27ec0b12b8ab8834a24477e529bb02ca3db6475594fdc63e1384/UI-Modules_v02.jpg" /> <img width="1800" height="2025" width_o="1800" height_o="2025" data-src="https://freight.cargo.site/t/original/i/13ead8af1c17c721a4b5c0c6a6ec2d7e56f5107d5357b942978bfe4b094a5642/UI-Modules_v01.jpg" data-mid="204872373" border="0" src="https://freight.cargo.site/w/1000/i/13ead8af1c17c721a4b5c0c6a6ec2d7e56f5107d5357b942978bfe4b094a5642/UI-Modules_v01.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/92435c0e8c610f07c0d74b54c4b8a84639d8d64994487f3457b701d31536de24/Zeta_Graphic-system01.jpg" data-mid="204872994" border="0" src="https://freight.cargo.site/w/1000/i/92435c0e8c610f07c0d74b54c4b8a84639d8d64994487f3457b701d31536de24/Zeta_Graphic-system01.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/1f36b5148360d946bd31fb5c55f7faee2185ff9298f95281da92a0304089919a/Zeta_Graphic-system02.jpg" data-mid="204872995" border="0" src="https://freight.cargo.site/w/1000/i/1f36b5148360d946bd31fb5c55f7faee2185ff9298f95281da92a0304089919a/Zeta_Graphic-system02.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/d9ff988bc0ca5fe4904a2bdb8032c300e1d2acbeed796e1ebcffc437f62b18bc/Zeta_Graphic-system03.jpg" data-mid="204872996" border="0" src="https://freight.cargo.site/w/1000/i/d9ff988bc0ca5fe4904a2bdb8032c300e1d2acbeed796e1ebcffc437f62b18bc/Zeta_Graphic-system03.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/b04fdccca2f9799a740b98bda91c8ccd24d70a85a201a72f56e34fc3e1233fd9/Zeta_Graphic-system04.jpg" data-mid="204872997" border="0" src="https://freight.cargo.site/w/1000/i/b04fdccca2f9799a740b98bda91c8ccd24d70a85a201a72f56e34fc3e1233fd9/Zeta_Graphic-system04.jpg" /> Dynamic modulesPart of the website redesign was to bring new energy into the hero module at the top of each page. We made these modules dynamic so they could fit different types of content alongside graphic elements and photography that focus on the daily lives of students and faculty. <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/2226f41da64b07fecae3d591d4d0832c837d9ebeebc30d0bd2f86ff6dbfaf812/Zeta_Multi-system-view.jpg" data-mid="204872515" border="0" src="https://freight.cargo.site/w/1000/i/2226f41da64b07fecae3d591d4d0832c837d9ebeebc30d0bd2f86ff6dbfaf812/Zeta_Multi-system-view.jpg" /> <img width="1800" height="2025" width_o="1800" height_o="2025" data-src="https://freight.cargo.site/t/original/i/f1e52b07d23e9e411d6e748da5c490fec5d2c1f8e122a3ae091898f2d84956b0/UI-Modules_v05.jpg" data-mid="204872578" border="0" src="https://freight.cargo.site/w/1000/i/f1e52b07d23e9e411d6e748da5c490fec5d2c1f8e122a3ae091898f2d84956b0/UI-Modules_v05.jpg" /> <img width="1800" height="2025" width_o="1800" height_o="2025" data-src="https://freight.cargo.site/t/original/i/86ce633bb8a90dc65077b50f221be5ab23d2910a4d003f1d1cd501efd28ea873/UI-Modules_v03.jpg" data-mid="204872580" border="0" src="https://freight.cargo.site/w/1000/i/86ce633bb8a90dc65077b50f221be5ab23d2910a4d003f1d1cd501efd28ea873/UI-Modules_v03.jpg" /> <img width="2880" height="1620" width_o="2880" height_o="1620" data-src="https://freight.cargo.site/t/original/i/338ce856cb4542b515959504e8ede733a8f19a523845e0486af0da29c54cd4eb/Zeta_Pattern-system01.jpg" data-mid="204873044" border="0" src="https://freight.cargo.site/w/1000/i/338ce856cb4542b515959504e8ede733a8f19a523845e0486af0da29c54cd4eb/Zeta_Pattern-system01.jpg" /> <img width="2880" height="1620" width_o="2880" height_o="1620" data-src="https://freight.cargo.site/t/original/i/18dbe5c1049aff00ae2b624a6f09d8f2ca0f5ab987498cdaa1ac82cb9bfa47a3/Zeta_Pattern-system02.jpg" data-mid="204873045" border="0" src="https://freight.cargo.site/w/1000/i/18dbe5c1049aff00ae2b624a6f09d8f2ca0f5ab987498cdaa1ac82cb9bfa47a3/Zeta_Pattern-system02.jpg" /> <img width="2880" height="1620" width_o="2880" height_o="1620" data-src="https://freight.cargo.site/t/original/i/9859785a7f9d8cd171804406b9bc8abf663c3f882bca81b47525d917ce0192c2/Zeta_Pattern-system03.jpg" data-mid="204873046" border="0" src="https://freight.cargo.site/w/1000/i/9859785a7f9d8cd171804406b9bc8abf663c3f882bca81b47525d917ce0192c2/Zeta_Pattern-system03.jpg" /> <img width="2880" height="1620" width_o="2880" height_o="1620" data-src="https://freight.cargo.site/t/original/i/edf28b488a492c65eeca6ad5ffac266216b9abfeb637e346cf0983b5a6590700/Zeta_Pattern-system04.jpg" data-mid="204873047" border="0" src="https://freight.cargo.site/w/1000/i/edf28b488a492c65eeca6ad5ffac266216b9abfeb637e346cf0983b5a6590700/Zeta_Pattern-system04.jpg" /> <img width="2400" height="1601" width_o="2400" height_o="1601" data-src="https://freight.cargo.site/t/original/i/2158b998ece3ac0bda44145692c3011ec78955a9ac0633d8c24c1aa04a070c77/Zeta_Nav-Inactive.jpg" data-mid="204872655" border="0" src="https://freight.cargo.site/w/1000/i/2158b998ece3ac0bda44145692c3011ec78955a9ac0633d8c24c1aa04a070c77/Zeta_Nav-Inactive.jpg" /> <img width="2400" height="1601" width_o="2400" height_o="1601" data-src="https://freight.cargo.site/t/original/i/7548c56afc4718831885f9d8275ffb3d65ad8b055cb028778154e316f3df5331/Zeta_Nav-Open.jpg" data-mid="204872656" border="0" src="https://freight.cargo.site/w/1000/i/7548c56afc4718831885f9d8275ffb3d65ad8b055cb028778154e316f3df5331/Zeta_Nav-Open.jpg" /> Brand Refresh The brand refresh we deployed across the new website combines a touch of academia with childlike energy. Thanks to its slab-serif nature, we chose Sentinel as our headline text for its educational feel. On the other hand, Brandon Grotesque adds a touch of boldness and modernity to the design. Combining geometric graphic elements with a vibrant color system injects childlike energy and boldness into the website. <img width="2880" height="1620" width_o="2880" height_o="1620" data-src="https://freight.cargo.site/t/original/i/bd9c84dc06352d2d82bd7312523656d02b0e236b791f2425f1b26be1429f09f1/Full-Page_2-Column.jpg" data-mid="204872708" border="0" src="https://freight.cargo.site/w/1000/i/bd9c84dc06352d2d82bd7312523656d02b0e236b791f2425f1b26be1429f09f1/Full-Page_2-Column.jpg" /> <img width="1800" height="2025" width_o="1800" height_o="2025" data-src="https://freight.cargo.site/t/original/i/10d0cfe741234cbe74d62f09e1f00f26e99c18728162f8499506d46868280bd2/UI-Modules_v06.jpg" data-mid="204872722" border="0" src="https://freight.cargo.site/w/1000/i/10d0cfe741234cbe74d62f09e1f00f26e99c18728162f8499506d46868280bd2/UI-Modules_v06.jpg" /> <img width="1800" height="2025" width_o="1800" height_o="2025" data-src="https://freight.cargo.site/t/original/i/d2d024cabcc90c7b134d3448b997c008438091c5109373d07ee1d577bd733ead/UI-Modules_v04.jpg" data-mid="204872726" border="0" src="https://freight.cargo.site/w/1000/i/d2d024cabcc90c7b134d3448b997c008438091c5109373d07ee1d577bd733ead/UI-Modules_v04.jpg" /> <img width="2880" height="1920" width_o="2880" height_o="1920" data-src="https://freight.cargo.site/t/original/i/285bbdb3d9dac602aad95070a6407d8bcb49f0fe464aa41772d4b60e7e8a3f26/Zeta_Laptop-Mock-up-People_v02.jpg" data-mid="204872755" border="0" src="https://freight.cargo.site/w/1000/i/285bbdb3d9dac602aad95070a6407d8bcb49f0fe464aa41772d4b60e7e8a3f26/Zeta_Laptop-Mock-up-People_v02.jpg" /> <img width="2880" height="1920" width_o="2880" height_o="1920" data-src="https://freight.cargo.site/t/original/i/88de787d591af1a8b0b0df22bd7e2e85355140dcf4268c19f6b900d3ba45ac96/Zeta_Laptop-Mock-up-People_v01.jpg" data-mid="204872754" border="0" src="https://freight.cargo.site/w/1000/i/88de787d591af1a8b0b0df22bd7e2e85355140dcf4268c19f6b900d3ba45ac96/Zeta_Laptop-Mock-up-People_v01.jpg" /> <img width="2400" height="1800" width_o="2400" height_o="1800" data-src="https://freight.cargo.site/t/original/i/9802524675467f4b697cd25adf40967829eb9e15ca95e0e3b2676ebf33d9ea7b/Zeta_smartphone-mockup.jpg" data-mid="204873016" border="0" src="https://freight.cargo.site/w/1000/i/9802524675467f4b697cd25adf40967829eb9e15ca95e0e3b2676ebf33d9ea7b/Zeta_smartphone-mockup.jpg" /> <img width="3035" height="2025" width_o="3035" height_o="2025" data-src="https://freight.cargo.site/t/original/i/4c77051e5ad6dafdb0f082ca899285c658c0bfbed21d2d564fb95817aeaab42e/Zeta_Graphic-moment.jpg" data-mid="204872829" border="0" src="https://freight.cargo.site/w/1000/i/4c77051e5ad6dafdb0f082ca899285c658c0bfbed21d2d564fb95817aeaab42e/Zeta_Graphic-moment.jpg" /> Bringing the digital brand into the physical worldAfter launching the new Zeta website, we had an opportunity to bring some of the new branding into the physical world. A marketing campaign used the new brand for posters and street banners, allowing us to flex the new system. <img width="2336" height="1494" width_o="2336" height_o="1494" data-src="https://freight.cargo.site/t/original/i/e1eb0faf1cb90251f05ef259e482cf1437bac2489f5f1ecb67bdaa88178b14f4/Zeta_Billboard_v01.jpg" data-mid="204872961" border="0" src="https://freight.cargo.site/w/1000/i/e1eb0faf1cb90251f05ef259e482cf1437bac2489f5f1ecb67bdaa88178b14f4/Zeta_Billboard_v01.jpg" /> <img width="1428" height="1922" width_o="1428" height_o="1922" data-src="https://freight.cargo.site/t/original/i/a6a55d2ec953dc41b50a61a2fefc6e95bba4be66e8f6a9a6a2c7215262f070a8/Zeta_Tote-bag-mock-up.jpg" data-mid="204872955" border="0" src="https://freight.cargo.site/w/1000/i/a6a55d2ec953dc41b50a61a2fefc6e95bba4be66e8f6a9a6a2c7215262f070a8/Zeta_Tote-bag-mock-up.jpg" /> <img width="1428" height="1922" width_o="1428" height_o="1922" data-src="https://freight.cargo.site/t/original/i/4d248b7c85c6021d675d71fe77cc75cfdb98af38abfde79ad0a0884548ae90de/Poster_3.jpg" data-mid="204872882" border="0" src="https://freight.cargo.site/w/1000/i/4d248b7c85c6021d675d71fe77cc75cfdb98af38abfde79ad0a0884548ae90de/Poster_3.jpg" /> <img width="1428" height="1922" width_o="1428" height_o="1922" data-src="https://freight.cargo.site/t/original/i/70ee920b9492d0d4889a3184c91faa807286459527dbd2fabd0b9799439d24b0/Poster_5.jpg" data-mid="204872884" border="0" src="https://freight.cargo.site/w/1000/i/70ee920b9492d0d4889a3184c91faa807286459527dbd2fabd0b9799439d24b0/Poster_5.jpg" /> <img width="1428" height="1922" width_o="1428" height_o="1922" data-src="https://freight.cargo.site/t/original/i/12be0c7413e24555f0fd9f58a47b5f7af26925dfcbc3ea0eae5d31ca9345f0c3/Poster_4.jpg" data-mid="204872883" border="0" src="https://freight.cargo.site/w/1000/i/12be0c7413e24555f0fd9f58a47b5f7af26925dfcbc3ea0eae5d31ca9345f0c3/Poster_4.jpg" /> <img width="2100" height="1400" width_o="2100" height_o="1400" data-src="https://freight.cargo.site/t/original/i/17234074cb622cdf3d87129599e9dd25237066ae99140a46b66ce1569ee055bd/Zeta_Stand-Mock-up.jpg" data-mid="204872879" border="0" src="https://freight.cargo.site/w/1000/i/17234074cb622cdf3d87129599e9dd25237066ae99140a46b66ce1569ee055bd/Zeta_Stand-Mock-up.jpg" /> <img width="2090" height="1394" width_o="2090" height_o="1394" data-src="https://freight.cargo.site/t/original/i/f2f86a29a2fe7132310ea943299a30c8357b65b40ccb76126137d8c3b28bce0b/Zeta_Books-mock-up.jpg" data-mid="204872966" border="0" src="https://freight.cargo.site/w/1000/i/f2f86a29a2fe7132310ea943299a30c8357b65b40ccb76126137d8c3b28bce0b/Zeta_Books-mock-up.jpg" /> Project teamProject Manager &amp; Design Director: Liza LowingerUX Strategy: Amanda ForteVisual &amp; Interaction design: Jaime Patino-Calvo&nbsp; https://jaimepatino.com/More-Snapchat-campaign-site Tue, 05 Mar 2024 00:09:36 +0000 jaimepatino https://jaimepatino.com/More-Snapchat-campaign-site More Snapchat Snapchat rolled out a new campaign, and at the center of it, it revealed a new manifesto. The latest manifesto was part of Snapchat's new messaging, distancing itself from the other social media apps. We designed a website to showcase the new messaging.&nbsp;Designed At Play.Role: Visual and interaction design Website: moresnapchat.com <img width="2556" height="1355" width_o="2556" height_o="1355" data-src="https://freight.cargo.site/t/original/i/4617e383811a95cbae01fd9a0fcd9e9a47cb9fc2bb9f3c132fc7e3e4f68fd096/Initial-screen_Mock-up.jpg" data-mid="206030580" border="0" src="https://freight.cargo.site/w/1000/i/4617e383811a95cbae01fd9a0fcd9e9a47cb9fc2bb9f3c132fc7e3e4f68fd096/Initial-screen_Mock-up.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/9ec3eec86aadda5292abbb57a46eef0edf9be04437199880f4f67371d572add5/Snap-manifesto_Diagram.jpg" data-mid="206030644" border="0" src="https://freight.cargo.site/w/1000/i/9ec3eec86aadda5292abbb57a46eef0edf9be04437199880f4f67371d572add5/Snap-manifesto_Diagram.jpg" /> <img width="2016" height="1512" width_o="2016" height_o="1512" data-src="https://freight.cargo.site/t/original/i/25da22477f3e090156de34d14273a045f4b47dd327101123d0249b79e9f0686e/Campaign-poster.jpg" data-mid="206030704" border="0" src="https://freight.cargo.site/w/1000/i/25da22477f3e090156de34d14273a045f4b47dd327101123d0249b79e9f0686e/Campaign-poster.jpg" />The campaign websiteThe Snapchat team aired the campaign commercial at the Grammys and the Superbowl and placed print ads across multiple major cities. For each of these touchpoints, the campaign drove users to the campaign website, where they could read the whole manifest and access in-depth articles about how Snapchat is working to make the platform less about likes and more about community. <img width="1800" height="2025" width_o="1800" height_o="2025" data-src="https://freight.cargo.site/t/original/i/5d7895bf4efe45deeb1803f3e224b6db7b4715ba7b638b8fee22b45e2b6c6854/UI-Modules_v01.jpg" data-mid="206030749" border="0" src="https://freight.cargo.site/w/1000/i/5d7895bf4efe45deeb1803f3e224b6db7b4715ba7b638b8fee22b45e2b6c6854/UI-Modules_v01.jpg" /> <img width="1800" height="2025" width_o="1800" height_o="2025" data-src="https://freight.cargo.site/t/original/i/b24aadaebf809e1010cd8a35cbc32d3a2953558ecee5c3efbb43bdcbdcedfada/UI-Modules_v02.jpg" data-mid="206030755" border="0" src="https://freight.cargo.site/w/1000/i/b24aadaebf809e1010cd8a35cbc32d3a2953558ecee5c3efbb43bdcbdcedfada/UI-Modules_v02.jpg" /> Visual systemWe used much of the campaign's visual system across the website, creating a more cohesive experience from video/physical to digital. We did add another layer of visual intrigue with some of the hovers, scroll behavior, and emoji stickers used across the site. This layer of interactivity helped to strike a balance between highlighting the content while still giving the site some of the energy the commercial and some of the print media had. Experimenting with different scrolling behaviors <img width="3200" height="1678" width_o="3200" height_o="1678" data-src="https://freight.cargo.site/t/original/i/10f250d8fb7d1f5f48a130afe7a18cbaf6393cad1afa3e20efecdacec442be7b/mobile_Initial-screen.jpg" data-mid="206030775" border="0" src="https://freight.cargo.site/w/1000/i/10f250d8fb7d1f5f48a130afe7a18cbaf6393cad1afa3e20efecdacec442be7b/mobile_Initial-screen.jpg" />Snapchat emojis helped us give the manifesto an added layer of excitement. The scrolling experience highlights one paragraph at a time, pausing the user to digest each piece of information. Hyperlinks within paragraphs give users more content to explore. Users can use the reference panel to access all the extra content quickly. Users can re-watch the commercial or download the Snapchat app at the end of the manifesto. <img width="2800" height="2100" width_o="2800" height_o="2100" data-src="https://freight.cargo.site/t/original/i/f3a7de2af414f714ec2341106d624ae4c6de2ede5db7b1b4b2bf9ba07f3eb7ed/Snap_Mobile-screens.jpg" data-mid="206030894" border="0" src="https://freight.cargo.site/w/1000/i/f3a7de2af414f714ec2341106d624ae4c6de2ede5db7b1b4b2bf9ba07f3eb7ed/Snap_Mobile-screens.jpg" /> <img width="3000" height="2001" width_o="3000" height_o="2001" data-src="https://freight.cargo.site/t/original/i/f8dbed7ed7eacdd886eeaceb0c37633b69898e7d0715130689599be67408c34c/mobile_Graphic-collage.jpg" data-mid="206030914" border="0" src="https://freight.cargo.site/w/1000/i/f8dbed7ed7eacdd886eeaceb0c37633b69898e7d0715130689599be67408c34c/mobile_Graphic-collage.jpg" /> Project teamDesing director: Kyle BeckProject manager: Lindsay McMenamin&nbsp;Visual &amp; Interaction design: Jaime Patino-CalvoDeveloper: Chris Malven https://jaimepatino.com/Citrix-Soundboard Fri, 07 Jan 2022 04:23:05 +0000 jaimepatino https://jaimepatino.com/Citrix-Soundboard Citrix Soundboard A component of the Citrix rebrand was to develop sonic branding and make it a core component of their digital experience. One way to activate this new sonic expression was to create a soundboard for Citrix employees.&nbsp;Designed at Athletics Role: UI, UX, and Interactive design <img width="4748" height="2569" width_o="4748" height_o="2569" data-src="https://freight.cargo.site/t/original/i/149c0d753eb97fdc27eec6a0d34e869f6d7770e9c54ea3b18317f2a7def18f6c/Citrix_Soundboard_Hero-Image.jpg" data-mid="129300733" border="0" src="https://freight.cargo.site/w/1000/i/149c0d753eb97fdc27eec6a0d34e869f6d7770e9c54ea3b18317f2a7def18f6c/Citrix_Soundboard_Hero-Image.jpg" /> Big picture Working together with the Citrix marketing team, we envisioned a tool that employees could use internally to create unique branded sonic assets. We ran a few workshops that helped us define the different types of users, their mental models when using the tool, and what features and functionalities would be essential for the success of this product. <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/f3551889f9775e8839729a5b335253c560ce76e116a3ad2facdf156209a8f7d5/Citrix_Soundboard_Moodworld.jpg" data-mid="129301165" border="0" src="https://freight.cargo.site/w/1000/i/f3551889f9775e8839729a5b335253c560ce76e116a3ad2facdf156209a8f7d5/Citrix_Soundboard_Moodworld.jpg" /> <img width="5760" height="3840" width_o="5760" height_o="3840" data-src="https://freight.cargo.site/t/original/i/bedaebe2a5428aea2d22c764d7b8d287191536ab77d4a9771b222cc1cb710ea9/iPad_Mockup_01.jpg" data-mid="129301309" border="0" src="https://freight.cargo.site/w/1000/i/bedaebe2a5428aea2d22c764d7b8d287191536ab77d4a9771b222cc1cb710ea9/iPad_Mockup_01.jpg" /> <img width="5760" height="3840" width_o="5760" height_o="3840" data-src="https://freight.cargo.site/t/original/i/c27aa0de801b29c781ac80012c28797c77bd19eee9e4b692b0013cd79d4a49fb/iPad_Mockup_02.jpg" data-mid="129301310" border="0" src="https://freight.cargo.site/w/1000/i/c27aa0de801b29c781ac80012c28797c77bd19eee9e4b692b0013cd79d4a49fb/iPad_Mockup_02.jpg" /> <img width="5760" height="3840" width_o="5760" height_o="3840" data-src="https://freight.cargo.site/t/original/i/ef63c99b9f2938f71d8f7b694c502ad98d00818c938982a4af4b9ed72fa66a8c/iPad_Mockup_03.jpg" data-mid="129301311" border="0" src="https://freight.cargo.site/w/1000/i/ef63c99b9f2938f71d8f7b694c502ad98d00818c938982a4af4b9ed72fa66a8c/iPad_Mockup_03.jpg" /> UX strategy Working together with a developer and sound engineer, we began wireframing and mapping out the music creation experience. We wanted to understand how users would select a soundtrack, how they would edit, and how they could export the newly created tracks. <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/4a71b95687a1d4b7746c1223757a1e1af1376b5b037345a2ba9d10b426369801/Soundboard_UX_1.jpg" data-mid="129301174" border="0" src="https://freight.cargo.site/w/1000/i/4a71b95687a1d4b7746c1223757a1e1af1376b5b037345a2ba9d10b426369801/Soundboard_UX_1.jpg" /> Mobile explorationEven though the soundboard was optimized for desktop and tablet only, We still looked at a few mobile solutions. We specifically wireframed a few concepts for the sound creation screens. <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/0125ffbebfcc8a160e90f0c3ded49cca086f1d8685879a081c44e227b715bf6d/Soundboard_UX_2.jpg" data-mid="129301175" border="0" src="https://freight.cargo.site/w/1000/i/0125ffbebfcc8a160e90f0c3ded49cca086f1d8685879a081c44e227b715bf6d/Soundboard_UX_2.jpg" /> The systemFor the UI system, we went with a streamlined approach. We wanted the experience to feel open and expressive without too many controls getting in the way. In the sound creation screens, we went with a minimalist approach where the user can drag dots around and change the different sound elements of the main track. We added hold interactions for accessing volume controls within individual sound effects. <img width="1800" height="2025" width_o="1800" height_o="2025" data-src="https://freight.cargo.site/t/original/i/613eb2b2c0d6b88e56ec74f72083b241a05cd1b61b1d8d651a33ff20f09a7eb7/UI-System_Citrix_v01.jpg" data-mid="129301661" border="0" src="https://freight.cargo.site/w/1000/i/613eb2b2c0d6b88e56ec74f72083b241a05cd1b61b1d8d651a33ff20f09a7eb7/UI-System_Citrix_v01.jpg" /> <img width="1800" height="2025" width_o="1800" height_o="2025" data-src="https://freight.cargo.site/t/original/i/737661e86b83c72e32671dcad3f7cc496a016266322f53e010e6489b751421c1/UI-System_Citrix_v02.jpg" data-mid="129301665" border="0" src="https://freight.cargo.site/w/1000/i/737661e86b83c72e32671dcad3f7cc496a016266322f53e010e6489b751421c1/UI-System_Citrix_v02.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/463483e0e7a8ede2cb335f9dcee216d982446453ea3d1eb42c1f0f5894b51ee2/Gradient-1.jpg" data-mid="129301830" border="0" src="https://freight.cargo.site/w/1000/i/463483e0e7a8ede2cb335f9dcee216d982446453ea3d1eb42c1f0f5894b51ee2/Gradient-1.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/97fcab710a33f62b817547a0cbcd639ad37e840e4aeba169ae6dbdac71f90aee/Gradient-2.jpg" data-mid="129301831" border="0" src="https://freight.cargo.site/w/1000/i/97fcab710a33f62b817547a0cbcd639ad37e840e4aeba169ae6dbdac71f90aee/Gradient-2.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/789e35f7fc0ba6651cef05788b7b79a11accc9d362aaf6615e7e61a30c281a3e/Gradient-3.jpg" data-mid="129301832" border="0" src="https://freight.cargo.site/w/1000/i/789e35f7fc0ba6651cef05788b7b79a11accc9d362aaf6615e7e61a30c281a3e/Gradient-3.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/a40bb973099dafbac5eb63417d79585ad8a34027334df85a4aac47b48a6c2f44/Gradient-4.jpg" data-mid="129301833" border="0" src="https://freight.cargo.site/w/1000/i/a40bb973099dafbac5eb63417d79585ad8a34027334df85a4aac47b48a6c2f44/Gradient-4.jpg" /> The gradientsWe developed a set of ambient gradients that reacted as users dragged the dots around the screen. These gradients were using core colors from the Citrix brand system, and depending on the proximity of one circle to the other, the colors would mix, creating new hues. <img width="6400" height="4400" width_o="6400" height_o="4400" data-src="https://freight.cargo.site/t/original/i/57dc4247ce75cfca0c9093d106f4d6346d1dc1fa51fd65e93a1bdfb6bc13f1ec/Arrange_iPad-Mockup_1.jpg" data-mid="129301863" border="0" src="https://freight.cargo.site/w/1000/i/57dc4247ce75cfca0c9093d106f4d6346d1dc1fa51fd65e93a1bdfb6bc13f1ec/Arrange_iPad-Mockup_1.jpg" /> <img width="6400" height="4400" width_o="6400" height_o="4400" data-src="https://freight.cargo.site/t/original/i/b39e0d2fcd8a359af4628ceb3607f2a864e37b8b8fcb69e435d4b0597c9bd635/Arrange_iPad-Mockup_2.jpg" data-mid="129301865" border="0" src="https://freight.cargo.site/w/1000/i/b39e0d2fcd8a359af4628ceb3607f2a864e37b8b8fcb69e435d4b0597c9bd635/Arrange_iPad-Mockup_2.jpg" /> <img width="6400" height="4400" width_o="6400" height_o="4400" data-src="https://freight.cargo.site/t/original/i/adfd37e3cb2385a242fd6397a43bbe91812000cb434ed57ca6269d6ef418582c/Arrange_iPad-Mockup_3.jpg" data-mid="129301866" border="0" src="https://freight.cargo.site/w/1000/i/adfd37e3cb2385a242fd6397a43bbe91812000cb434ed57ca6269d6ef418582c/Arrange_iPad-Mockup_3.jpg" /> Users can set time and drag the dot to add a sound curve to compose how the track starts and ends <img width="4000" height="2750" width_o="4000" height_o="2750" data-src="https://freight.cargo.site/t/original/i/6b684b281b204b673e284c3750d35c3c065d80f7a6a8fed8fbe17f4809b165d5/Download-state_Mock-up.jpg" data-mid="129301954" border="0" src="https://freight.cargo.site/w/1000/i/6b684b281b204b673e284c3750d35c3c065d80f7a6a8fed8fbe17f4809b165d5/Download-state_Mock-up.jpg" /> Once the track is arranged and composed, users can export and save it to the library PersonalizationA core idea of this product was to give users a way to add their newly created sounds to a sound library. These soundtracks can then be accessible to the larger community of Citrix employees. One fun feature of the library was the unique gradient album covers that each piece would get, making them feel unique and special, like collectibles. <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/14c8f34693853de9bb36db4759951dc1a8f6651d44160e0d431ef861b2b3bd57/Album-covers_1.jpg" data-mid="129302534" border="0" src="https://freight.cargo.site/w/1000/i/14c8f34693853de9bb36db4759951dc1a8f6651d44160e0d431ef861b2b3bd57/Album-covers_1.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/319b2d059a2b7e3eb6682fc41501aa4c194f6da30ea88950ad155926dc3466fb/Album-covers_2.jpg" data-mid="129302535" border="0" src="https://freight.cargo.site/w/1000/i/319b2d059a2b7e3eb6682fc41501aa4c194f6da30ea88950ad155926dc3466fb/Album-covers_2.jpg" /> Athletics project teamPartners: Jameson Proctor, Malcolm BuickProject Manager: Allie StenclikDesigners: Allison Connell &amp; Jaime Patino-CalvoDeveloper: Richard LehmannSound engineer: Simon Pike https://jaimepatino.com/New-York-Times Mon, 10 Jan 2022 03:21:42 +0000 jaimepatino https://jaimepatino.com/New-York-Times The New York Times NYT invests a lot of money in their advertising model, which is how they generate part of their revenue. They offer standard and custom templates that advertisers can use, but these formats are somewhat limited and don’t offer room for more creative ad experiences. Working with the NYT app team, we envisioned a new way of advertising storytelling. Designed at Athletics Role: UX, System &amp; Interactive design <img width="3000" height="2001" width_o="3000" height_o="2001" data-src="https://freight.cargo.site/t/original/i/a851841c51d008acee956d89002a78aad431af69f30d2010d2e8031a8c8aac86/MockupMaison_DD_B13.jpg" data-mid="137869478" border="0" src="https://freight.cargo.site/w/1000/i/a851841c51d008acee956d89002a78aad431af69f30d2010d2e8031a8c8aac86/MockupMaison_DD_B13.jpg" /> Macro viewWe began our work by going in-depth into understanding the NYT app ecosystem. The research included user models and behaviors, content structure, elevation and interactive models. This new information gave us a foundation to test some of our ideas. &nbsp; <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/3e77014376c522d26bfed326ad26cb11a12815e3f6e8173e0c278c25ef123197/New-Ad-formats-and-interactions.jpg" data-mid="137868711" border="0" src="https://freight.cargo.site/w/1000/i/3e77014376c522d26bfed326ad26cb11a12815e3f6e8173e0c278c25ef123197/New-Ad-formats-and-interactions.jpg" /> Embracing new formats and interactionsWe found inspiration in different social media platforms developing new interactive conventions and changing visual formats across digital experiences. Borrowing from these ideas, we started to sketch new concepts to re-think ad formats, dimensions, and how users could interact with them without interrupting the reading experience. <img width="1800" height="2025" width_o="1800" height_o="2025" data-src="https://freight.cargo.site/t/original/i/a9eaa25105a9a7ce8af384c72a1012644ed027f4c508753a3f88d2deb31ce182/Medallion-system_v01.jpg" data-mid="129590137" border="0" alt="Ad unit as multi-media module" data-caption="Ad unit as multi-media module" src="https://freight.cargo.site/w/1000/i/a9eaa25105a9a7ce8af384c72a1012644ed027f4c508753a3f88d2deb31ce182/Medallion-system_v01.jpg" /> <img width="1800" height="2025" width_o="1800" height_o="2025" data-src="https://freight.cargo.site/t/original/i/8eb147446df4dcae0d53fac89950b79f0f6f16c680fcc80ed5370f51f5f952aa/Medallion-system_v02.jpg" data-mid="129590138" border="0" alt="Ad unit connects multiple stories" data-caption="Ad unit connects multiple stories" src="https://freight.cargo.site/w/1000/i/8eb147446df4dcae0d53fac89950b79f0f6f16c680fcc80ed5370f51f5f952aa/Medallion-system_v02.jpg" /> Pervasive StorytellingAs we continued to understand the NYT app environment, we began to identify moments within a user’s journey where ads could be activated, not just by user interaction but with content as well. Our solution was to create a system of flexible containers that could hold unique ad moments and can be expanded to see more of the ad story. This approach turns regular ads into multimedia brand stories threaded through the in-between spaces of a reader’s journey. The SystemOnce we identified the module system in which the medallion will be the connecting thread across different ad stories, we began to illustrate how NYT could use the system to help advertisers tell unique, highly visual stories. <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/cf2105aaeb74a8132c89a6e0116c8f4b6d5b066df9862f97439670f778e40c83/Modal-System.jpg" data-mid="137866281" border="0" src="https://freight.cargo.site/w/1000/i/cf2105aaeb74a8132c89a6e0116c8f4b6d5b066df9862f97439670f778e40c83/Modal-System.jpg" /> Interactive opportunitiesThrough the lens of three distinct users, we identified a few interactive opportunities that could enhance the ad experience across the app ecosystem and engage readers of the NYT in innovative ways. <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/3cc64585c4a2ce8607784b5779b08b2d25c8b97b891f3567554d2ba6be8eabc5/Undecided-Reader.jpg" data-mid="129591379" border="0" src="https://freight.cargo.site/w/1000/i/3cc64585c4a2ce8607784b5779b08b2d25c8b97b891f3567554d2ba6be8eabc5/Undecided-Reader.jpg" /> <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/357e50e0978e51f3f23c796793d7f0ed84a0aed72c657b5e6da6cb45e9025933/1.1_Opportunities.jpg" data-mid="129591377" border="0" src="https://freight.cargo.site/w/1000/i/357e50e0978e51f3f23c796793d7f0ed84a0aed72c657b5e6da6cb45e9025933/1.1_Opportunities.jpg" /> <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/0e0dafac1988da80a1d3271ca9bfd1646e619a98af621ff5073c3da49b3f8714/1.3_Opportunities.jpg" data-mid="129591378" border="0" src="https://freight.cargo.site/w/1000/i/0e0dafac1988da80a1d3271ca9bfd1646e619a98af621ff5073c3da49b3f8714/1.3_Opportunities.jpg" /> <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/75a100618f92d85afda95cb2abf4b21e2f9a27f1010cbf40792d3cf97af1f1d8/Committed-Reader.jpg" data-mid="129591612" border="0" src="https://freight.cargo.site/w/1000/i/75a100618f92d85afda95cb2abf4b21e2f9a27f1010cbf40792d3cf97af1f1d8/Committed-Reader.jpg" /> <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/2630e21a8a4cb36dd62594697a8725c31622d0feea1f5152fb12b265d000f7cb/2.4_Opportunities.jpg" data-mid="129591610" border="0" src="https://freight.cargo.site/w/1000/i/2630e21a8a4cb36dd62594697a8725c31622d0feea1f5152fb12b265d000f7cb/2.4_Opportunities.jpg" /> <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/d21141ab0b1797ee51d422671219f5d40abc72d945d940625677a06b8988a2e7/3.6_Opportunities.jpg" data-mid="129591611" border="0" src="https://freight.cargo.site/w/1000/i/d21141ab0b1797ee51d422671219f5d40abc72d945d940625677a06b8988a2e7/3.6_Opportunities.jpg" /> <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/b7f2e4c10ae24f03d0f804eadaaa3d4deaac2d14537723855fe49458f55183a6/Focus-Reader.jpg" data-mid="129591916" border="0" src="https://freight.cargo.site/w/1000/i/b7f2e4c10ae24f03d0f804eadaaa3d4deaac2d14537723855fe49458f55183a6/Focus-Reader.jpg" /> <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/114b66a8f91105c59c521b56e0befa416a1a3a3963dbf0d76498ca7976c0dfc6/2.5_Opportunities.jpg" data-mid="129591914" border="0" src="https://freight.cargo.site/w/1000/i/114b66a8f91105c59c521b56e0befa416a1a3a3963dbf0d76498ca7976c0dfc6/2.5_Opportunities.jpg" /> <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/8288daa59320eeb5d8324d8f3c030e4ee3732d63593815bdcd419b05864a2135/3.4_Opportunities.jpg" data-mid="129591915" border="0" src="https://freight.cargo.site/w/1000/i/8288daa59320eeb5d8324d8f3c030e4ee3732d63593815bdcd419b05864a2135/3.4_Opportunities.jpg" /> Forward thinking Thinking about how the system could expand, We envisioned a modular approach to ad units where they become fully immersive stories, consume throughout the user’s journey within the app. This innovative approach would force advertisers to think bigger creatively and push them to think of ads as not just another rectangle on the page but an immersive space to engage with readers. For NYT, this concept can bring content and ads closer together, in a more seamless experience for the user. <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/3b72282ff2276cdbb53f850fe8f5ddb48e8d849b5ab52f1fd33db188dc532fe1/4.0_System.jpg" data-mid="129592262" border="0" src="https://freight.cargo.site/w/1000/i/3b72282ff2276cdbb53f850fe8f5ddb48e8d849b5ab52f1fd33db188dc532fe1/4.0_System.jpg" /> <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/7dd04d0ce0a3215021f2392b7f8aec76066ce0570b913b3ca4029a51ae1784b7/4.2_System.jpg" data-mid="129592264" border="0" src="https://freight.cargo.site/w/1000/i/7dd04d0ce0a3215021f2392b7f8aec76066ce0570b913b3ca4029a51ae1784b7/4.2_System.jpg" /> <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/6c7400a0789d6a2c3f8b4f316d7597df29b0097ebc0d7e69f974639a71c014db/4.3_System.jpg" data-mid="129592265" border="0" src="https://freight.cargo.site/w/1000/i/6c7400a0789d6a2c3f8b4f316d7597df29b0097ebc0d7e69f974639a71c014db/4.3_System.jpg" /> <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/3257008600d2bd140957afc038c7cfdaf905684778477416f5d1b1b5a9ab170f/4.1_System.jpg" data-mid="129592263" border="0" src="https://freight.cargo.site/w/1000/i/3257008600d2bd140957afc038c7cfdaf905684778477416f5d1b1b5a9ab170f/4.1_System.jpg" /> Athletics project teamPartners: Jameson Proctor &amp; Malcolm BuickProject Manager: Kathryn FarwellCreative Director: Sam RenwickDesigner: Jaime Patino-CalvoStrategists: Katherine Lee &amp; Matt Colangelo https://jaimepatino.com/Amplify Fri, 07 Jan 2022 03:21:16 +0000 jaimepatino https://jaimepatino.com/Amplify Amplify Amplify has been a pioneer in K–12 education since 2000, leading the way in next-generation curriculum and assessment. As they continue to grow their product offerings, they needed a way to promote and market these new products digitally, in a new and exciting way.&nbsp;Designed at Athletics Websites: florida.amplify.com&nbsp;| readingsuccess.amplify.com Role: UI, UX, Interactive and system designRecognition: 2021 Webby nominee <img width="3142" height="2095" width_o="3142" height_o="2095" data-src="https://freight.cargo.site/t/original/i/70503b511c9b9a7feda4daf967c6a345d68280edf4e8e5617be062730ea492e5/Lander_Laptop-Mockup.jpg" data-mid="129298235" border="0" src="https://freight.cargo.site/w/1000/i/70503b511c9b9a7feda4daf967c6a345d68280edf4e8e5617be062730ea492e5/Lander_Laptop-Mockup.jpg" /> Big picture Working closely with the CMO and product owners, we designed a new digital experience that gives Amplify a faster way to promote and market new products. This system consists of a toolkit of modules, templates, and interactive features, coming together to tell the Amplify story. <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/af4c8333efdc4f946e5c9542316dbceb50cb3f3ab2e0941a27fd425f34d21cdf/Amplify_Case-Study-Hero_v02.jpg" data-mid="129297785" border="0" src="https://freight.cargo.site/w/1000/i/af4c8333efdc4f946e5c9542316dbceb50cb3f3ab2e0941a27fd425f34d21cdf/Amplify_Case-Study-Hero_v02.jpg" /> UX strategy We began defining the experience by developing content outlines for each product. We then outline the content structure and information hierarchy. After locking down the IA, we started designing the wireframes and developing each module and interactive feature. <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/fe0286ebf43934250ebe62a638b72267cd00aef2c984c7fb7a91148838d378da/Amplify_UX_1.jpg" data-mid="129299632" border="0" src="https://freight.cargo.site/w/1000/i/fe0286ebf43934250ebe62a638b72267cd00aef2c984c7fb7a91148838d378da/Amplify_UX_1.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/432d967c1513be86fc9b04188e699d754684b23b041d1078f5024f6f1b75da7d/Amplify_UX_2.jpg" data-mid="129299633" border="0" src="https://freight.cargo.site/w/1000/i/432d967c1513be86fc9b04188e699d754684b23b041d1078f5024f6f1b75da7d/Amplify_UX_2.jpg" /> Visual systemWe designed a visual system inspired by the current Amplify brand. We wanted to create a bolder look to inspire excitement around new products and push the brand in a new direction. <img width="1800" height="1786" width_o="1800" height_o="1786" data-src="https://freight.cargo.site/t/original/i/c016df2e25a0e4035ffb5af6084836883bc13aaee4f8794c347069f1966ae167/Stacked-Cards.jpg" data-mid="129298551" border="0" src="https://freight.cargo.site/w/1000/i/c016df2e25a0e4035ffb5af6084836883bc13aaee4f8794c347069f1966ae167/Stacked-Cards.jpg" /> <img width="1800" height="2025" width_o="1800" height_o="2025" data-src="https://freight.cargo.site/t/original/i/742261402e0622fbd1d9af7e62d47911cd0480b9dd8ec3e60ab6c6890ec55ce9/Visual-system.jpg" data-mid="129298553" border="0" src="https://freight.cargo.site/w/1000/i/742261402e0622fbd1d9af7e62d47911cd0480b9dd8ec3e60ab6c6890ec55ce9/Visual-system.jpg" /> Dynamic cardsThe main feature of the system is the dynamic card modules. These cards can contain different types of content and functionality like carousels and modals, and can be re-arranged in any manner and combined with other modules. <img width="1800" height="2025" width_o="1800" height_o="2025" data-src="https://freight.cargo.site/t/original/i/d2e7c9325df59921953e77dc15c1786616a11524c9641a0a00586cde0a8e2b98/Visual-system_v01.jpg" data-mid="129298552" border="0" src="https://freight.cargo.site/w/1000/i/d2e7c9325df59921953e77dc15c1786616a11524c9641a0a00586cde0a8e2b98/Visual-system_v01.jpg" /> <img width="1800" height="1786" width_o="1800" height_o="1786" data-src="https://freight.cargo.site/t/original/i/207b386e3e8603aa114e5bd39a2b4d7889a960f30c1dc7f966d4b868b8133dbd/carousel-Cards.jpg" data-mid="129298550" border="0" src="https://freight.cargo.site/w/1000/i/207b386e3e8603aa114e5bd39a2b4d7889a960f30c1dc7f966d4b868b8133dbd/carousel-Cards.jpg" /> <img width="4000" height="6000" width_o="4000" height_o="6000" data-src="https://freight.cargo.site/t/original/i/bb04cc3456714053c1d7a67b073acd367ffc81a7e0798128f48767caabfc48df/smartphone-mockup-Screens_v02.jpg" data-mid="129298798" border="0" src="https://freight.cargo.site/w/1000/i/bb04cc3456714053c1d7a67b073acd367ffc81a7e0798128f48767caabfc48df/smartphone-mockup-Screens_v02.jpg" /> <img width="3600" height="2407" width_o="3600" height_o="2407" data-src="https://freight.cargo.site/t/original/i/68a2ae0d731f09f8188300e5fc92ccf2eb2de99218fc143547678cd65225c656/Card_Interactive_1.jpg" data-mid="129298793" border="0" src="https://freight.cargo.site/w/1000/i/68a2ae0d731f09f8188300e5fc92ccf2eb2de99218fc143547678cd65225c656/Card_Interactive_1.jpg" /> <img width="3600" height="2407" width_o="3600" height_o="2407" data-src="https://freight.cargo.site/t/original/i/187322620bd0ec502fd29c8a5dbf632083696fbdaf5fbe8c586fa172f03f7fe3/Card_Interactive_2.jpg" data-mid="129298794" border="0" src="https://freight.cargo.site/w/1000/i/187322620bd0ec502fd29c8a5dbf632083696fbdaf5fbe8c586fa172f03f7fe3/Card_Interactive_2.jpg" /> <img width="3600" height="2407" width_o="3600" height_o="2407" data-src="https://freight.cargo.site/t/original/i/672845fdc8faca8a96b0636a307eaba3bf43d14d93501ded0f53b5a6dfc73ea7/Card_Interactive_3.jpg" data-mid="129298795" border="0" src="https://freight.cargo.site/w/1000/i/672845fdc8faca8a96b0636a307eaba3bf43d14d93501ded0f53b5a6dfc73ea7/Card_Interactive_3.jpg" /> The full system Combining the card system with typography, illustrations, photography, infographics, and other media modules, marketing managers can create engaging, story-driven microsites.&nbsp; <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/f4c65d3208835646a241978e007c98ba3969a5fc911e6fd37a706ffe71bec9c6/Full-Pages_Mock-up_v01.jpg" data-mid="129298547" border="0" src="https://freight.cargo.site/w/1000/i/f4c65d3208835646a241978e007c98ba3969a5fc911e6fd37a706ffe71bec9c6/Full-Pages_Mock-up_v01.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/c1d3587b87c747d1d3286c26cbd8a9bfce782e2a77f3d3537b8dadca2ed2bc03/Full-Pages_Mock-up_v02jpg.jpg" data-mid="129298548" border="0" src="https://freight.cargo.site/w/1000/i/c1d3587b87c747d1d3286c26cbd8a9bfce782e2a77f3d3537b8dadca2ed2bc03/Full-Pages_Mock-up_v02jpg.jpg" /> <img width="4000" height="2750" width_o="4000" height_o="2750" data-src="https://freight.cargo.site/t/original/i/6268b99cbca010210d655a9e86b9e7f99189980566f2123401b37eb1573a2e86/Mock-up_Tablet_4.jpg" data-mid="129298905" border="0" src="https://freight.cargo.site/w/1000/i/6268b99cbca010210d655a9e86b9e7f99189980566f2123401b37eb1573a2e86/Mock-up_Tablet_4.jpg" /> <img width="4000" height="2750" width_o="4000" height_o="2750" data-src="https://freight.cargo.site/t/original/i/a0d7b61ccfbb8e27d7a5eb07cedd2c8bdb08ba6197c13d4b4076fef1fd294467/Mock-up_Tablet_3.jpg" data-mid="129298904" border="0" src="https://freight.cargo.site/w/1000/i/a0d7b61ccfbb8e27d7a5eb07cedd2c8bdb08ba6197c13d4b4076fef1fd294467/Mock-up_Tablet_3.jpg" /> <img width="4000" height="2750" width_o="4000" height_o="2750" data-src="https://freight.cargo.site/t/original/i/06ad8380725307ce530964f8041c6c6a043cebaac9c32ccfa942d2fcd19b7c20/Mock-up_Tablet_2.jpg" data-mid="129298903" border="0" src="https://freight.cargo.site/w/1000/i/06ad8380725307ce530964f8041c6c6a043cebaac9c32ccfa942d2fcd19b7c20/Mock-up_Tablet_2.jpg" /> <img width="4000" height="2750" width_o="4000" height_o="2750" data-src="https://freight.cargo.site/t/original/i/4164614ba996d127cb0c2d7a2cf4911a9bbd5ec3215c34350d0859ecf142f810/Mock-up_Tablet_1.jpg" data-mid="129298902" border="0" src="https://freight.cargo.site/w/1000/i/4164614ba996d127cb0c2d7a2cf4911a9bbd5ec3215c34350d0859ecf142f810/Mock-up_Tablet_1.jpg" /> Thinking aheadAs new content needs emerge, we continue to innovate the card module functionality. One example was how to add two different functions, a download and play button on the same card. Our solution was to streamline the presentation and collapse both actions into an expandable UI. <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/89b42736632f2c567910a61804daad1c17ceb39049824c740a77e2dd187bad8f/Card_UI_inactive.jpg" data-mid="129299180" border="0" src="https://freight.cargo.site/w/1000/i/89b42736632f2c567910a61804daad1c17ceb39049824c740a77e2dd187bad8f/Card_UI_inactive.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/ca724de99961a9ca4259b09986345eef5d6b7dbe3d76435a63d269127b8a7e2c/Card_UI_active.jpg" data-mid="129299179" border="0" src="https://freight.cargo.site/w/1000/i/ca724de99961a9ca4259b09986345eef5d6b7dbe3d76435a63d269127b8a7e2c/Card_UI_active.jpg" /> <img width="4000" height="3000" width_o="4000" height_o="3000" data-src="https://freight.cargo.site/t/original/i/f9fd0abe9c180fb97494960443fba126adc12ffe77ea24334cd209f505503aac/smartphone-mockup-Screens.jpg" data-mid="129298800" border="0" src="https://freight.cargo.site/w/1000/i/f9fd0abe9c180fb97494960443fba126adc12ffe77ea24334cd209f505503aac/smartphone-mockup-Screens.jpg" /> Athletics project teamPartners: Jameson Proctor &amp; Malcolm BuickProject Manager: Kathryn FarwellDesigners: Allison Connell, Triana Thompson &amp; Jaime Patino-CalvoStrategist: Zander AbranowiczDevelopers: Ross Luebe, Britton Walker, Mike Beaujean https://jaimepatino.com/NYU-Campus Tue, 21 Dec 2021 23:35:17 +0000 jaimepatino https://jaimepatino.com/NYU-Campus NYU Campus As the pandemic was starting to shutdown public spaces including universities, NYU came to us to help them design a digital experience that could help prospective students get a feel for their campus, including its buildings and dorms.&nbsp;Designed at Athletics Website:&nbsp;meet.nyu.edu/campus Role: UI and Interactive design <img width="3273" height="2182" width_o="3273" height_o="2182" data-src="https://freight.cargo.site/t/original/i/62a2d95e5edc742ab5e716288c696a352c77839904f5e110e066c1db456e0fcb/NYU_Laptop_Mockup_Hero.jpg" data-mid="129184679" border="0" src="https://freight.cargo.site/w/1000/i/62a2d95e5edc742ab5e716288c696a352c77839904f5e110e066c1db456e0fcb/NYU_Laptop_Mockup_Hero.jpg" /> Experience definitionThere were multiple parts of the experience. We designed a campus lander page, an interactive map with a panel view for additional context, and a detail page for each campus location.&nbsp; <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/c59cc3d4b016d02d34390fbc4c202d20e51d82d892ddadb2fc6055a0255a25e1/Full-Pages_Mock-up.jpg" data-mid="127972061" border="0" src="https://freight.cargo.site/w/1000/i/c59cc3d4b016d02d34390fbc4c202d20e51d82d892ddadb2fc6055a0255a25e1/Full-Pages_Mock-up.jpg" /> Branded Digital ExperienceThe visual system for this experience builds off the NYU brand toolkit. We designed new UI moments for map interactions, including pin hover, location number system, and line interactivity on scroll. <img width="1800" height="2025" width_o="1800" height_o="2025" data-src="https://freight.cargo.site/t/original/i/9ca76fcf4339206013d2e60a80ece3d0821086d83dce27056cafdf38d0bc148a/NYU_Visual-system.jpg" data-mid="127970803" border="0" src="https://freight.cargo.site/w/1000/i/9ca76fcf4339206013d2e60a80ece3d0821086d83dce27056cafdf38d0bc148a/NYU_Visual-system.jpg" /> <img width="6400" height="4400" width_o="6400" height_o="4400" data-src="https://freight.cargo.site/t/original/i/d0c2f09986e443ee90ac66c63008bcc5dfabfcd04c53aee65f066159b58ad314/NYU_iPad-Mockup_v01.jpg" data-mid="127970840" border="0" src="https://freight.cargo.site/w/1000/i/d0c2f09986e443ee90ac66c63008bcc5dfabfcd04c53aee65f066159b58ad314/NYU_iPad-Mockup_v01.jpg" /> <img width="6400" height="4400" width_o="6400" height_o="4400" data-src="https://freight.cargo.site/t/original/i/33f6b40aaa8dd3622d68763b8fdf07f386e6949e4d08c37fed2d809393175e29/NYU_iPad-Mockup_v02.jpg" data-mid="127970841" border="0" src="https://freight.cargo.site/w/1000/i/33f6b40aaa8dd3622d68763b8fdf07f386e6949e4d08c37fed2d809393175e29/NYU_iPad-Mockup_v02.jpg" /> <img width="6400" height="4400" width_o="6400" height_o="4400" data-src="https://freight.cargo.site/t/original/i/39e6a583ee99396aba1664fab84004644b5c04962837a0ad275c95c44a937f23/NYU_iPad-Mockup_v03.jpg" data-mid="127970842" border="0" src="https://freight.cargo.site/w/1000/i/39e6a583ee99396aba1664fab84004644b5c04962837a0ad275c95c44a937f23/NYU_iPad-Mockup_v03.jpg" /> Interactive momentA key moment in this experience is the duality of navigation within the map. The user can not only zoom in and out and hover over pins, but it could also scroll the right panel and navigate through the different locations that way. This duality of experience helped give users more information and context about each place. <img width="4000" height="3000" width_o="4000" height_o="3000" data-src="https://freight.cargo.site/t/original/i/8600fc42a84f9c11daa078a06511a1ac2565b1752bf87ca3c4a9d8d96454bfca/NYU_smartphone-mockup-clay.jpg" data-mid="127970843" border="0" src="https://freight.cargo.site/w/1000/i/8600fc42a84f9c11daa078a06511a1ac2565b1752bf87ca3c4a9d8d96454bfca/NYU_smartphone-mockup-clay.jpg" /> Athletics project teamPartner: Jameson ProctorProject Manager: Kathryn FarwellDesigners: Jaime Patino-CalvoDevelopers: Britton Walker https://jaimepatino.com/XQ-Institute Thu, 06 Jan 2022 05:10:55 +0000 jaimepatino https://jaimepatino.com/XQ-Institute XQ Institute XQ Institute is the nation’s leading organization in re-imagining and innovating high school curriculum and high school experiences. As they continued to grow and expand their capabilities and products, they needed a digital redesign that gave them a solid design system and digital foundation in which they could continue to develop new products, market their initiatives, and reach new audiences.&nbsp;Designed at AthleticsWebsites:&nbsp;xqsuperschool.org |&nbsp;xqsuperschool.org/yearbook Role: UX, UI, Interaction and system design Recognition: 2021&nbsp;Webby nominee <img width="4598" height="3161" width_o="4598" height_o="3161" data-src="https://freight.cargo.site/t/original/i/bf7c8a4cdb4d56ee36571a3d6fe88292489abbb855b43001b558eacd1c0fabd9/Homepage_Laptop-Mock-Up.jpg" data-mid="129186185" border="0" src="https://freight.cargo.site/w/1000/i/bf7c8a4cdb4d56ee36571a3d6fe88292489abbb855b43001b558eacd1c0fabd9/Homepage_Laptop-Mock-Up.jpg" /> Big picture We started by redesigning their marketing website and creating a new digital experience that spoke to their core audience. By Showcasing engaging thought leadership, helpful resources for students, and putting a spotlight on XQ schools and student voices, we were able to give them a more genuine voice and presence. This initial work created a foundation in which we could continue to build more digital products that supported the types of content and stories XQ wanted to tell. <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/9161ec400425b290936b88ef7085a32333ac759d48b795f1c1945b1ef8ba153f/Full-Pages_Mock-up_1.jpg" data-mid="129186220" border="0" src="https://freight.cargo.site/w/1000/i/9161ec400425b290936b88ef7085a32333ac759d48b795f1c1945b1ef8ba153f/Full-Pages_Mock-up_1.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/6ddb451f4b7d86f58934c3efa17cc495e7d0e50b078602027ca28f47e1d82dd5/Full-Pages_Mock-up_2.jpg" data-mid="129186221" border="0" src="https://freight.cargo.site/w/1000/i/6ddb451f4b7d86f58934c3efa17cc495e7d0e50b078602027ca28f47e1d82dd5/Full-Pages_Mock-up_2.jpg" /> UX strategy We started by defining the content structure of the marketing site first. Once we finalized the content strategy and defined what types of pages we needed, we then identified the different types of modules that we might need for current and feature content needs. The main goal was to develop a modular foundation that could grow as new types of content and new digital products created the need for new modules. This approach meant that our design system needed to be flexible as well. <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/c42c570d7f67377b395c47ff413d7abf05944763dd00ac6d95001f7c2c2b03dd/XQ_UX_1.jpg" data-mid="129186320" border="0" src="https://freight.cargo.site/w/1000/i/c42c570d7f67377b395c47ff413d7abf05944763dd00ac6d95001f7c2c2b03dd/XQ_UX_1.jpg" /> <img width="3600" height="2025" width_o="3600" height_o="2025" data-src="https://freight.cargo.site/t/original/i/0c5c5277394d63459630fef05f33291f35d9e3782f89c379e440c4dca140d1df/XQ_UX_2.jpg" data-mid="129186321" border="0" src="https://freight.cargo.site/w/1000/i/0c5c5277394d63459630fef05f33291f35d9e3782f89c379e440c4dca140d1df/XQ_UX_2.jpg" /> Visual systemWe went with a minimal approach to the visual system so the content could take center stage. Our workhorse typeface, Graphik, with multiple font weights, gave us a typography system that works across headlines, text, and UI elements. We kept the color system very simple, using XQ green as the primary color and using the other brand colors as an accent or across illustrations. We developed a few illustrations that helped bring a sense of energy and excitement to the pages. Collecting and curating photography was also important, especially for content coming from the editorial team. <img width="1800" height="2025" width_o="1800" height_o="2025" data-src="https://freight.cargo.site/t/original/i/64f6cf1dec78efb9c6bf6c670d904b9225d420b170c5f0edcb2aa0575f5d0001/UI-System_XQ.jpg" data-mid="129186397" border="0" src="https://freight.cargo.site/w/1000/i/64f6cf1dec78efb9c6bf6c670d904b9225d420b170c5f0edcb2aa0575f5d0001/UI-System_XQ.jpg" /> <img width="1800" height="2025" width_o="1800" height_o="2025" data-src="https://freight.cargo.site/t/original/i/ae1ee1405ba61464b734a97ee0c6ead1fe76569350f0d771d053b1454737aafd/Illustrations_3.jpg" data-mid="129186450" border="0" src="https://freight.cargo.site/w/1000/i/ae1ee1405ba61464b734a97ee0c6ead1fe76569350f0d771d053b1454737aafd/Illustrations_3.jpg" /> <img width="1800" height="2025" width_o="1800" height_o="2025" data-src="https://freight.cargo.site/t/original/i/10299176da74a2c234451a9befd64ef60c055b9d60d76d1da247b91a866641e6/Illustrations_4.jpg" data-mid="129186451" border="0" src="https://freight.cargo.site/w/1000/i/10299176da74a2c234451a9befd64ef60c055b9d60d76d1da247b91a866641e6/Illustrations_4.jpg" /> <img width="1800" height="2025" width_o="1800" height_o="2025" data-src="https://freight.cargo.site/t/original/i/c131b2e2c6687e35d0482ee4ac3b4be97be5ee84b026301ba59bc41670374968/Illustrations_1.jpg" data-mid="129186448" border="0" src="https://freight.cargo.site/w/1000/i/c131b2e2c6687e35d0482ee4ac3b4be97be5ee84b026301ba59bc41670374968/Illustrations_1.jpg" /> <img width="1800" height="2025" width_o="1800" height_o="2025" data-src="https://freight.cargo.site/t/original/i/2fa9a004689b43bfac7b4ce6d1d437a2bbbeeedd8d77dc33b26e22b886976d5b/Illustrations_2.jpg" data-mid="129186449" border="0" src="https://freight.cargo.site/w/1000/i/2fa9a004689b43bfac7b4ce6d1d437a2bbbeeedd8d77dc33b26e22b886976d5b/Illustrations_2.jpg" /> Content modulesCreating a cohesive modular system that works across different digital products was one of our main goals in this project. At a basic level, our modules are dynamic, meaning they can change in design, but their content structure stays the same. This approach also streamlines content and keeps it consistent across multiple products. <img width="1800" height="2025" width_o="1800" height_o="2025" data-src="https://freight.cargo.site/t/original/i/3bfc376ea71d4a2104f1d30fd1f03d8297b65135f4702bea90fd11a2215f9454/Card-System_XQ_v01.jpg" data-mid="129186394" border="0" src="https://freight.cargo.site/w/1000/i/3bfc376ea71d4a2104f1d30fd1f03d8297b65135f4702bea90fd11a2215f9454/Card-System_XQ_v01.jpg" /> <img width="6000" height="4002" width_o="6000" height_o="4002" data-src="https://freight.cargo.site/t/original/i/81d4f3cffd7045fad1d3b1f4bac439f1e7427353543915a1fb61b467ea968297/Mockup_Mobile_v01.jpg" data-mid="129186495" border="0" src="https://freight.cargo.site/w/1000/i/81d4f3cffd7045fad1d3b1f4bac439f1e7427353543915a1fb61b467ea968297/Mockup_Mobile_v01.jpg" /> <img width="6000" height="4002" width_o="6000" height_o="4002" data-src="https://freight.cargo.site/t/original/i/ca9b04086c17fa84ec17f17ab10042ddcc019596594997babcf5c78c0bfc5608/Mockup_Mobile_v02.jpg" data-mid="129186496" border="0" src="https://freight.cargo.site/w/1000/i/ca9b04086c17fa84ec17f17ab10042ddcc019596594997babcf5c78c0bfc5608/Mockup_Mobile_v02.jpg" /> <img width="6000" height="4002" width_o="6000" height_o="4002" data-src="https://freight.cargo.site/t/original/i/c090513d09117b87abec636589ca886ebaeb48d29ba48b7383d0a9d47941f05b/Mockup_Mobile_v03.jpg" data-mid="129186497" border="0" src="https://freight.cargo.site/w/1000/i/c090513d09117b87abec636589ca886ebaeb48d29ba48b7383d0a9d47941f05b/Mockup_Mobile_v03.jpg" /> <img width="1800" height="2025" width_o="1800" height_o="2025" data-src="https://freight.cargo.site/t/original/i/1e4468f26730879b73b5c2adc6163e6f789d0f8b94f64f0b842eb90e85d8b17f/Card-System_XQ_v02.jpg" data-mid="129186395" border="0" src="https://freight.cargo.site/w/1000/i/1e4468f26730879b73b5c2adc6163e6f789d0f8b94f64f0b842eb90e85d8b17f/Card-System_XQ_v02.jpg" /> <img width="4000" height="2750" width_o="4000" height_o="2750" data-src="https://freight.cargo.site/t/original/i/e7fb1585b9bcbf6e3c87cff38aa9f5add257b06594272543e89c87d17859f8b0/iPad_Map.jpg" data-mid="129186906" border="0" src="https://freight.cargo.site/w/1000/i/e7fb1585b9bcbf6e3c87cff38aa9f5add257b06594272543e89c87d17859f8b0/iPad_Map.jpg" /> <img width="4000" height="2750" width_o="4000" height_o="2750" data-src="https://freight.cargo.site/t/original/i/ee4702772776493df8f11471c6e129e9883b831c38e879019598eaf7457a1c31/iPad_Map_Hover.jpg" data-mid="129186905" border="0" src="https://freight.cargo.site/w/1000/i/ee4702772776493df8f11471c6e129e9883b831c38e879019598eaf7457a1c31/iPad_Map_Hover.jpg" /> <img width="4000" height="2750" width_o="4000" height_o="2750" data-src="https://freight.cargo.site/t/original/i/390305ad250315bc7a0264cebe000522df11af729a5155b2459a95ab664894e9/iPad_Map_Hover-card.jpg" data-mid="129186903" border="0" src="https://freight.cargo.site/w/1000/i/390305ad250315bc7a0264cebe000522df11af729a5155b2459a95ab664894e9/iPad_Map_Hover-card.jpg" /> Extending the systemAs the system continues to grow and new digital experiences are created, we continued to experiment with new ways to tell more engaging stories for XQ. We began developing an interactive map that showed how much money each state received from the government. This map gave the user a quick view of the data. To bring the user deeper into the content, we developed a modular system with dynamic graphs that XQ editors could use to build intricate state data pages from scratch. <img width="2880" height="1766" width_o="2880" height_o="1766" data-src="https://freight.cargo.site/t/original/i/024b9793a493e18767c6797c77b46408ea226d5ee2fbe2f539e175b5124363a4/Data-card-1.jpg" data-mid="129186994" border="0" src="https://freight.cargo.site/w/1000/i/024b9793a493e18767c6797c77b46408ea226d5ee2fbe2f539e175b5124363a4/Data-card-1.jpg" /> <img width="2880" height="1766" width_o="2880" height_o="1766" data-src="https://freight.cargo.site/t/original/i/a31450cf41f0a016ca79f0b5059f11ea25735928d9a92476b2deb659984ec570/Data-card-2.jpg" data-mid="129186995" border="0" src="https://freight.cargo.site/w/1000/i/a31450cf41f0a016ca79f0b5059f11ea25735928d9a92476b2deb659984ec570/Data-card-2.jpg" /> <img width="2880" height="1766" width_o="2880" height_o="1766" data-src="https://freight.cargo.site/t/original/i/f7c2c09ed0e4563958c564611546cf6614a92d4614b7a97124a7f96044520276/Data-card-3.jpg" data-mid="129186996" border="0" src="https://freight.cargo.site/w/1000/i/f7c2c09ed0e4563958c564611546cf6614a92d4614b7a97124a7f96044520276/Data-card-3.jpg" /> <img width="2880" height="1766" width_o="2880" height_o="1766" data-src="https://freight.cargo.site/t/original/i/86fc542c8694198b3efc9f1b09ee9647d656c9258a7c7695e7054e79db8798c1/Data-card-4.jpg" data-mid="129186997" border="0" src="https://freight.cargo.site/w/1000/i/86fc542c8694198b3efc9f1b09ee9647d656c9258a7c7695e7054e79db8798c1/Data-card-4.jpg" /> <img width="2880" height="1766" width_o="2880" height_o="1766" data-src="https://freight.cargo.site/t/original/i/5402aa2729af71c0190c45ee501573cce1edc557f9f3916eccdbc85e63b50c5d/Data-card-5.jpg" data-mid="129186998" border="0" src="https://freight.cargo.site/w/1000/i/5402aa2729af71c0190c45ee501573cce1edc557f9f3916eccdbc85e63b50c5d/Data-card-5.jpg" /> <img width="4000" height="6000" width_o="4000" height_o="6000" data-src="https://freight.cargo.site/t/original/i/ae6c5576cdc04b6641eb22e4244828aa56fa0de22e59f2ac525f8212fecd15c4/Data-card_Phone-Mockup.jpg" data-mid="129186999" border="0" src="https://freight.cargo.site/w/1000/i/ae6c5576cdc04b6641eb22e4244828aa56fa0de22e59f2ac525f8212fecd15c4/Data-card_Phone-Mockup.jpg" /> XQ Graduate Together More unique experiences required breaking out of the system, but some parts of the visual language remained the same. In the case of the XQ digital yearbook, we created a new set of templates and modules that borrowed elements from the core system, areas like navigation, typography, and UI.In this case, the new experience was a collaboration between XQ and the artist JR. High school students across the US could create a yearbook profile and add a selfie with JR’s iconic halftone background. <img width="4000" height="2750" width_o="4000" height_o="2750" data-src="https://freight.cargo.site/t/original/i/ffb51b37100cc77cbfcfa56e013c9eb7a33e1289baf912d0543b573586dfa540/Homepage_iPad-Mock-up.jpg" data-mid="129187193" border="0" src="https://freight.cargo.site/w/1000/i/ffb51b37100cc77cbfcfa56e013c9eb7a33e1289baf912d0543b573586dfa540/Homepage_iPad-Mock-up.jpg" /> Key functionality Each student was able to create a profile on the digital yearbook. The profile included their name, high school, graduating class, and a quote. One fun feature of this experience was a way for users to add stickers to each other’s profiles. The stickers acted as a digital signature. <img width="2880" height="1600" width_o="2880" height_o="1600" data-src="https://freight.cargo.site/t/original/i/2b423c5229ca7afb376c7c681c720ce255381e69164d8474aa0b2417c670d33e/Profile-Modal_Inactive.jpg" data-mid="129187276" border="0" src="https://freight.cargo.site/w/1000/i/2b423c5229ca7afb376c7c681c720ce255381e69164d8474aa0b2417c670d33e/Profile-Modal_Inactive.jpg" /> <img width="2880" height="1600" width_o="2880" height_o="1600" data-src="https://freight.cargo.site/t/original/i/0ce46e6ff1f409e41a5ae8c35e0c3b1e17f936b2e7773c582e94c335522b0087/Profile-Modal_active.jpg" data-mid="129187275" border="0" src="https://freight.cargo.site/w/1000/i/0ce46e6ff1f409e41a5ae8c35e0c3b1e17f936b2e7773c582e94c335522b0087/Profile-Modal_active.jpg" /> <img width="2880" height="1600" width_o="2880" height_o="1600" data-src="https://freight.cargo.site/t/original/i/0dfbe3ae2cc911f59ef9e60e34326e5474f4fd183d0bb83ee75aeb62422d0d9b/Profile-Modal_Sticker-selection.jpg" data-mid="129187277" border="0" src="https://freight.cargo.site/w/1000/i/0dfbe3ae2cc911f59ef9e60e34326e5474f4fd183d0bb83ee75aeb62422d0d9b/Profile-Modal_Sticker-selection.jpg" /> <img width="4000" height="3000" width_o="4000" height_o="3000" data-src="https://freight.cargo.site/t/original/i/52cdee098ca8e087b7b3f3d66786a50264cab2ff50037227745827cf261100bd/Stickers_smartphone-mockup-clay.jpg" data-mid="129187196" border="0" src="https://freight.cargo.site/w/1000/i/52cdee098ca8e087b7b3f3d66786a50264cab2ff50037227745827cf261100bd/Stickers_smartphone-mockup-clay.jpg" /> <img width="1800" height="1325" width_o="1800" height_o="1325" data-src="https://freight.cargo.site/t/original/i/ebd16b12b8f047b945e008c0af0a714e8c1c29d7d385dfad1891cb462521e595/Yearbook_UI_v02.jpg" data-mid="129187350" border="0" src="https://freight.cargo.site/w/1000/i/ebd16b12b8f047b945e008c0af0a714e8c1c29d7d385dfad1891cb462521e595/Yearbook_UI_v02.jpg" /> <img width="6400" height="4400" width_o="6400" height_o="4400" data-src="https://freight.cargo.site/t/original/i/972843e23e67ae9d6c5e071964a260e235e8c2130c7edbc4d1ee316d409e90ad/Map_iPad-Mock-up.jpg" data-mid="129187194" border="0" src="https://freight.cargo.site/w/1000/i/972843e23e67ae9d6c5e071964a260e235e8c2130c7edbc4d1ee316d409e90ad/Map_iPad-Mock-up.jpg" /> <img width="6400" height="4400" width_o="6400" height_o="4400" data-src="https://freight.cargo.site/t/original/i/9555376ef338e73815dcd100d0ac23c9de0906cfec321d6316ea9097f8186964/Map-pin-hover_iPad-Mock-up.jpg" data-mid="129187195" border="0" src="https://freight.cargo.site/w/1000/i/9555376ef338e73815dcd100d0ac23c9de0906cfec321d6316ea9097f8186964/Map-pin-hover_iPad-Mock-up.jpg" /> Interactive MapAn interactive map was another feature of the yearbook. Users were able to see student submissions across different high schools. Users can filter by country, around me, or search for specific schools. Using the map, users can go directly into student profiles, learn more about their peers, and sign each other’s yearbooks. <img width="1800" height="1685" width_o="1800" height_o="1685" data-src="https://freight.cargo.site/t/original/i/1fc8910d2817653aeac0d8753443c2d87195ff1ed8322369df7fe5dcdee9deea/Yearbook_UI_v01.jpg" data-mid="129187349" border="0" src="https://freight.cargo.site/w/1000/i/1fc8910d2817653aeac0d8753443c2d87195ff1ed8322369df7fe5dcdee9deea/Yearbook_UI_v01.jpg" /> Athletics project teamPartner: Matt OwensProject managers: Nathan Brouillet &amp; Tanya Lesun&nbsp;&nbsp;Designers: Allison Connell, Ellen Voorheis &amp; Jaime Patino-CalvoDevelopers: Ross Luebe, Michael Beaujean &amp; External partners https://jaimepatino.com/Stanford-Digital-Health Fri, 25 Oct 2019 18:15:31 +0000 jaimepatino https://jaimepatino.com/Stanford-Digital-Health Stanford Industry Relations &amp; Digital Health Within Stanford School of Medicine, the Digital Health and Industry Relations team is creating the next significant partnership that merges high-level research with product development. They needed a website that could showcase their partnership process, case studies, and helpful resources.&nbsp;Designed at Happy Cog Website: irdh.stanford.edu Role: Lead Designer &amp; Creative Director Service: Visual Design,&nbsp;UX&nbsp; <img width="2000" height="1290" width_o="2000" height_o="1290" data-src="https://freight.cargo.site/t/original/i/c0e6bf745105d118615b70eaf3b508e53044eb5214ebc334ce7e462a41d3bb66/Stanford_Homepage.png" data-mid="53414583" border="0" src="https://freight.cargo.site/w/1000/i/c0e6bf745105d118615b70eaf3b508e53044eb5214ebc334ce7e462a41d3bb66/Stanford_Homepage.png" /> <img width="2000" height="1099" width_o="2000" height_o="1099" data-src="https://freight.cargo.site/t/original/i/e8200f239d92ffbcdb9a467ba97ede1332b647f5bfd942dcd121260a1cd0ca5b/Stanford_Homepage-Fullpage.png" data-mid="53416351" border="0" src="https://freight.cargo.site/w/1000/i/e8200f239d92ffbcdb9a467ba97ede1332b647f5bfd942dcd121260a1cd0ca5b/Stanford_Homepage-Fullpage.png" /> A Branding MomentEven though The IRDH team is part of the School of Medicine, they still wanted a website that had a look and feel different from the official Stanford website system. We developed a visual system that spoke about the tension between faculty and tech. &nbsp; <img width="2000" height="973" width_o="2000" height_o="973" data-src="https://freight.cargo.site/t/original/i/6323b1ea57c274587ec071c6dd34f66a4bd1ef5541d856685ed4be9aa65c4152/Stanford_Header_1.png" data-mid="53414579" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/6323b1ea57c274587ec071c6dd34f66a4bd1ef5541d856685ed4be9aa65c4152/Stanford_Header_1.png" /> <img width="2000" height="973" width_o="2000" height_o="973" data-src="https://freight.cargo.site/t/original/i/b60c327fcc91d05504cc185957a08f5de23092c4d3701d47d9b79d97cd25b76c/Stanford_Header_2.png" data-mid="53414580" border="0" src="https://freight.cargo.site/w/1000/i/b60c327fcc91d05504cc185957a08f5de23092c4d3701d47d9b79d97cd25b76c/Stanford_Header_2.png" /> <img width="2000" height="973" width_o="2000" height_o="973" data-src="https://freight.cargo.site/t/original/i/50a87048ec29dcd8a2b788df92418b29f595dd338c48aa42b9463759d140d94b/Stanford_Header_3.png" data-mid="53414581" border="0" src="https://freight.cargo.site/w/1000/i/50a87048ec29dcd8a2b788df92418b29f595dd338c48aa42b9463759d140d94b/Stanford_Header_3.png" /> <img width="2000" height="973" width_o="2000" height_o="973" data-src="https://freight.cargo.site/t/original/i/501b7b71a2098df83ab064c025b7ea1d5d4129c05bca5cfcda09288ce6151fde/Stanford_Header_4.png" data-mid="53414582" border="0" src="https://freight.cargo.site/w/1000/i/501b7b71a2098df83ab064c025b7ea1d5d4129c05bca5cfcda09288ce6151fde/Stanford_Header_4.png" /> <img width="2000" height="1099" width_o="2000" height_o="1099" data-src="https://freight.cargo.site/t/original/i/0ed4e2014be1ad079f53c671c60ce4d2984e5a512a3321b0dff3fdb11aa367fa/Stanford_Homepage-Fullpage-System.png" data-mid="53416350" border="0" src="https://freight.cargo.site/w/1000/i/0ed4e2014be1ad079f53c671c60ce4d2984e5a512a3321b0dff3fdb11aa367fa/Stanford_Homepage-Fullpage-System.png" /> Flexible Case Study PagesWe develop a set of templates with modular flexibility, which allows the IRDH team to showcase different types of content. For the case studies pages, this meant they could let the project dictate the way the page can look and what kind of information to display. <img width="2000" height="973" width_o="2000" height_o="973" data-src="https://freight.cargo.site/t/original/i/83980017d8118ee5f65329dec7395119612d73ce24a417ccd576e41bdb64e832/Stanford_Header_CaseStudy_1.png" data-mid="53416346" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/83980017d8118ee5f65329dec7395119612d73ce24a417ccd576e41bdb64e832/Stanford_Header_CaseStudy_1.png" /> <img width="2000" height="973" width_o="2000" height_o="973" data-src="https://freight.cargo.site/t/original/i/a7df9bfff19462f22139a4963bc02375703f2ed338c3cd0137f128a5605b4d8d/Stanford_Header_CaseStudy_3.png" data-mid="53416348" border="0" src="https://freight.cargo.site/w/1000/i/a7df9bfff19462f22139a4963bc02375703f2ed338c3cd0137f128a5605b4d8d/Stanford_Header_CaseStudy_3.png" /> <img width="2000" height="973" width_o="2000" height_o="973" data-src="https://freight.cargo.site/t/original/i/833871adf2054c18da8d6f5fcb4e47a3fd15402f927dff959a90f26c62370916/Stanford_Header_CaseStudy_2.png" data-mid="53416347" border="0" src="https://freight.cargo.site/w/1000/i/833871adf2054c18da8d6f5fcb4e47a3fd15402f927dff959a90f26c62370916/Stanford_Header_CaseStudy_2.png" /> <img width="2000" height="1099" width_o="2000" height_o="1099" data-src="https://freight.cargo.site/t/original/i/a724fdb30e814bbeb9a5b7fbaccec8d811c203b1ffa5501aca7f49aa081e0118/Stanford_CaseStudy-Fullpage-System_1.png" data-mid="53416343" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/a724fdb30e814bbeb9a5b7fbaccec8d811c203b1ffa5501aca7f49aa081e0118/Stanford_CaseStudy-Fullpage-System_1.png" /> <img width="2000" height="1099" width_o="2000" height_o="1099" data-src="https://freight.cargo.site/t/original/i/386e708eca69ded9417c60e7f7caea48bacf4a3e09d657670f004007acea88a0/Stanford_CaseStudy-Fullpage-System_2.png" data-mid="53416344" border="0" src="https://freight.cargo.site/w/1000/i/386e708eca69ded9417c60e7f7caea48bacf4a3e09d657670f004007acea88a0/Stanford_CaseStudy-Fullpage-System_2.png" /> <img width="2000" height="1099" width_o="2000" height_o="1099" data-src="https://freight.cargo.site/t/original/i/13a78042e2cb0fd5510fc991a3611936c26e7de808465da1fbece43da3e5e05e/Stanford_CaseStudy-Fullpage-System_3.png" data-mid="53416345" border="0" src="https://freight.cargo.site/w/1000/i/13a78042e2cb0fd5510fc991a3611936c26e7de808465da1fbece43da3e5e05e/Stanford_CaseStudy-Fullpage-System_3.png" /> Visual ToolkitWe continued to develop the brand, creating a unique iconography language that they could use for their infographics and other information graphics. We also created a photography guide that could help the internal team or freelance photographers, pick or choose photography with a consistent look and feel. <img width="2001" height="1050" width_o="2001" height_o="1050" data-src="https://freight.cargo.site/t/original/i/32765ddfee772f355791e86280f5084b068995c2fce7ba5c18fa63a26fac6f78/Artboard-1-copy-55.png" data-mid="53418574" border="0" src="https://freight.cargo.site/w/1000/i/32765ddfee772f355791e86280f5084b068995c2fce7ba5c18fa63a26fac6f78/Artboard-1-copy-55.png" /> <img width="2001" height="1050" width_o="2001" height_o="1050" data-src="https://freight.cargo.site/t/original/i/81476e61d8268f796ac0355d68046d6efdecd06efa34ea6997d897724a45ce6a/Artboard-1-copy-56.png" data-mid="53422326" border="0" src="https://freight.cargo.site/w/1000/i/81476e61d8268f796ac0355d68046d6efdecd06efa34ea6997d897724a45ce6a/Artboard-1-copy-56.png" /> <img width="2001" height="1049" width_o="2001" height_o="1049" data-src="https://freight.cargo.site/t/original/i/123e6edaf32a026a4aa5bb533217882a7a20d6565def33da8000b8284ff965cd/Artboard-1-copy-53.png" data-mid="53418408" border="0" src="https://freight.cargo.site/w/1000/i/123e6edaf32a026a4aa5bb533217882a7a20d6565def33da8000b8284ff965cd/Artboard-1-copy-53.png" /><img width="2001" height="1050" width_o="2001" height_o="1050" data-src="https://freight.cargo.site/t/original/i/3ea6d013e8d46b680aaf58369e4bd1721e6cace397762beb0fc8f9023e740d9a/Artboard-1-copy-54.png" data-mid="53418409" border="0" src="https://freight.cargo.site/w/1000/i/3ea6d013e8d46b680aaf58369e4bd1721e6cace397762beb0fc8f9023e740d9a/Artboard-1-copy-54.png" />