https://www.designs-by-steph.com/work daily 1.0 2025-12-18 https://www.designs-by-steph.com/work/wise-rebrand-colour-tokens monthly 0.5 2025-11-30 https://images.squarespace-cdn.com/content/v1/663126035d1f48142a1992d8/6cc9d6fb-47a9-4b0a-b87f-23aed2e715bc/fromtoround.png Work - Wise colour tokens - 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/663126035d1f48142a1992d8/98b31143-5861-4f22-8826-f9bc83292156/tasks.png Work - Wise colour tokens - 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/663126035d1f48142a1992d8/32d7fb3b-72ca-45ae-b241-23c3a9e6814b/spec3.png Work - Wise colour tokens - 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/663126035d1f48142a1992d8/f6afe34e-54ac-4a95-b08a-379c5048f44f/colourcomponents.png Work - Wise colour tokens - 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/663126035d1f48142a1992d8/cb612ea7-68ce-49a0-ad37-910be45a4ac1/eyetests.png Work - Wise colour tokens - 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/663126035d1f48142a1992d8/e7b9b5bd-9eb2-4472-8543-61f3f1393936/colour+cover.png Work - Wise colour tokens - 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/663126035d1f48142a1992d8/022d3b30-107b-4c54-ae12-c754b7311322/problems.png Work - Wise colour tokens - 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/663126035d1f48142a1992d8/a3865e11-b29f-42de-a264-41b65c28c487/colour+swatch.png Work - Wise colour tokens - 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/663126035d1f48142a1992d8/95fbce5a-c17e-4c2a-af75-3354625eaa78/screenssandbox.png Work - Wise colour tokens - 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/663126035d1f48142a1992d8/a7e83957-4a68-403a-b291-978d4f99c70a/awards.png Work - Wise colour tokens - 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/663126035d1f48142a1992d8/7d997cbc-e7d3-44be-a769-4b5b31fc13dc/themes.png Work - Wise colour tokens - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://www.designs-by-steph.com/work/jpmc-a11y monthly 0.5 2025-11-30 https://images.squarespace-cdn.com/content/v1/663126035d1f48142a1992d8/29b31695-4b14-4f83-ba0c-58283c59be33/a11y+annotation+kit.png Work - JPMC components - 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/663126035d1f48142a1992d8/fed9632c-ad3e-4e96-8186-742220a6e4e5/Colour+annotations.png Work - JPMC components - Make it stand out An example of a text input component with colour contrast annotations that I created to document accessible contrast ratios on light and dark modes. https://images.squarespace-cdn.com/content/v1/663126035d1f48142a1992d8/80ba2902-b7ee-4497-b703-47b1b71734ef/bento.png Work - JPMC components - 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/663126035d1f48142a1992d8/4b04b085-8b3f-479d-b370-b56b3a7aa7f7/target+size+l.png Work - JPMC components - Make it stand out In this example, I extended the close button’s touch target to 48×48dp per Android guidelines by adding a target size container in Figma, guiding developers to apply the hitSlop prop without affecting Figma’s auto layout. https://images.squarespace-cdn.com/content/v1/663126035d1f48142a1992d8/d68d13db-b881-4137-82d0-1d1962affc46/focus.png Work - JPMC components - Make it stand out When designing focus states for keyboard navigation, I realised I would need to adjust the focus outline’s border radius to match the component’s shape, which involved creating new border radius tokens using Tokens Studio. https://images.squarespace-cdn.com/content/v1/663126035d1f48142a1992d8/555ca70a-f18f-47c2-91eb-306d704a9c9c/components+isometric.png Work - JPMC components - 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/663126035d1f48142a1992d8/b2fc069b-2997-469f-9263-6a70bc91dd45/a11y+annotation+kit.png Work - JPMC components - 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/663126035d1f48142a1992d8/07116d0b-9d86-472d-aa00-6dd174107e82/radios.png Work - JPMC components - Make it stand out Example of how I documented keyboard navigation in components to make sure the experience is implemented correctly. https://www.designs-by-steph.com/work/mobile-first-navigation monthly 0.5 2025-11-28 https://images.squarespace-cdn.com/content/v1/663126035d1f48142a1992d8/7311d093-341d-4f34-98c2-e1e8c6955636/Mobile+and+desktop+web+problem.png Work - Wise navigation - 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/663126035d1f48142a1992d8/6f123e3e-ffc0-4b58-817e-08af83767fa0/Data.png Work - Wise navigation - 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/663126035d1f48142a1992d8/61aba24e-5560-4e78-919a-350d6c94ae01/Settings+before+%26+after.png Work - Wise navigation - 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/663126035d1f48142a1992d8/9720df27-c617-40a4-a554-24a0a97e5351/TLDR.png Work - Wise navigation - 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/663126035d1f48142a1992d8/6e175a2c-bf70-4344-b345-42ce3f5390c8/Sketches.png Work - Wise navigation - 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/663126035d1f48142a1992d8/581a8784-5f1c-40df-b73f-d453ae8d3e9f/Nav+audit.png Work - Wise navigation - 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/663126035d1f48142a1992d8/945144ee-784c-43fd-b003-f329aadb90d2/Before+and+after+set.png Work - Wise navigation - 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/663126035d1f48142a1992d8/f30910ab-2766-4821-9e81-0d730d95bf15/Nav+before+and+after.png Work - Wise navigation - 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/663126035d1f48142a1992d8/5f04f38b-a820-4fa6-9fb7-a79181fa8a9b/Instructions.png Work - Wise navigation - 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/663126035d1f48142a1992d8/0307f51e-bc44-4c40-95e1-e483c7ef94c2/Template.png Work - Wise navigation - 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/663126035d1f48142a1992d8/fa4daeff-4b83-4b15-8d94-9af8860f5627/Desktop+from+to.png Work - Wise navigation - 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/663126035d1f48142a1992d8/bc6efaa3-8eaa-47b0-8572-90baeacc6658/Quotes.png Work - Wise navigation - 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/663126035d1f48142a1992d8/23912a14-a78d-4935-919d-ded08dd18f7e/Native4.GIF Work - Wise navigation - 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/663126035d1f48142a1992d8/9a7de272-95da-4c0a-b203-d30c26e08330/Best+practice+research.png Work - Wise navigation - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://www.designs-by-steph.com/work/category/Components monthly 0.5 https://www.designs-by-steph.com/work/category/Patterns monthly 0.5 https://www.designs-by-steph.com/work/category/Tokens monthly 0.5 https://www.designs-by-steph.com/about daily 0.75 2025-11-30 https://images.squarespace-cdn.com/content/v1/663126035d1f48142a1992d8/27e87519-e401-40f3-8836-5ef4ca2ffcaa/IMG_0111.jpeg About - About me Hi, I’m Steph. I specialise in creating scalable design systems for mobile and web experiences that empower teams and delight users. I’m currently part of the design systems team at Chase digital bank in the UK. But before that I spent 6+ years at Wise (formerly TransferWise), joined a JPMorganChase 0-1 startup, and even had a previous career as a content designer. I’m a subject matter expert in component architecture, tokens, theming, accessibility best practices, design system processes, collaboration & governance. When I’m not playing with components in Figma, you’ll find me kayaking along the river Lea, making jewellery, and watching shark documentaries.