https://www.katehalvy.com/work daily 1.0 2022-04-22 https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1598899773962-9UQC0FR0TLLIQQ7J9LW8/image-asset.png Work https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1594149210488-V3C21GIAHHL8BPPTB0UD/image-asset.png Work https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1598899757195-0DI51M8Z9XMSID6YOBX1/G1+Copy.png Work https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1594158692157-EX9RHF1SEZ0MY7SZCX53/United.png Work https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1594158333508-DLVF1GU74MY4YX9O03R3/BS.png Work https://www.katehalvy.com/project/grainger-dashboard daily 0.75 2020-08-31 https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1594151643932-B2AWNKYEA1HEIX0YH6EI/smartmockups_kcccp0dx.png Grainger Dashboard https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1594152076220-FUUHG7R86CJ7J08IPG70/smartmockups_kcccz0mg.png Grainger Dashboard https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1594153853008-CSJHNO3OA5E8C8VLN50V/image-asset.png Grainger Dashboard https://www.katehalvy.com/project/grainger-registration daily 0.75 2020-08-31 https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1594154494753-SOV26NO17458V7W5BUU3/smartmockups_kcccp0dx.png Grainger Registration https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1594154776327-6T6IA3FAO35SGGWAWPMK/smartmockups_kccekle4.png Grainger Registration https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1598898869019-SJNT0LSQKOTSM62LM40A/022-funnel.png Grainger Registration https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1598898884183-DBY8STEIRICXFFT55CTH/024-line+chart.png Grainger Registration https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1594155103560-SYTQ56O7VEBP77A33YMX/smartmockups_kcces23g.png Grainger Registration Before design and organization https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1598898807026-P99XRIDCZI64O1K421WA/017-bar+chart.png Grainger Registration https://www.katehalvy.com/project/winona daily 0.75 2020-08-31 https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1594753569902-I4DWXEZZMCBJ99DBCWYK/smartmockups_kcmb3cwr.jpg Winona After reorganization and updates https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1598899201419-8F0T1R3VRBZR8AQO4U0L/017-bar+chart.png Winona https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1594745997587-JXFTEJSH9HAFDJQY3TN7/smartmockups_kccio9tg.jpg Winona https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1594753620363-O1TBLIPQ6LH2MDQ35XWA/smartmockups_kcmb4g4d.jpg Winona Before update process https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1594754220892-O4DL51HGK0E6I2BS7GHA/smartmockups_kccekle4.png Winona https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1598899309473-WK71E1ENHETEWKIBSXS9/image-asset.png Winona https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1598899362856-FYU4WYO1HR5F1AJI0K74/038-chart.png Winona https://www.katehalvy.com/about daily 0.75 2022-04-22 https://www.katehalvy.com/project/bitspace daily 0.75 2020-08-31 https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1594758532802-GQ8RNX3CUALGH8MO9YB9/smartmockups_kcmdv6hb.jpg BitSpace https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1594758901313-INWO7B1QQE54T5ZRSDCO/smartmockups_kcmdpxao.jpg BitSpace https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1594759134943-B0CY14Q4E4VR0U791LJM/smartmockups_kcmeemyf.png BitSpace https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1594757504059-CTBQ17JH3BRODV6Y3P2C/BS+-+Public+SG.jpg BitSpace https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1594759371807-69KPYUICY3VUEUIVL60M/smartmockups_kcmejrqo.png BitSpace https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1594756123748-K0JHF8GHE4H2BC8WNG8F/smartmockups_kcmclx3k.jpg BitSpace https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1594758564205-7EWCZDDS3B1OEJR63Y20/smartmockups_kcmdxmdv.jpg BitSpace https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1594758922422-2VAQQJIPHW618OSS80H2/smartmockups_kcme9eda.png BitSpace https://www.katehalvy.com/project/atmos daily 0.75 2021-08-05 https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1595355420295-GY9O66QUJIBJLG21WV2X/smartmockups_kcw9eps7.png ATMOS at United https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1595357875298-2IRM7ITC394JW1A77HIX/smartmockups_kcwasnqm.png ATMOS at United Component creation — Toggles and Selectable Cards https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1628176494391-S8J3JOD2Y5XXH3RV4AMM/Lightbox+in+use-cropped.jpg ATMOS at United Component creation: A Lightbox Modal for image-heavy content https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1595356226570-4FPFD256YMX1WZOBRF46/smartmockups_kcw9wd8t.png ATMOS at United Accessible color palette and icon library https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1595358584983-B1NARL4VQLJJZII4IW68/smartmockups_kcwbavsi.jpg ATMOS at United https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1595355796639-QGNYBU7KQNVZTHA12116/smartmockups_kcw9migh.png ATMOS at United https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1595357463287-HZQOMN7V5O2BJ8XMSJVS/smartmockups_kcmejrqo.png ATMOS at United Study on line length, it’s effect on reading fatigue and impact to visual design https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1595357241124-MZONYPSOITDSX6E1NK63/smartmockups_kcwafq2k.png ATMOS at United Extensive, wire-framing, competitor analysis and research for a shopping cart https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1595356833959-XXJW5KD35CNOMGYIJYSJ/smartmockups_kcwa6jjy.jpg ATMOS at United Promotional and educational marketing https://www.katehalvy.com/atmos-lightbox daily 0.75 2021-08-13 https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1628177325289-6I9U3IFWQFFZH7649VQ8/smartmockups_krz2pmfu.png Atmos Lightbox https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1628177691297-MJT2TE8QT18XQHOZA5VO/LightboxzoomFlow.png Atmos Lightbox - Role & timeline While collaborating with the Atmos team, I took the lead on the creation of this component. I hosted several workshop sessions with 4-5 product designers and consulted our dedicated developers early on. As the component came together structurally and visually, we met a few times to iterate and refine. From workshops to dev-ready, this project took approximately a month and a half. https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1603118824642-CMYXE921N6J5TTSGVHGZ/image.jpg Atmos Lightbox https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1628181941045-HR8XYRQ88LMNK57MYVJB/Responsive.jpg Atmos Lightbox https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1628181738840-R5V2OOCC8UWSC35SZF0G/Template+with+optional+items+Copy.jpg Atmos Lightbox https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1628179351021-5BNVXQTVOGKYGZF14MMS/smartmockups_krz3rpdk.gif Atmos Lightbox - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1628181642747-HS5XNWNLOVG38X78ZJ37/Template+with+optional+items+Copy.jpg Atmos Lightbox - The wireframe Before layering in images and content, we started with the dynamic structure that we had agreed upon as a cross-product team. We wanted to make sure sections turned on and off and stacked intuitively. This structure was iterated upon in multiple workshops and made stronger by many thought-provoking accessibility flow discussions. https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1628817117239-IEQB9EFCA4PICG5JZALB/Screen+Shot+2021-08-12+at+8.11.23+PM.png Atmos Lightbox - A complexity cut Originally we had designed the image to sit on the left of the modal (similar to Rothy’s), as much of the team preferred this visually. We also toyed with the idea of allowing the user to turn on a tabbed experience within the modal. However, as we iterated upon the structure in workshops, it became clear that both of these decisions would increase development and accessibility complexity. While this was meant to be a visual experience, the written content was the most important piece in regards to both perceiving and understanding this experience. This led us to the collaborative decision to push the content section to the left and to eliminate (for now) the tab functionality. https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1628176603841-8EQH6JYDFOKWX8SI9W9Z/Images%3DSingle%2C+CTA+Footer%3DFalse.jpg Atmos Lightbox - Just the basics Eventually, we landed on a very basic foundation for this customizable component. First and foremost, it would be a simple modal that provides the ability to share one beautiful image. This is the variation would be for a product designer/team wanting to provide a simple up-sell to a nicer cabin or it could function as a highlight for a new type of onboard product. When collaborating with the design system manager and developers, we decided that this would be the first iteration and additional features would follow. https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1628176648580-PDH9YLPNW2BXVROWU1BQ/Images%3DLightbox%2C+CTA+Footer%3DTrue.jpg Atmos Lightbox - Multiple images and videos The long-term goal was to arrive at a multi-faceted component that allowed for the selection of multiple images, support of a sticky CTA section, and future support of videos as content. These additions would help designers call out specific aspects of an experience. An example of this could be using the lightbox to highlight the many features of United’s Polaris cabin. But these variations also open the door for a ton of creativity. The lightbox was designed to facilitate the use of our exceptional image library but the endless possibilities for this component really come down to designer imagination. https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1628182915893-L19Q6IKT3OPJR74K1DYI/Screen+Shot+2021-08-05+at+12.00+1.jpg Atmos Lightbox - Publishing the component At United, we operated from a code-first model. Meaning that a component wasn’t ready for consumption until it was built into the Atmos code repository. From there, we would take our previously created designs and any learnings from our discovery phase and use that to craft the documentation and useable symbol in the sketch library. With the development releases we would also release the symbol, documentation and an explanier message in slack. https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1628818833269-B81J79IW1TR29CF8FVAZ/Frame+5.png Atmos Lightbox - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1628819916241-LCFSHIY6HDJTRTGAA41Q/smartmockups_ks9pb4lg.png Atmos Lightbox https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1628819660539-UFKMJYGYOKPYBHCHDHSP/smartmockups_ks9p5yo9.png Atmos Lightbox https://www.katehalvy.com/grubhub-care daily 0.75 2021-08-13 https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1628820704206-VWQADL1CT2B04MS6UQ58/smartmockups_ks9ps9ul.jpg Grubhub Care Library https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1628821733493-I0UI5D0UNPVRTBR6CIHP/smartmockups_ks9qd74u.png Grubhub Care Library - Role & timeline I took lead on this project from the systems side and partnered with two product designers from the Care team. I worked with the two designers to facilitate handoff to the Care team developers. To date, I’ve built and written documentation for eight components and three working strategies. This ongoing project has been in the works for about 3 months. https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1628822483794-S1TL39RNBUD7NPMMB70T/Screen+Shot+2021-08-12+at+9.41.04+PM.png Grubhub Care Library https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1628859168390-KVR6I8UNA77BFTTYGK1C/Nav.png Grubhub Care Library https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1628858961143-GZYD16NWWQUCTVV8COKF/ezgif.com-gif-maker.gif Grubhub Care Library https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1628862020172-TOPXXN1U1L2PC6IKE3JH/Group+2202.png Grubhub Care Library - Cookbook alignment Through the process of building the components, I worked with the team to identify areas of opportunity to bring the current components closer in line with the core Cookbook library. This included things like using the Cookbook type styling and header structures, using more prominent interactive icons, bringing content into left alignment and taking advantage of our defined elevation and dimension styles. https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1628866941787-MQBQTIVF9AD8DSPHOT2O/ezgif.com-gif-maker+%282%29.gif Grubhub Care Library - Structure and organization As this was functionally meant to be a sub-library of the Cookbook core, we decided to utilize the same organizational structure. As of now, we don’t have a living reference site so everything lives in Figma. We use Figma’s built-in prototyping to streamline navigation and make it function similar to a working reference site. Similar to Cookbook core, each component has its own page, which allows designers to browse and pull assets and their variations into design documents. Separately, there is a documentation and strategies section which allows both designers and developers to access best practices and component specs. https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1628862387077-47R7S67T211G190I2JRX/Group+2203.png Grubhub Care Library - Strategies In addition to documentation for each component, we also create strategy documents that describe how components should be utilized throughout an experience. For Care, we currently have 3 strategies, disclosure, navigation, and interactions. The Care team doesn’t always have dedicated designers, so strategies help with future onboarding but also serve as a reminder of decisions that have already been made or are already working well within the experience. The Care strategies cover interactions like serving up follow-up questions, creating consistent navigation flows and guidelines around number of options to present to the care agents. https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1628865030413-H7NBMFZDJYY6G8AAOGA7/Persistent+Order+Reference2.png Grubhub Care Library - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1628864172863-0W1RLK176KXQQPMSJSUR/Group+2204.png Grubhub Care Library https://images.squarespace-cdn.com/content/v1/5f049e64f5d6c90f53a3ead5/1628864268934-0PM06BGG47DVDEKB5O14/smartmockups_ksafpztv.png Grubhub Care Library https://www.katehalvy.com/about-1 daily 0.75 2025-06-10