https://www.tomkhahn.com/resume daily 0.75 2025-04-28 https://www.tomkhahn.com/contact daily 0.75 2023-04-19 https://www.tomkhahn.com/case-studies daily 1.0 2024-08-11 https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/ba3d845e-ebb2-4687-a522-1fb4046a926a/Case+study+thumb+-+darker.png Case Studies - 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/59ff313964b05fe5d8361f0a/1614651412930-FDHFDXJNQLZJ5R55KTKR/DF+Thumb.jpg Case Studies https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/443287fa-150b-40b4-ad20-3f4a01dcd25e/Case+study+thumb+-+xylem+dark.png Case Studies - 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/59ff313964b05fe5d8361f0a/1613011875272-VRAK2YRDYZB1ASDMU6L9/210+-+Launch+-+A+C.png Case Studies https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1590636211087-2KVUUWM3SNWJ53ATMVTZ/Yang2020.png Case Studies https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/aa25fb62-97c6-4db4-bc20-f9582193960c/Case+Study+Thumb+B.png Case Studies - 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/59ff313964b05fe5d8361f0a/1613012261909-BKQQ3MAAOXQPX9LC2KWB/ESD+Thumb.png Case Studies https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1590635558228-79M98JW6KVB2KC1QBV4Y/Yang+Y.png Case Studies https://www.tomkhahn.com/yang-2020-homepage-redesign daily 0.75 2024-08-15 https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1612754081785-8X72V6Z9IFUI38L6EAM7/Original+Hero.jpg Yang 2020 Homepage Redesign The original homepage design for the Yang 2020 campaign. https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1591791890015-X9VXRAAEJ7CH8786WT4C/About_1440CropLightRed.jpg Yang 2020 Homepage Redesign https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1612926462063-MVFYUT7APAZTZ7NGMR4Q/Nudges+-+tight.png Yang 2020 Homepage Redesign Redesigned nudges to donate or sign up, with added value prop. https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1612842821934-IZDYLEUJ4V0LZR9Z7AYJ/1440px+Screens+Default+Copy+2.jpg Yang 2020 Homepage Redesign The redesigned homepage on desktop. https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1612926312345-TI6Y13D56P1C4NSQRTPD/Components-tight.png Yang 2020 Homepage Redesign One of the redesigned components on the homepage, used across several sections as shown here. https://www.tomkhahn.com/bio daily 0.75 2024-07-09 https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1615313955962-BZB99HAJP4RUGWA6I1KA/Tom_Profile_SpainFull_Curves.jpg Bio https://www.tomkhahn.com/yang-2020-policies-page-redesign daily 0.75 2024-08-15 https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1612938512947-3SQJ6P9Y0H6Q739JTUCT/policy+hero+short.jpg Yang 2020 Policies Page Redesign https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1612985843936-CGPMTM5VI3A1HACV7P5A/Policy+page+tabs.png Yang 2020 Policies Page Redesign Initial wireframes of the policies page redesign, showing tabs split by passive & active experiences. https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1612992168659-YKFGYQMJMGHR03VKKWDK/Desktop+Policies+700w+1.gif Yang 2020 Policies Page Redesign The original policies page design for the Yang 2020 campaign. https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1612994307912-M0QOIQ8Y71YH4F5QV491/Prototype_Mobile_Policies_320w+30fps+3.gif Yang 2020 Policies Page Redesign An early low fidelity prototype. https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1613958911181-2W6A3MLTIFWAL47KUDTW/All+Policies+Final+60.png Yang 2020 Policies Page Redesign The final redesign on mobile. https://www.tomkhahn.com/election-watch-hawkfish daily 0.75 2024-08-15 https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1613450067222-OSAJUPA3Y54YAF6X3L19/Narrative+-+balls.png Election Watch (Hawkfish) The default narrative, showing the remaining states to be called, depicted visually by electoral weight. https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1613935635219-ZZWUC8J2FX2P1CUJWFDR/County+table.png Election Watch (Hawkfish) One of multiple views of the county table, configurable to hide/show over a dozen categories of data. https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1613935019006-6XVX2JFMHLQKKKA0LM5L/Map+Toggle.gif Election Watch (Hawkfish) An early design with a “Red Mirage” toggle, highlighting states that would flip after mail-in votes were counted. https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1613453131554-5ON543I08H21JOBCLQZT/ESD%2BEWD.png Election Watch (Hawkfish) The final versions of the pre- and post-election dashboards. https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1613140015621-JSXCBLO747O9TEGDQV3L/ESD+Hero.png Election Watch (Hawkfish) https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1613448893053-C6AFTDJVUB7MAB1KX28N/EWD+-+NOTIFICATIONS.png Election Watch (Hawkfish) Notification examples on the post-election dashboard. https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1613451531849-UBOWKLZFRIDT2FQWL5WP/The+Mondrian+-+clear.png Election Watch (Hawkfish) The Mondrian, as dubbed internally (left), was deceptively simple, but conveyed key pieces of data at a glance. https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1613935425468-KZN6FDI6LJZABN1417DC/Floating+Action+Button.gif Election Watch (Hawkfish) Clicking the floating action button to engage advanced scenario inputs. https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1613934728001-C1K94QCDZM5T9Z36HXTR/Donkey+Swap+2.gif Election Watch (Hawkfish) Interacting with the scenario selector to produce a small moment of delight. https://www.tomkhahn.com/vote-by-mail-hawkfish daily 0.75 2024-08-15 https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1613919134352-9MP0KPAPZ60NFWACMBPW/Component+iterations.png Vote By Mail (Hawkfish) Early component designs for a progress tracker, input fields, and buttons. https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1613922420074-U28KLGAJ5V4TZ01ZNQ2J/VBM+User+Flow+5.gif Vote By Mail (Hawkfish) Photo ID capture interaction. https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1613923602422-3LE2G6LNTZB0V2L66LC6/Share+Flow.gif Vote By Mail (Hawkfish) Users would be able to do their part to spread the word. https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1613933439029-E22OGUTNJEXO2M8RVFWT/Desktop.png Vote By Mail (Hawkfish) Key desktop screens that would not make it to development. https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1613922981640-0L6C8G2XG3S3JIDQ4NYT/Success+Flow.gif Vote By Mail (Hawkfish) A moment of delight to signify completion. https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1614308838209-O8VH82GAOOO9OHGTVHC2/Hero.png Vote By Mail (Hawkfish) https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1613921585646-I2L0CGERYOMH791ZOGU5/Launch+screen.png Vote By Mail (Hawkfish) The unbranded “default” launch screen, from early iteration to final design. https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1613877955234-4ZGUYXVI75UYH17HDY2Y/Final+Components.png Vote By Mail (Hawkfish) Mobile screens using finalized components. https://www.tomkhahn.com/dramafever-onboarding-redesign daily 0.75 2023-04-24 https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1614138992784-O6OL20MC0WSI7NPFU9VW/competitive+analysis+1.jpg DramaFever Onboarding Redesign Competitive analysis of other streaming products, as well as unrelated products that would offer insights on registration user flows. https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1614650902679-7I722OFMYEHG0P40WUX2/User+Flow+3.jpg DramaFever Onboarding Redesign The updated registration/sign-in/subscribtion user flows, featuring “1-Click” to register, and Roku’s native payment feature to become a premium member. https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1614134739879-ZMF8HYBCTRYZ8LAZC3HK/Anon-Reg-Pre+2.png DramaFever Onboarding Redesign Anonymous users (top) and signed-in/registered users (middle) would see a button to turn off ads, while premium users (bottom) would be free of both the button and the distraction. https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1614031382147-OBGB1T9LW86J4IXXS527/hero+short.jpg DramaFever Onboarding Redesign https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1614139022424-NHOOS5L9GGOLWBZP2HML/competitive+analysis+2.jpg DramaFever Onboarding Redesign An affinity diagram organizing our findings. https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1614194552181-87P4PXVHMECA9HMR9ZWA/Asterisk+button+uses+2.png DramaFever Onboarding Redesign Use cases for the asterisk button on Roku’s proprietary remote control UI. https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/1614280571921-J61WP2QA89LQUCNMBVPJ/DF+Screens.png DramaFever Onboarding Redesign Example screens of the DramaFever onboarding redesign on the Roku platform. https://www.tomkhahn.com/architect-icapital daily 0.75 2024-08-10 https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/da85ad58-4902-4431-b232-09189acd7081/Rainbow+-+Analysis+%26+Compare+-+hand.png Architect (iCapital) - Make it stand out Dedicated portfolio comparison page https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/3e702bbe-e4c0-4664-b5f8-06f775461620/Architect+-+tom%27s+composite+-+stroked.png Architect (iCapital) - Make it stand out High fidelity design of the portfolio comparison page https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/bac1c15a-fa67-485d-8926-1e13c93e57e9/Architect+Hero+2.png Architect (iCapital) https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/efce1196-3b1f-4c53-b969-191d896245f0/Rainbow+quotes.png Architect (iCapital) Interacting with the scenario selector to produce a small moment of delight. https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/7c0241dc-6b8f-4d1b-9ec7-0b33c6f2ff5b/Rainbow+Home+-+Compare.png Architect (iCapital) Portfolio comparison setup from home screen (note: Rainbow was the product’s temporary name) https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/50fd3037-0e2a-4459-8f7d-54de424dca13/Rainbow+Content+-+Compare.png Architect (iCapital) - Make it stand out Portfolio comparison setup from content screen (note: Rainbow was the product’s temporary name) https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/8714457e-a514-486a-8ae3-91c64c6a4754/Primary+flows.png Architect (iCapital) - Make it stand out Example user flows for common tasks involving portfolio comparison https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/fcd36bc1-22d1-442b-97ba-090f7cbd4a9a/Rainbow+-+Edit+Portfolio+-+hand.png Architect (iCapital) - Make it stand out Portfolio editing, as part of a comparison flow, to quickly return to the updated comparison page https://www.tomkhahn.com/helios-xylem daily 0.75 2024-07-31 https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/8714457e-a514-486a-8ae3-91c64c6a4754/Primary+flows.png Helios (Xylem) - Make it stand out Example user flows for common tasks involving portfolio comparison (Architect, aka Project Rainbow) https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/50fd3037-0e2a-4459-8f7d-54de424dca13/Rainbow+Content+-+Compare.png Helios (Xylem) - Make it stand out Portfolio comparison setup from content screen (Architect, aka Project Rainbow) https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/efce1196-3b1f-4c53-b969-191d896245f0/Rainbow+quotes.png Helios (Xylem) Interacting with the scenario selector to produce a small moment of delight. https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/7c0241dc-6b8f-4d1b-9ec7-0b33c6f2ff5b/Rainbow+Home+-+Compare.png Helios (Xylem) Portfolio comparison setup from home screen (Architect, aka Project Rainbow) https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/bac1c15a-fa67-485d-8926-1e13c93e57e9/Architect+Hero+2.png Helios (Xylem) https://www.tomkhahn.com/fundmaster-icapital daily 0.75 2024-07-17 https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/efce1196-3b1f-4c53-b969-191d896245f0/Rainbow+quotes.png FundMaster (iCapital) Interacting with the scenario selector to produce a small moment of delight. https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/50fd3037-0e2a-4459-8f7d-54de424dca13/Rainbow+Content+-+Compare.png FundMaster (iCapital) - Make it stand out Portfolio comparison setup from content screen (Architect, aka Project Rainbow) https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/8714457e-a514-486a-8ae3-91c64c6a4754/Primary+flows.png FundMaster (iCapital) - Make it stand out Example user flows for common tasks involving portfolio comparison (Architect, aka Project Rainbow) https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/7c0241dc-6b8f-4d1b-9ec7-0b33c6f2ff5b/Rainbow+Home+-+Compare.png FundMaster (iCapital) Portfolio comparison setup from home screen (Architect, aka Project Rainbow) https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/bac1c15a-fa67-485d-8926-1e13c93e57e9/Architect+Hero+2.png FundMaster (iCapital) https://www.tomkhahn.com/workflow-dashboard-icapital daily 0.75 2024-08-10 https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/ff216aaf-8738-4efc-b1da-86d57e116536/Workflow+template+hifi+-+case+study.png Workflow Dashboard (iCapital) - Make it stand out Example of a high fidelity mockup of the workflow template editor (shown here with dummy statuses that would only appear in real workflow instances) https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/66eaab97-16b1-4abf-880d-edd382a2a9fe/Workflow+Dashboard+Thumb.png Workflow Dashboard (iCapital) https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/d4b20e9a-3818-40b1-a402-2c657a3a8614/Initial+builder.png Workflow Dashboard (iCapital) A spreadsheet and static flowchart used in the existing workflow template creation process https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/d71d8a6d-371f-4396-bca6-04ccb5e16460/Interactions.png Workflow Dashboard (iCapital) - Make it stand out Hover interactions over different sides of a task box for editing workflow templates visually https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/190dfcf0-c7a2-49a0-a033-194b2efbbef6/Adding.png Workflow Dashboard (iCapital) - Make it stand out Adding a new task (or block of tasks) https://images.squarespace-cdn.com/content/v1/59ff313964b05fe5d8361f0a/9fa29233-b8f4-4572-a495-37565765991e/Moving.png Workflow Dashboard (iCapital) - Make it stand out Moving a task (or block of tasks)