https://elaine-zhang.com Elaine Zhang Sat, 28 Dec 2024 22:34:29 +0000 https://elaine-zhang.com en https://elaine-zhang.com/Index Thu, 18 Apr 2024 02:36:47 +0000 Elaine Zhang https://elaine-zhang.com/Index Elaine Zhang is a product designer based in New York City. She is driven by accessible design, delightful experiences, and the urge to spoil her cat. CurrentlyLooking to be your next designer Select Works ↓ PreviouslyProduct designer @ eRESI Other things I can doBrand and identity design, graphic design, digital illustration Commonwealth of Pennsylvania Do it Best iNerde Academy Other things I’ve done ↓ An award-winning design system for 60+ state agencies Visual design strategy for a digital retail experience Creating an online education platform for a STEM non-profit Interventions Brand, identity, and UI for a student design conference Humana Redesigning the online Medicare enrollment process PerZeptionCreating a website for a vision testing startup https://elaine-zhang.com/dibHeader-copy Fri, 27 Dec 2024 23:43:58 +0000 Elaine Zhang https://elaine-zhang.com/dibHeader-copy <img width="5760" height="1656" width_o="5760" height_o="1656" data-src="https://freight.cargo.site/t/original/i/ab17fd34fdbc8afc35d341ee9b555b38536484660f5644d62c24ac3fe927cbcb/Frame-1.png" data-mid="223890424" border="0" src="https://freight.cargo.site/w/1000/i/ab17fd34fdbc8afc35d341ee9b555b38536484660f5644d62c24ac3fe927cbcb/Frame-1.png" /> https://elaine-zhang.com/iNERDE-copy-copy Fri, 27 Dec 2024 23:44:12 +0000 Elaine Zhang https://elaine-zhang.com/iNERDE-copy-copy Commonwealth of PennsylvaniaA complete redesign of the Pennsylvania digital ecosystem ROLEUI Designer TOOLSFigma, Figjam, Adobe Experience Manager, Zeroheight https://elaine-zhang.com/iText-copy-copy Fri, 27 Dec 2024 23:44:16 +0000 Elaine Zhang https://elaine-zhang.com/iText-copy-copy PromptRedesign Pennsylvania’s official website, PA.gov and its 60+ affiliated agency sites PA.gov had a recurring complaint from its users– it was extremely difficult to navigate within and between the 64 agency sites. Pennsylvanians often had to navigate through long user flows to complete critical tasks such as filing taxes, registering to vote, or finding health insurance. As a UI designer at Publicis Sapient, my role was to work with the Commonwealth Office of Digital Experience (CODE) to do a complete overhaul of PA.gov’s design system. https://elaine-zhang.com/iText-2-copy-copy Fri, 27 Dec 2024 23:44:22 +0000 Elaine Zhang https://elaine-zhang.com/iText-2-copy-copy 1. Project Goals Improve accessibility Modernize design elements Facilitate consistency across the PA.gov digital ecosystem Optimize for mobile users Support scalability and flexibility 2 Starting PointLooking at the PA.gov websites, we immediately noticed a glaring issue. There was a lack of consistency between the agency websites, with each site having its own design system and navigation flows. For tasks that required multiple agencies, a user would have to figure out how to use each site separately, costing them time and energy for already urgent tasks. <img width="3424" height="2016" width_o="3424" height_o="2016" data-src="https://freight.cargo.site/t/original/i/f6e4a5463d17a4b637d4e8656ca450779f0a74dd07f81d3f04ff407bc3794e4a/KDS-Workshop-Planning2.png" data-mid="223868959" border="0" src="https://freight.cargo.site/w/1000/i/f6e4a5463d17a4b637d4e8656ca450779f0a74dd07f81d3f04ff407bc3794e4a/KDS-Workshop-Planning2.png" /><img width="3424" height="2016" width_o="3424" height_o="2016" data-src="https://freight.cargo.site/t/original/i/85f7ce97a05883599f54c47b1962d8f1d1c90662c65c62096debfe9aa434e8b5/KDS-Workshop-Planning.png" data-mid="223868958" border="0" src="https://freight.cargo.site/w/1000/i/85f7ce97a05883599f54c47b1962d8f1d1c90662c65c62096debfe9aa434e8b5/KDS-Workshop-Planning.png" /> The CODE team conducted 370+ hours of user interviews, including focus group sessions with the First Lady of Pennsylvania to gather input on what improvements residents needed and what digital services were missing. https://elaine-zhang.com/iText-3-copy-copy Fri, 27 Dec 2024 23:44:28 +0000 Elaine Zhang https://elaine-zhang.com/iText-3-copy-copy 3 Design System Our design system was documented as tokens, allowing for a scalable, consistent, and manageable approach within our multi-disicplinary team. The system meets the latest Web Content Accessibility Guidelines, WCAG 2.2 A and AA. <img width="3322" height="1404" width_o="3322" height_o="1404" data-src="https://freight.cargo.site/t/original/i/a2d9e76a30e60d781cea7988d4e0a975bbbc407fd59a30d52abf6153d37ab895/KDS-Workshop-Planning2.png" data-mid="223888959" border="0" src="https://freight.cargo.site/w/1000/i/a2d9e76a30e60d781cea7988d4e0a975bbbc407fd59a30d52abf6153d37ab895/KDS-Workshop-Planning2.png" /> <img width="8608" height="3392" width_o="8608" height_o="3392" data-src="https://freight.cargo.site/t/original/i/3d2b803de3d042c3162002b34896e8f8f010e086b2921d87a3bf3cfbc41cb0c3/KDS-Workshop-Planningelevation.png" data-mid="223889037" border="0" src="https://freight.cargo.site/w/1000/i/3d2b803de3d042c3162002b34896e8f8f010e086b2921d87a3bf3cfbc41cb0c3/KDS-Workshop-Planningelevation.png" /> <img width="15264" height="7520" width_o="15264" height_o="7520" data-src="https://freight.cargo.site/t/original/i/914042b53a920930932d68f795191573fede0fa3e801eab5a0fe6e5eeef7d7f9/KDS-Workshop-Planningtype.png" data-mid="223889039" border="0" src="https://freight.cargo.site/w/1000/i/914042b53a920930932d68f795191573fede0fa3e801eab5a0fe6e5eeef7d7f9/KDS-Workshop-Planningtype.png" /> <img width="15264" height="8128" width_o="15264" height_o="8128" data-src="https://freight.cargo.site/t/original/i/84827638833f79e5a69bf340b85b75468735357cc4537e7ac791b1d57c89bba8/layout.png" data-mid="223889040" border="0" src="https://freight.cargo.site/w/1000/i/84827638833f79e5a69bf340b85b75468735357cc4537e7ac791b1d57c89bba8/layout.png" /> <img width="15488" height="11776" width_o="15488" height_o="11776" data-src="https://freight.cargo.site/t/original/i/ecc73d83b829ce9ec4c6e604dacb87de501ecb866c1395073268829aab6f8a5a/KDS-Workshop-Planningcolor.png" data-mid="223889036" border="0" src="https://freight.cargo.site/w/1000/i/ecc73d83b829ce9ec4c6e604dacb87de501ecb866c1395073268829aab6f8a5a/KDS-Workshop-Planningcolor.png" /> <img width="15264" height="3392" width_o="15264" height_o="3392" data-src="https://freight.cargo.site/t/original/i/407c9278d1e591ac78e50266e5413ae455f5c54cc47d68e6d488f8775f094cef/KDS-Workshop-Planningicon.png" data-mid="223889038" border="0" src="https://freight.cargo.site/w/1000/i/407c9278d1e591ac78e50266e5413ae455f5c54cc47d68e6d488f8775f094cef/KDS-Workshop-Planningicon.png" /> https://elaine-zhang.com/iText-3-copy-copy-copy Sat, 28 Dec 2024 21:56:42 +0000 Elaine Zhang https://elaine-zhang.com/iText-3-copy-copy-copy 4 Component Library The next step was using our design system to create components. For this project, we designed 40+ components documented in Figma and ZeroHeight.&nbsp; <img width="1414" height="1296" width_o="1414" height_o="1296" data-src="https://freight.cargo.site/t/original/i/ed56d183be79e58000f30af6aee600875f85ed10e64f0227d31f89cc8ed66ff4/Screenshot-2024-12-28-at-5.05.55PM.png" data-mid="223889424" border="0" src="https://freight.cargo.site/w/1000/i/ed56d183be79e58000f30af6aee600875f85ed10e64f0227d31f89cc8ed66ff4/Screenshot-2024-12-28-at-5.05.55PM.png" /> <img width="1280" height="1278" width_o="1280" height_o="1278" data-src="https://freight.cargo.site/t/original/i/286af5f3b7ea3ae3365bf5bf1d9fe248a1a4ec219930b2356a51cc1e973686f1/Figma-Component-Library.jpg" data-mid="223889465" border="0" src="https://freight.cargo.site/w/1000/i/286af5f3b7ea3ae3365bf5bf1d9fe248a1a4ec219930b2356a51cc1e973686f1/Figma-Component-Library.jpg" /> Documentation for developers and client use included guidelines on component states, interactions, alignment, responsive layout, and best accessibility practices. Next, we used the components to create page templates, In total, we designed 13 templates. <img width="2164" height="1470" width_o="2164" height_o="1470" data-src="https://freight.cargo.site/t/original/i/d1a17ed1ba0c099280a44f020a0090a2d40855fc47b50c82cf6d5b4ccc7d7072/Screenshot-2024-12-28-at-5.21.05PM.png" data-mid="223889719" border="0" src="https://freight.cargo.site/w/1000/i/d1a17ed1ba0c099280a44f020a0090a2d40855fc47b50c82cf6d5b4ccc7d7072/Screenshot-2024-12-28-at-5.21.05PM.png" /> The full documentation site is now live here. https://elaine-zhang.com/pText-final-copy-copy-copy Fri, 27 Dec 2024 23:44:34 +0000 Elaine Zhang https://elaine-zhang.com/pText-final-copy-copy-copy 5.Impact The PA.gov MVP launched in May 2024, with 48 of the 64 agencies adopting the new design system as of December 2024 and the rest aiming to be completed by early 2025. View the new PA.gov here.Finalist, Government Experience Awards 2024 Government Changemaker Award, Code for America 2024 https://elaine-zhang.com/pText-final-copy-copy-copy-copy Sat, 28 Dec 2024 22:34:29 +0000 Elaine Zhang https://elaine-zhang.com/pText-final-copy-copy-copy-copy “The new PA.gov will help you find human-centered, user-friendly, and faster digital services online that provide you with the opportunity to take advantage of all the resources and benefits the Commonwealth offers.” - Gov. Josh Shapiro “The new PA.gov will provide a better user experience for every Pennsylvanian. We have fundamentally re-imagined our digital presence from the perspective of our residents, putting their needs at the forefront of every design decision”- PA Secretary of Administration, Neil Weaver “What CODE PA has achieved in just one year is remarkable and shows how critical digital service delivery teams can be to make government work better.” - Deputy Administrator of the U.S. Digital Service, Cori Zarek “The Commonwealth Office of Digital Experience is changing lives in Pennsylvania.” - CEO of Code for America, Amanda Renteria https://elaine-zhang.com/dibHeader Tue, 24 Dec 2024 01:49:35 +0000 Elaine Zhang https://elaine-zhang.com/dibHeader <img width="6089" height="1846" width_o="6089" height_o="1846" data-src="https://freight.cargo.site/t/original/i/ff73603f6a2d2d19b6eb8c984851d8d39877c0185d0add4bc3f792c210658013/Frame-9116.png" data-mid="223841996" border="0" src="https://freight.cargo.site/w/1000/i/ff73603f6a2d2d19b6eb8c984851d8d39877c0185d0add4bc3f792c210658013/Frame-9116.png" />