http://www.sarahcooper.net/work-avenue daily 1.0 2025-10-13 https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647704428824-Q8C65ZOI2UI6JTJK8DWK/int+pattern+2.png Work - Labels Documentation in the Design System A zoomed in view of some of the Labels screens in the design system Figma file. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647704428309-M0RT3T9VX7VP363G6XLR/int+pattern+3.png Work - Labels Workflow The Labels workflow from Lucidchart. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/894cbcab-1c9c-4f22-835d-bc3fcd33a946/Buttons+Old.png Work - Make it stand out Original buttons used by Tealium. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647705288529-SC52YFAOPDKAJ4B99CNG/docu+1.png Work - Guidelines Guidelines were included in the Figma file rather in a secondary location. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647705288938-8ERY9KU847OKO2NKESI0/docu+2.png Work - Annotations Patterns and workflows were annotated with clear descriptions. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647647820801-BMVPGDT9PRTZNTKX45QB/file+org+1.png Work - Figma File Organization & Colors Page I organized the file into Foundations, Components, and Patterns (as well as a Works in Progress section for anything not finalized.) Each page then had clearly named frames and annotations (components to use for annotating work were also part of the design system, to ensure consistency in file handoff.) https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647647719196-2SQYKMTK53CP7SJPDRU9/file+org+2.png Work - Checkbox Variants All components were made into variants that contained all the states needed in the app. Notes and documentation were included in the Figma file alongside the component. See next slide for how they were used from the asset and design panels in Figma. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647648175250-MK1ZJ6GRBGCG4GK5ZE0O/file+org+3.png Work - Checkbox Variants Closer view of how the checkbox variant worked. The particular variant was nested within some larger “patterns” like “Checkbox with Label” which was also nested within “Checkbox Group”. All of these were provided as example that could be searched for and placed directly from the assets panel into any file a designer was working on. Adjustments to the state of the components could be made in the design panel of Figma. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/76d77e43-d05a-45b3-85b3-5343ea9b7f26/process+1.png Work - Make it stand out Workflow for choosing or requesting a new component. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647735207783-OP9BR75LWAHUXO3N2HLY/Benes+Summary.png Work - Beneficiaries Summary Page Wireframes of the Beneficiaries Summary page. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647735047484-UI91FF0OS7DC87IOYOWA/Benes+Primary.png Work - Designate Beneficiaries Form The Designate Beneficiaries form, showing three ways that beneficiaries could be configured. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647735045738-GJQ7VT619UUUXTCDPL1F/Benes+Edu.png Work - Educational Content Concept work for the educational content provided. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647735044376-B8AZNPN6LP113KTJCQS1/Benes+Research.png Work - User Research Findings Findings from one of the user research studies. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647735048874-98YJTREB827RDG23UU22/Benes+Sketching.png Work - Sketches Early sketches of layouts for the summary page. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/4d7b60cf-6cf2-4001-a4b8-ba8b80e39db9/Invest+Mobile.png Work - 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/564b8a32e4b0f8c5150a3714/6a01be5f-ae69-486e-a744-570e6cb9c549/Invest+Sketching+1.png Work - Make it stand out Sketches of different chart styles that were tested. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/faae511e-8aa6-4246-9a00-aedb0e4e6406/Invest+Wires.png Work - 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/564b8a32e4b0f8c5150a3714/4bd140e8-795c-4992-8fb6-b80f01e9f76d/Invest+Design.png Work - 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/564b8a32e4b0f8c5150a3714/1647739215343-BO0JUSXNTLC8WIBAJG0F/Allstate%2BWires.png Work - Carcierge Wireframes https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647739223270-HD62RB350QONNK2ZC0CG/dashboard.png Work - Carcierge Mockups https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647739229973-0VR07OV1QM4HC7CZT9Q1/mileage.png Work - Carcierge Mockups https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647738138885-1S8Z6MYY4OC3J5W3X5DG/userjourney.png Work - User Journey https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647738153689-H378509I5DEEGD0755ID/snapshots.png Work - Snapshots of User Interviews https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647738162175-108ZH318LNMAPUV38CAK/synthesis.png Work - Synthesis of User Interviews https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/89b2ddc5-7ea2-4c91-943a-ee28fb9962da/sketch2.png Work - Make it stand out Original sketches of the design for the app. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/01e533fe-7f36-4649-b7b5-1fbea916499b/walgreens2.png Work - Make it stand out Wireframes of the new layouts and interactions. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647736370111-RCTCLHKCU1EIBXSJGCOU/sprint_my-sprint_dash_wires.png Work - MySprint Dashboard Wireframes https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647736381319-DDM2GG6BSNZPED9GYW6N/sprint_my-sprint_dash_creative.png Work - MySprint Dashboard Mockups https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647736401955-ZKRAKNTNE1UFMBCP4Z9E/sprint_my-sprint_devices1_wires.png Work - MySprint Devices & Plans Details Page Wireframes https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647736453039-7RJ8CHMXQI0BFGY3SYY0/sprint_my-sprint_devices_creative.png Work - MySprint Devices & Plans Details Page Mockups https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647736418451-LBCL89RS9L5N67ZTFBJY/sprint_my-sprint_devices2_wires.png Work - MySprint Device Details Wireframes https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647736438813-Z6WFDOW6C4FEIX9D93YE/sprint_my-sprint_devices3_wires.png Work - MySprint Plan Details Wireframes https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647736492792-B1K5AOJSTRSBCJWJYKFB/sprint_my-sprint4_wires.png Work - MySprint Site Map https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647714702210-ZC3RAMKZ871PB7KLUIR7/wires1.png Work https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647714704965-19ZTAVZ4BEXL8CSIVI3V/wires2.png Work https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647714707564-5NZM1JEMN4RNYGDI8SYN/wires3.png Work https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647714712442-TX845Z00A0ZBSUIW839L/wires4.png Work https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647714715625-8K1Z4HY5ZV64DSL468KD/wires5.png Work https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647714717808-BQFRWTNWA6ZEZ1I9FGMS/wires6.png Work https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/e38f5ebd-c0dd-4c92-a4ae-7beb3a5d7de5/convex+Text+Field.png Work - Make it stand out Text field component and documentation in Cobalt. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/24163024-07f0-46fc-b129-e632f2762c5d/Workflow.png Work - 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/564b8a32e4b0f8c5150a3714/f8051ebd-44a1-4ca9-bb73-2b6d4564ec59/convex+Button.png Work - Make it stand out Cobalt’s button component and documentation. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/c9ea41f7-3004-44d3-bb09-0082ac007dcf/convex+Typography.png Work - Make it stand out An example of the documentation for the typography in Cobalt. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/3e1a4235-ad24-4b64-99f7-8b6d37674222/convex+Page+Header.png Work - Make it stand out Page headers and examples in Cobalt. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1455646f-37fa-48e2-acd1-bc8801d27c4e/Global+and+Semantic+Tokens.png Work - Make it stand out Cobalt’s global and semantic tokens as native variables in Figma. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/b929e20c-807e-4de0-a953-1c2b8e9d2b3a/Component+Specific+Tokens.png Work - Make it stand out Cobalt’s component specific tokens for checkboxes and radio buttons and a secondary button showing a close up of the selection colors using variables that reference component specific tokens. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/dffdb072-a030-4df6-a6a1-ca25fd58c472/convex+Text+Field+-+Inline+Editing.png Work - Make it stand out Inline editing for text fields, including headers, in Cobalt. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/e2bf1b04-e817-4061-9764-a6990a57c86f/convex+Audit+Table.png Work - 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/564b8a32e4b0f8c5150a3714/a3fce03e-4df1-41c3-80e5-aafbb486c791/convex+color+palette.png Work - Make it stand out The color palette for Cobalt. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/c860fa0e-7c48-4405-92c7-8e9380842218/convex+vision+board.png Work - 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/564b8a32e4b0f8c5150a3714/ab6c9e8a-3dc5-46ba-8a5e-89f147cd59a2/Nested+Component+Properties.png Work - Make it stand out Component properties for the text input. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1e756041-ec07-45f6-8095-95677c7707d7/Component+Properties.png Work - Make it stand out Component properties for the button. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/866ec3bf-e7fb-4f0c-a7df-2c4575cbbad2/talking+points+wireframe.png Work - 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/564b8a32e4b0f8c5150a3714/8bdb32de-9023-4a47-b7a1-7b0420197e8b/email.png Work - 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/564b8a32e4b0f8c5150a3714/9ed1c10c-2400-4107-aa2c-b466c51dcc7a/talking+points.png Work - 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/564b8a32e4b0f8c5150a3714/24839292-aefb-4945-8186-de6b055b4662/talking+points+contact.png Work - 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/564b8a32e4b0f8c5150a3714/6431ed54-3f68-41b7-9920-1d9314d18425/email+empty.png Work - Make it stand out Clicking the “Generate” button creates an email draft for users using AI. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/62b1004b-65d2-4788-a908-974799ba317b/email+wireframe.png Work - 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/564b8a32e4b0f8c5150a3714/1759786139540-GIQOS68QH02BCK8LKK3X/enrich+2.png Work https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1759786139225-6UJSF1OO35YTBNW9Y19D/enrich+2+modal+0.png Work https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/ae04f776-2856-49b7-b0f2-53e8ef474378/userflow.png Work - 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/564b8a32e4b0f8c5150a3714/010d642e-de41-4234-b801-af2fe6f394c8/enrich+mvp1.png Work - 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/564b8a32e4b0f8c5150a3714/6d6ad6ed-d4d6-4ab4-ad25-9d9c5db3585a/target+mockups-zoomed+out.png Work - 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/564b8a32e4b0f8c5150a3714/2457d7ca-e6c4-47f5-a986-5373b041738e/enrich+mvp+2.png Work - 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/564b8a32e4b0f8c5150a3714/11edb545-3301-42c1-9a5c-05821c59baa4/campaign+data.png Work - 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/564b8a32e4b0f8c5150a3714/fc2045b8-501b-4502-81c4-844ecc080528/enrich.png Work - 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/564b8a32e4b0f8c5150a3714/1759694146119-CFU6DBW8GST5M957WQ2L/Taget+Detail+Panel+-+with+contact+dialog.png Work https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1759693793682-HG7Y0KZOZR8SGW9GKAE1/Target+List+Detail+-+with+Panel.jpg Work https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1759693793070-QLXUQCZ2ALEEOBJFTF07/Target+List+Detail+-+with+Panel.png Work https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/e158041d-1c40-488f-8785-953ab7d924be/schwab.gif Work https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1fb2d397-bd06-4463-baab-7b9843ba7f0a/Allstate-Logo.gif Work https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/beb3190d-dd6a-4ddb-8963-0d298c014a2b/convex.gif Work https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/78eea9b6-ea7f-4e8d-a69c-fe64bd55438f/walgreens.gif Work https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/db67719d-5200-49d0-9762-de7e4939f801/united.gif Work https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/33405430-5a6c-4e75-a577-81f23e4963b7/new-sprint-vector-logo.gif Work https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/2dfc692b-123c-49e6-93f2-ea1296b95eef/ai.gif Work https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/d31ddf04-7948-4a30-a123-b9fd169550bf/tealium.gif Work https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/955e94b3-3cd9-479a-9b23-9d65b188193d/cobalt.gif Work http://www.sarahcooper.net/contact daily 0.75 2025-10-06