http://www.sarahcooper.net/portfolio daily 0.75 2026-07-30 https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/e158041d-1c40-488f-8785-953ab7d924be/schwab.gif Design Portfolio https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1fb2d397-bd06-4463-baab-7b9843ba7f0a/Allstate-Logo.gif Design Portfolio https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/beb3190d-dd6a-4ddb-8963-0d298c014a2b/convex.gif Design Portfolio https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/78eea9b6-ea7f-4e8d-a69c-fe64bd55438f/walgreens.gif Design Portfolio https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/db67719d-5200-49d0-9762-de7e4939f801/united.gif Design Portfolio https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/33405430-5a6c-4e75-a577-81f23e4963b7/new-sprint-vector-logo.gif Design Portfolio https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/2dfc692b-123c-49e6-93f2-ea1296b95eef/ai.gif Design Portfolio https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/d31ddf04-7948-4a30-a123-b9fd169550bf/tealium.gif Design Portfolio https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/955e94b3-3cd9-479a-9b23-9d65b188193d/cobalt.gif Design Portfolio https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/894cbcab-1c9c-4f22-835d-bc3fcd33a946/Buttons+Old.png Design Portfolio - Make it stand out Original buttons used by Tealium. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647647820801-BMVPGDT9PRTZNTKX45QB/file+org+1.png Design Portfolio - 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 Design Portfolio - 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 Design Portfolio - 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/1647704428824-Q8C65ZOI2UI6JTJK8DWK/int+pattern+2.png Design Portfolio - 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 Design Portfolio - Labels Workflow The Labels workflow from Lucidchart. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647705288529-SC52YFAOPDKAJ4B99CNG/docu+1.png Design Portfolio - 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 Design Portfolio - Annotations Patterns and workflows were annotated with clear descriptions. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/76d77e43-d05a-45b3-85b3-5343ea9b7f26/process+1.png Design Portfolio - Make it stand out Workflow for choosing or requesting a new component. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/6a01be5f-ae69-486e-a744-570e6cb9c549/Invest+Sketching+1.png Design Portfolio - 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 Design Portfolio - 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 Design Portfolio - 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/4d7b60cf-6cf2-4001-a4b8-ba8b80e39db9/Invest+Mobile.png Design Portfolio - 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/1647735207783-OP9BR75LWAHUXO3N2HLY/Benes+Summary.png Design Portfolio - Beneficiaries Summary Page Wireframes of the Beneficiaries Summary page. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647735047484-UI91FF0OS7DC87IOYOWA/Benes+Primary.png Design Portfolio - 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 Design Portfolio - Educational Content Concept work for the educational content provided. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647735044376-B8AZNPN6LP113KTJCQS1/Benes+Research.png Design Portfolio - User Research Findings Findings from one of the user research studies. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647735048874-98YJTREB827RDG23UU22/Benes+Sketching.png Design Portfolio - Sketches Early sketches of layouts for the summary page. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647738138885-1S8Z6MYY4OC3J5W3X5DG/userjourney.png Design Portfolio - User Journey https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647738153689-H378509I5DEEGD0755ID/snapshots.png Design Portfolio - Snapshots of User Interviews https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647738162175-108ZH318LNMAPUV38CAK/synthesis.png Design Portfolio - Synthesis of User Interviews https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/89b2ddc5-7ea2-4c91-943a-ee28fb9962da/sketch2.png Design Portfolio - Make it stand out Original sketches of the design for the app. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647739215343-BO0JUSXNTLC8WIBAJG0F/Allstate%2BWires.png Design Portfolio - Carcierge Wireframes https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647739223270-HD62RB350QONNK2ZC0CG/dashboard.png Design Portfolio - Carcierge Mockups https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647739229973-0VR07OV1QM4HC7CZT9Q1/mileage.png Design Portfolio - Carcierge Mockups https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/01e533fe-7f36-4649-b7b5-1fbea916499b/walgreens2.png Design Portfolio - 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 Design Portfolio - MySprint Dashboard Wireframes https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647736381319-DDM2GG6BSNZPED9GYW6N/sprint_my-sprint_dash_creative.png Design Portfolio - MySprint Dashboard Mockups https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647736401955-ZKRAKNTNE1UFMBCP4Z9E/sprint_my-sprint_devices1_wires.png Design Portfolio - MySprint Devices & Plans Details Page Wireframes https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647736453039-7RJ8CHMXQI0BFGY3SYY0/sprint_my-sprint_devices_creative.png Design Portfolio - MySprint Devices & Plans Details Page Mockups https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647736418451-LBCL89RS9L5N67ZTFBJY/sprint_my-sprint_devices2_wires.png Design Portfolio - MySprint Device Details Wireframes https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647736438813-Z6WFDOW6C4FEIX9D93YE/sprint_my-sprint_devices3_wires.png Design Portfolio - MySprint Plan Details Wireframes https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647736492792-B1K5AOJSTRSBCJWJYKFB/sprint_my-sprint4_wires.png Design Portfolio - MySprint Site Map https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647714702210-ZC3RAMKZ871PB7KLUIR7/wires1.png Design Portfolio https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647714704965-19ZTAVZ4BEXL8CSIVI3V/wires2.png Design Portfolio https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647714707564-5NZM1JEMN4RNYGDI8SYN/wires3.png Design Portfolio https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647714712442-TX845Z00A0ZBSUIW839L/wires4.png Design Portfolio https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647714715625-8K1Z4HY5ZV64DSL468KD/wires5.png Design Portfolio https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1647714717808-BQFRWTNWA6ZEZ1I9FGMS/wires6.png Design Portfolio https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/e2bf1b04-e817-4061-9764-a6990a57c86f/convex+Audit+Table.png Design Portfolio - 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/c860fa0e-7c48-4405-92c7-8e9380842218/convex+vision+board.png Design Portfolio - 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 Design Portfolio - Make it stand out The color palette for Cobalt. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/c9ea41f7-3004-44d3-bb09-0082ac007dcf/convex+Typography.png Design Portfolio - Make it stand out An example of the documentation for the typography in Cobalt. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1455646f-37fa-48e2-acd1-bc8801d27c4e/Global+and+Semantic+Tokens.png Design Portfolio - 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 Design Portfolio - 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/f8051ebd-44a1-4ca9-bb73-2b6d4564ec59/convex+Button.png Design Portfolio - Make it stand out Cobalt’s button component and documentation. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/e38f5ebd-c0dd-4c92-a4ae-7beb3a5d7de5/convex+Text+Field.png Design Portfolio - Make it stand out Text field component and documentation in Cobalt. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1e756041-ec07-45f6-8095-95677c7707d7/Component+Properties.png Design Portfolio - Make it stand out Component properties for the button. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/ab6c9e8a-3dc5-46ba-8a5e-89f147cd59a2/Nested+Component+Properties.png Design Portfolio - Make it stand out Component properties for the text input. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/dffdb072-a030-4df6-a6a1-ca25fd58c472/convex+Text+Field+-+Inline+Editing.png Design Portfolio - Make it stand out Inline editing for text fields, including headers, in Cobalt. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/3e1a4235-ad24-4b64-99f7-8b6d37674222/convex+Page+Header.png Design Portfolio - Make it stand out Page headers and examples in Cobalt. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/24163024-07f0-46fc-b129-e632f2762c5d/Workflow.png Design Portfolio - 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/866ec3bf-e7fb-4f0c-a7df-2c4575cbbad2/talking+points+wireframe.png Design Portfolio - 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 Design Portfolio - 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 Design Portfolio - 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/62b1004b-65d2-4788-a908-974799ba317b/email+wireframe.png Design Portfolio - 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 Design Portfolio - Make it stand out Clicking the “Generate” button creates an email draft for users using AI. https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/8bdb32de-9023-4a47-b7a1-7b0420197e8b/email.png Design Portfolio - 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 Design Portfolio - 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/ae04f776-2856-49b7-b0f2-53e8ef474378/userflow.png Design Portfolio - 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 Design Portfolio - 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 Design Portfolio https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1759693793682-HG7Y0KZOZR8SGW9GKAE1/Target+List+Detail+-+with+Panel.jpg Design Portfolio https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1759693793070-QLXUQCZ2ALEEOBJFTF07/Target+List+Detail+-+with+Panel.png Design Portfolio https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/010d642e-de41-4234-b801-af2fe6f394c8/enrich+mvp1.png Design Portfolio - 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 Design Portfolio - 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 Design Portfolio - 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 Design Portfolio https://images.squarespace-cdn.com/content/v1/564b8a32e4b0f8c5150a3714/1759786139225-6UJSF1OO35YTBNW9Y19D/enrich+2+modal+0.png Design Portfolio http://www.sarahcooper.net/postcards-by-sarah daily 0.75 2026-07-30 http://www.sarahcooper.net/home daily 1.0 2026-07-30