https://snehakeshav.com Sneha Keshav Wed, 06 Jan 2021 02:29:24 +0000 https://snehakeshav.com en https://snehakeshav.com/Home Wed, 29 Apr 2020 18:01:17 +0000 Sneha Keshav https://snehakeshav.com/Home Hello!I’m Sneha, a New York based product + brand designer https://snehakeshav.com/Work-1 Tue, 30 Jun 2020 18:00:00 +0000 Sneha Keshav https://snehakeshav.com/Work-1 <img width="1873" height="819" width_o="1873" height_o="819" data-src="https://freight.cargo.site/t/original/i/cb454b802f13686e6718d4437ec89ca77eb6708205f5da0f8f34319369727291/menuArtboard-192x-80.jpg" data-mid="76313127" border="0" src="https://freight.cargo.site/w/1000/i/cb454b802f13686e6718d4437ec89ca77eb6708205f5da0f8f34319369727291/menuArtboard-192x-80.jpg" /> <img width="860" height="949" width_o="860" height_o="949" data-src="https://freight.cargo.site/t/original/i/bc88427f95ea2f1c65fec8d6dcd2f25042a7dd7d8012782ce87c526eb405d226/menuArtboard-18-copy-32x-80.jpg" data-mid="76313122" border="0" src="https://freight.cargo.site/w/860/i/bc88427f95ea2f1c65fec8d6dcd2f25042a7dd7d8012782ce87c526eb405d226/menuArtboard-18-copy-32x-80.jpg" /> <img width="860" height="949" width_o="860" height_o="949" data-src="https://freight.cargo.site/t/original/i/b8d59ccebcdc3b7ebad66aea2c445ec9ba4b69624eba75386cf141140df8f14a/menuArtboard-18-copy-22x-80.jpg" data-mid="76313121" border="0" src="https://freight.cargo.site/w/860/i/b8d59ccebcdc3b7ebad66aea2c445ec9ba4b69624eba75386cf141140df8f14a/menuArtboard-18-copy-22x-80.jpg" /> <img width="860" height="1001" width_o="860" height_o="1001" data-src="https://freight.cargo.site/t/original/i/e0a843c3e9955b6cff7f3bc641c9177fcbc50cdd7760a62019c589c2a83432ab/menuArtboard-18-copy-62x-80.jpg" data-mid="76314798" border="0" src="https://freight.cargo.site/w/860/i/e0a843c3e9955b6cff7f3bc641c9177fcbc50cdd7760a62019c589c2a83432ab/menuArtboard-18-copy-62x-80.jpg" /> <img width="860" height="1001" width_o="860" height_o="1001" data-src="https://freight.cargo.site/t/original/i/3014c959b6856f31deb0c07f2075365100f1c45c6a5b49129edb642890a65d99/menuArtboard-18-copy-72x-80.jpg" data-mid="76314799" border="0" src="https://freight.cargo.site/w/860/i/3014c959b6856f31deb0c07f2075365100f1c45c6a5b49129edb642890a65d99/menuArtboard-18-copy-72x-80.jpg" /> <img width="860" height="949" width_o="860" height_o="949" data-src="https://freight.cargo.site/t/original/i/742830bf6db37f389034aa0fc9f437eb40f7ba2391ecddc1d25de8575175046e/menuArtboard-18-copy-42x-80.jpg" data-mid="76313123" border="0" src="https://freight.cargo.site/w/860/i/742830bf6db37f389034aa0fc9f437eb40f7ba2391ecddc1d25de8575175046e/menuArtboard-18-copy-42x-80.jpg" /> <img width="860" height="949" width_o="860" height_o="949" data-src="https://freight.cargo.site/t/original/i/6663757017db90387c158c345b3be44933c49080f24d811bf4f9ad9f57c43710/menuArtboard-18-copy-52x-80.jpg" data-mid="76313124" border="0" src="https://freight.cargo.site/w/860/i/6663757017db90387c158c345b3be44933c49080f24d811bf4f9ad9f57c43710/menuArtboard-18-copy-52x-80.jpg" /> https://snehakeshav.com/Jigsaw-Design-Sys-1 Tue, 01 Dec 2020 19:06:14 +0000 Sneha Keshav https://snehakeshav.com/Jigsaw-Design-Sys-1 How a rebranding inspires a design system Jigsaw is a unit within Google that explores threats to open societies, and builds technology that inspires scalable solutions hence trying to make people safer from digital conflicts. https://snehakeshav.com/Jigsaw-Design-Sys-2 Tue, 01 Dec 2020 19:06:17 +0000 Sneha Keshav https://snehakeshav.com/Jigsaw-Design-Sys-2 Opportunity Why focus on a dedicated design system: Jigsaw Rebranding Jigsaw recently underwent a rebranding exercise to better tell its story of shaping technology to make people around the world safer. This gave the product team to explore a distinct design language that was inline with the branding. Non-Google BrandedBeing an open-sourced project with various ongoing partnerships, Jigsaw products needed to be distinct from Google branded produts for business distinction purposes. User Experience Consistent interactions across touchpoints can help with usability, trust, recognition, and satisfaction.&nbsp; https://snehakeshav.com/Jigsaw-Design-Sys-3 Wed, 02 Dec 2020 21:30:32 +0000 Sneha Keshav https://snehakeshav.com/Jigsaw-Design-Sys-3 ︎ Along with a brand alignment, a dedicated design system brings the opportunity to deliver high quality, distinct, and consistent experiences to Jigsaw users. ProjectCreate a design system that can promote visual consistency, workflow efficiency and crossfunctional confidence enabling PMs and engineers to&nbsp;better make implementation decisions. Design Foundations Define UX design principles and styles that can guide asset generation&nbsp; Components and Patterns Library Create a shared library of stadardized components and patterns for different product verticals and acclimatize product and engineering teams with Figma.RoleUI/UX Design along with Tara Hosseinipour and Monique Smith from Jigsaw UXD https://snehakeshav.com/Jigsaw-Design-Sys-4 Wed, 02 Dec 2020 21:18:34 +0000 Sneha Keshav https://snehakeshav.com/Jigsaw-Design-Sys-4 UX design principles ︎ Empower users to combat online threats Provide a safe space and empower at-risk users to define their own experience by giving them control to take action. Every element and interaction in our designs should have a clear purpose, understand our user’s needs, and enable them to achieve their goals specific to their context.&nbsp; ︎ Build trust through transperency Spearhead innovative problem solving for emerging problems while acknowledging the experimental nature of our work. Help users calibrate their trust by demystifying our technology and being honest about limitations. Don’t overwhelm users with information but ensure that they feel safe in using our products. ︎ Be cold and distinct Create experiences that are intentionally unique and visually stand out as the Jigsaw branded. Leverage Google patterns as a foundation of our design system to keep users focused, but build upon it to make stand out products. Leverage animations or other UI moments to create a Jigsaw personality. https://snehakeshav.com/Jigsaw-Design-Sys-5 Mon, 04 Jan 2021 22:42:24 +0000 Sneha Keshav https://snehakeshav.com/Jigsaw-Design-Sys-5 Styles Foundations of the design library considering legibility, accessibility, and branding.&nbsp; ︎Typography Jigsaw Sans and Roboto to balance distinct branding with legibility, content density, information hierarchy, and accessibility.&nbsp; <img width="3218" height="2474" width_o="3218" height_o="2474" data-src="https://freight.cargo.site/t/original/i/deef7ad0c80c6eb6a5434c989b22d766cd28441f78f3eb89d5d1ecef8d29edaf/Typography.png" data-mid="94078021" border="0" data-scale="68" src="https://freight.cargo.site/w/1000/i/deef7ad0c80c6eb6a5434c989b22d766cd28441f78f3eb89d5d1ecef8d29edaf/Typography.png" /> ︎ Color Strategy Jigsaw’s branding strategy relies heavily on an overall monochromatic aesthetic with specific colors assigned to each product/provblem space. For the product design system these product colors were fleshed out further to create scalable colors for dark and light UI while improving usability with accessible contrast ratios. <img width="3746" height="3238" width_o="3746" height_o="3238" data-src="https://freight.cargo.site/t/original/i/1d5151d9c528f7cea0871c0e1f340c3423bf9d6269290a8e8088488dc6c17383/Frame-606.png" data-mid="94077584" border="0" src="https://freight.cargo.site/w/1000/i/1d5151d9c528f7cea0871c0e1f340c3423bf9d6269290a8e8088488dc6c17383/Frame-606.png" /> ︎ Surfaces Jigsaw’s branding strategy relies heavily on an overall monochromatic aesthetic with specific colors assigned to each product/provblem space. For the product design system these product colors were fleshed out further to create scalable colors for dark and light UI while improving usability with accessible contrast ratios. <img width="2704" height="2414" width_o="2704" height_o="2414" data-src="https://freight.cargo.site/t/original/i/f6b24c8c58dddf35b9556505453d325cd0b2b696ac10985503a53ed203056a5a/surface-2.png" data-mid="94078728" border="0" src="https://freight.cargo.site/w/1000/i/f6b24c8c58dddf35b9556505453d325cd0b2b696ac10985503a53ed203056a5a/surface-2.png" /> https://snehakeshav.com/Jigsaw-Design-Sys-6 Tue, 05 Jan 2021 23:57:25 +0000 Sneha Keshav https://snehakeshav.com/Jigsaw-Design-Sys-6 <img width="3778" height="2564" width_o="3778" height_o="2564" data-src="https://freight.cargo.site/t/original/i/a8188ec44f8b9ec8d18496ba13383faf2ef028ac59c37a344c26868238e5f15c/Surface.png" data-mid="94083844" border="0" data-scale="70" src="https://freight.cargo.site/w/1000/i/a8188ec44f8b9ec8d18496ba13383faf2ef028ac59c37a344c26868238e5f15c/Surface.png" />Surfaces in use for a mock for Outline https://snehakeshav.com/Jigsaw-Design-Sys-8 Wed, 06 Jan 2021 02:00:18 +0000 Sneha Keshav https://snehakeshav.com/Jigsaw-Design-Sys-8 Components An overview of the component library, focusing on the interactivity inspired by branded art direction concepts which lends an expressive personality as well as sets expectations for interactions. ︎Contrast <img width="298" height="182" width_o="298" height_o="182" data-src="https://freight.cargo.site/t/original/i/d6c8140b2f028e227a10edf72faf69f2d97353044605f3ae4bde70b422c79c38/button-.gif" data-mid="94091957" border="0" data-scale="67" src="https://freight.cargo.site/w/298/i/d6c8140b2f028e227a10edf72faf69f2d97353044605f3ae4bde70b422c79c38/button-.gif" /> Seen with monochromatic UI and using product colors to further emphasize interactive moments. Also seen in sharper edges and flat component containers. <img width="1600" height="1503" width_o="1600" height_o="1503" data-src="https://freight.cargo.site/t/original/i/19b96dec812dc7e9bc06e102b5824050a473b0751f033b7db3e76080017576c4/buttons-.png" data-mid="94092401" border="0" src="https://freight.cargo.site/w/1000/i/19b96dec812dc7e9bc06e102b5824050a473b0751f033b7db3e76080017576c4/buttons-.png" /> ︎Illuminate <img width="550" height="192" width_o="550" height_o="192" data-src="https://freight.cargo.site/t/original/i/61661c7bb56cb67f965f29c4d28fcd245440901860437a3a477d2a3b9e8b0d5c/illuminate.gif" data-mid="94092635" border="0" src="https://freight.cargo.site/w/550/i/61661c7bb56cb67f965f29c4d28fcd245440901860437a3a477d2a3b9e8b0d5c/illuminate.gif" />Seen with monochromatic UI and using product colors to further emphasize interactive moments. Also seen in sharper edges and flat component containers. <img width="1600" height="1419" width_o="1600" height_o="1419" data-src="https://freight.cargo.site/t/original/i/b30295aec9bbf5b7be1c2ac20cdf484d19329aed7a3b1639f5047738882294e4/illuminate.png" data-mid="94092637" border="0" src="https://freight.cargo.site/w/1000/i/b30295aec9bbf5b7be1c2ac20cdf484d19329aed7a3b1639f5047738882294e4/illuminate.png" /> ︎Distort <img width="884" height="192" width_o="884" height_o="192" data-src="https://freight.cargo.site/t/original/i/bcdf7f14ede01915cb046e5b11b68bf8a163fc75ccccca95791381b52ef15321/distort.gif" data-mid="94092633" border="0" src="https://freight.cargo.site/w/884/i/bcdf7f14ede01915cb046e5b11b68bf8a163fc75ccccca95791381b52ef15321/distort.gif" />Interpreted as movement to the interactive elements more expressive and accessible by not depending solely on color to communicate state change. <img width="1600" height="1275" width_o="1600" height_o="1275" data-src="https://freight.cargo.site/t/original/i/541e425f96b6240d2e34676dddb073017e057a4ef35e79b9d069c98dffd805f0/distort.png" data-mid="94092634" border="0" src="https://freight.cargo.site/w/1000/i/541e425f96b6240d2e34676dddb073017e057a4ef35e79b9d069c98dffd805f0/distort.png" /> https://snehakeshav.com/Jigsaw-Design-Sys-9 Wed, 06 Jan 2021 02:29:24 +0000 Sneha Keshav https://snehakeshav.com/Jigsaw-Design-Sys-9 Socializing the design system <img width="6857" height="3188" width_o="6857" height_o="3188" data-src="https://freight.cargo.site/t/original/i/0dddc98e295a1a96bb889c7f0399e2b634e07b4205ec6fe2048b6063e9a2350c/resources.png" data-mid="94093379" border="0" src="https://freight.cargo.site/w/1000/i/0dddc98e295a1a96bb889c7f0399e2b634e07b4205ec6fe2048b6063e9a2350c/resources.png" /> ︎FeedbackThe system was constantly shared with the UX team during design critiques. The marketing team weighed in on brand alignement and the engg team gave great feedback on feasibility and concerns about a teamwide roll-out plan.&nbsp; ︎IterateFeedback ranging for accesibility and scalabilty were incorporated post the regular check-ins with the Material Design team. Monique Smith, a UXD on my team helped shed some light on&nbsp; a11y guidelines and considerations. ︎Share-outThe system is now accesible as a open resource on the internal Jigsaw website with best practices, style overviews and&nbsp; linking each asset to the respective components in the Figma library, thanks to Tara Hosseinipour’s organization and curation.