{ "items": [ { "slug": "hedge-fund-manager", "title": "How to catch a hedge fund manager", "subtitle": "A clear brief to wireframe and design the UI for a single landing page, aimed at capturing potential leads as part of a wider campaign.", "client": "Opus", "role": "Product Designer", "year": "2024", "discipline": "UX · UI · Wireframing", "reading_time": "3 min read", "metric": "+20%", "metricLabel": "Conversion Rate", "tldr": "A clear and quick brief to wireframe and design the UI for a single landing page, aimed at capturing potential leads as part of a wider campaign to generate business. Results TBC.", "description": "Wireframe and UI design for a lead-capture landing page, built for a confidential fintech client.", "image": "images/projects/hedge-fund-manager/hero.jpg", "hero_image": "images/projects/hedge-fund-manager/hero.jpg", "swatch1": "#c8502c", "swatch2": "#1a1814", "seo_title": "How to catch a hedge fund manager — Josh Bowley", "seo_description": "Wireframe and UI design for a lead-capture landing page targeting institutional investors.", "sections": [ { "type": "text", "heading": "The Challenge", "body": "Quite simply, come up with a single landing page that converted users to find out more. The objective was to get users to complete a form and submit their query, targeting a high-value, time-poor audience of hedge fund managers." }, { "type": "text", "heading": "The Plan", "body": "With time against me, the plan was to conduct secondary research into the target audience, then create wireframes that nails down the page structure and content hierarchy. I could then use these to get the correct content, work with developers, and orchestrate any assets needed. It was clear from the outset that desktop would be the priority platform, based on our target audience accessing this type of content from their work laptop." }, { "type": "text", "heading": "Wireframes", "body": "After working with the Product Owner to figure out the content requirements, I developed a first draft wireframe with general structure and content placement. I then socialised this to the development, test, and client teams to get instant feedback before progressing to UI." }, { "type": "image", "src": "images/projects/hedge-fund-manager/wireframes.png", "alt": "Opus landing page wireframes", "caption": "Initial wireframes establishing page structure and content hierarchy" }, { "type": "link", "label": "View the wireframe prototype", "url": "https://www.figma.com/proto/iYCzLvhkfFe37UFwiOC8Fl/OPUS-Landing-Page?page-id=1407%3A39&node-id=1407-41&viewport=654%2C437%2C0.24&t=Vvl1U6NaU0E8skLQ-1&scaling=min-zoom&content-scaling=fixed" }, { "type": "text", "heading": "The UI", "body": "After the wireframe was agreed and signed off by all key stakeholders, I designed the UI based on a rough brand guideline for colours and typography — also creating a small design system within Figma. This went through several iterations before being signed off and ready to build. I worked closely with the dev team throughout to ensure it was built correctly and to a high standard." }, { "type": "image", "src": "images/projects/hedge-fund-manager/ui.png", "alt": "Opus landing page UI", "caption": "Final UI design for the lead-capture landing page" }, { "type": "image", "src": "images/projects/hedge-fund-manager/design-system.png", "alt": "Opus design system", "caption": "Design system built in Figma — colours, typography, and components" }, { "type": "link", "label": "View the UI prototype", "url": "https://www.figma.com/proto/iYCzLvhkfFe37UFwiOC8Fl/OPUS-Landing-Page?page-id=212%3A281&node-id=233-2113&viewport=2008%2C478%2C0.49&t=WXOVzbh2y3G91hx2-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=233%3A2113&show-proto-sidebar=1" }, { "type": "divider", "label": "Outcome" }, { "type": "text", "body": "The process for getting the page designed and developed went smoothly, from brief to signed-off UI in a tight timeframe. The results of how effective it has been at catching a hedge fund manager were an uplift of 20% in conversion rate compared to the old solution." } ] }, { "slug": "ice-ice-baby", "title": "ICE ICE Baby", "subtitle": "Discovering users' wants and needs when it comes to the main Institute of Civil Engineers website.", "client": "Institute of Civil Engineers", "role": "UX Researcher & Designer", "year": "2023", "discipline": "Discovery · UX Research · IA", "reading_time": "5 min read", "metric": "378+", "metricLabel": "User needs mapped", "tldr": "A large discovery project that interrogated the information architecture and content of the Institute of Civil Engineers' website, leading to changes to the taxonomy and language of the site.", "description": "A full discovery project for the ICE website — combining internal workshops, stakeholder interviews, in-depth user research, and a SUPR-Q baseline survey.", "image": "images/projects/ice-ice-baby/hero.jpg", "hero_image": "images/projects/ice-ice-baby/hero.jpg", "swatch1": "#4a6b8a", "swatch2": "#1a1814", "seo_title": "ICE ICE Baby — Josh Bowley", "seo_description": "A large UX discovery project for the Institute of Civil Engineers website, covering research, IA, and taxonomy.", "sections": [ { "type": "text", "heading": "The Challenge", "body": "The Institution of Civil Engineers had a strong feeling their main public website wasn't performing — for them or their users. It had gotten bloated, neglected, and very difficult to navigate. They wanted to understand exactly why it wasn't working and what could be done to improve it from a user perspective." }, { "type": "text", "heading": "The Plan", "body": "The plan was split into two separate areas of Discovery — internal and external. Getting the full picture meant understanding both what internal colleagues thought of the site and what external users experienced. This was augmented by quantitative research: an Analytics review and a standardised UX survey." }, { "type": "text", "heading": "Discover — Internal", "body": "**GA Analysis**\nI started with an analysis of Google Analytics data to understand how the current website was performing. The focus was on user behaviour and uncovering the 'so what?' behind the numbers.\n\n**Internal Workshop**\nA workshop with key stakeholders and directors explored the organisation's understanding of the website. Pre-workshop homework fed into exercises including Newspaper Headlines, Hopes and Fears, Business Model Canvas, audience identification, persona creation, and success metrics. The two-hour remote session produced a full Miro board of collaborative insights.\n\n**Internal Interviews**\n18 stakeholders were interviewed for 30–60 minutes each, exploring their responsibilities, how the website fits into their work, and day-to-day challenges. Results were synthesised using thematic analysis and affinity maps." }, { "type": "image", "src": "images/projects/ice-ice-baby/ga-analysis.jpg", "alt": "Google Analytics analysis output", "caption": "GA analysis — understanding user behaviour before any changes were made" }, { "type": "stats", "items": [ { "number": "18", "label": "Internal stakeholders interviewed" }, { "number": "29", "label": "External users interviewed" }, { "number": "378", "label": "SUPR-Q survey responses" } ] }, { "type": "text", "heading": "Discover — External", "body": "**In-depth Interviews**\n29 users from across the ICE user base were interviewed for 30–60 minutes each, all remote via Teams and Google Meet. Notes and recordings were synthesised using thematic analysis with NVivo, producing a comprehensive research report.\n\n**SUPR-Q Survey**\nThe Standardized User Experience Percentile Rank Questionnaire was sent to existing ICE Members, receiving 378 responses. This established a baseline performance measure before any changes — with the intention to repeat annually so the impact of improvements can be tracked over time." }, { "type": "image", "src": "images/projects/ice-ice-baby/screenshot-1.png", "alt": "Research synthesis output", "caption": "Synthesising interview findings using thematic analysis" }, { "type": "image", "src": "images/projects/ice-ice-baby/screenshot-2.png", "alt": "Affinity mapping session", "caption": "Affinity mapping to surface themes across internal and external research" }, { "type": "image", "src": "images/projects/ice-ice-baby/screenshot-3.png", "alt": "SUPR-Q survey insights", "caption": "SUPR-Q survey results establishing a website performance baseline" }, { "type": "image", "src": "images/projects/ice-ice-baby/screenshot-4.png", "alt": "Final research recommendations", "caption": "Recommendations presented to ICE Directors — 100+ slide research report" }, { "type": "divider", "label": "Outcome" }, { "type": "text", "body": "The Discovery phase was a success from start to finish. After multiple Director presentations of the final report, it was clear where the current website was failing and what needed to change to solve real problems for its users. The next step: implement the recommendations, starting with the information architecture." } ] }, { "slug": "savings-what-savings", "title": "Savings? What Savings?", "subtitle": "Helping our money-tight customers to save for the things that are important to them.", "client": "ThinkMoney", "role": "Design Lead", "year": "2022", "discipline": "Research · IA · UX · UI", "reading_time": "5 min read", "metric": "£500k", "metricLabel": "Cost saved", "tldr": "An end-to-end project to introduce a new proposition for the bank: savings. Customer interviews, surveys, ideation workshops, wireframes and UI designs.", "description": "Full end-to-end design process to introduce a savings proposition at ThinkMoney, from discovery through to UI.", "image": "images/projects/savings-what-savings/hero.jpg", "hero_image": "images/projects/savings-what-savings/hero.jpg", "swatch1": "#7a9461", "swatch2": "#1a1814", "seo_title": "Savings? What Savings? — Josh Bowley", "seo_description": "End-to-end UX design for a new savings proposition at ThinkMoney: research, ideation, and UI design.", "sections": [ { "type": "text", "heading": "The Challenge", "body": "As part of the Continuous Discovery process at ThinkMoney, I had a basic understanding that customers wanted a method of putting money aside, separate to their current account, where they could save for things that mattered to them. But what did that actually mean? What was the appetite? What did they truly want to do?\n\nThe challenge was to fully understand what savings meant to the customer and to the business. Initial signals came from primary and secondary research: product reviews, Trustpilot feedback, and 1-to-1 customer interviews." }, { "type": "text", "heading": "The Plan", "body": "The plan was to start answering our open questions about savings and see if we could genuinely help customers save, whilst making it commercially viable for the business (was it actually solving customers problems?). Working closely with senior stakeholders across engineering, product, data, security, and legal, the key principle was clear: complete Discovery before jumping to solutions. This can be difficult when parts of the business are so delivery-focused." }, { "type": "text", "heading": "Discover", "body": "**Primary Research**\nThe core of my primary research was 1-to-1 remote interviews with 7 customers and 7 non-customers. A discussion guide kept conversations focused without introducing bias. I coached a UX Researcher in my team to lead the interviews as facilitator, whilst I observed and took notes. Raw notes were captured in Confluence; affinity mapping and synthesis were done in Miro.\n\nAlongside this, I led the development of a survey sent to 2,000+ customers, exploring their thoughts and feelings around savings.\n\n**Secondary Research**\nResearch papers from the UK government and private banks provided a broader view of the savings landscape. A competitor analysis of Monzo, Starling, and Revolut helped identify limitations, existing patterns, and nuances in the market." }, { "type": "image", "src": "images/projects/savings-what-savings/raw-notes.jpeg", "alt": "Raw interview notes", "caption": "Raw notes from customer interviews, captured and organised in Confluence" }, { "type": "image", "src": "images/projects/savings-what-savings/affinity-map.jpeg", "alt": "Affinity mapping in Miro", "caption": "Affinity mapping in Miro to synthesise interview findings into themes" }, { "type": "image", "src": "images/projects/savings-what-savings/survey.jpeg", "alt": "Customer survey questions", "caption": "Survey questions designed to explore savings behaviours across 2,000+ customers" }, { "type": "stats", "items": [ { "number": "14", "label": "Customer interviews" }, { "number": "2,000+", "label": "Survey respondents" }, { "number": "3", "label": "Competitors analysed" } ] }, { "type": "text", "heading": "Define", "body": "From the affinity map, I produced user need statements that concisely captured each area of insight. Using an Opportunity Solution Tree, the Senior Product Owner and I decided which problems to tackle first and which were related. We then developed 'How Might We' questions ready for a multi-disciplinary ideation workshop.\n\nThe workshop brought together representatives from Development, Compliance, Legal, and Fraud, generating ideas big, small, crazy, and insightful. These were grouped into categories and voted on, then filtered through a Feasibility, Desirability, and Viability scorecard with the CEO, Head of Development, and Head of Delivery." }, { "type": "image", "src": "images/projects/savings-what-savings/opp-solution-tree.jpeg", "alt": "Opportunity Solution Tree", "caption": "Opportunity Solution Tree, mapping insights to potential solutions" }, { "type": "image", "src": "images/projects/savings-what-savings/how-might-we.jpeg", "alt": "How Might We questions", "caption": "How Might We questions developed ahead of the ideation workshop" }, { "type": "image", "src": "images/projects/savings-what-savings/ideation.jpeg", "alt": "Ideation workshop output", "caption": "Ideas from the multi-disciplinary ideation workshop, grouped and dot-voted" }, { "type": "image", "src": "images/projects/savings-what-savings/workshop-feedback.jpeg", "alt": "Workshop feedback", "caption": "Post-workshop feedback, ensuring participants found the session valuable" }, { "type": "text", "heading": "Design", "body": "I started with user flows, a sitemap, and wireframes of key pages for the MVP. Internal guerrilla testing with the wireframe prototype caught usability issues early. I then worked with a UI Designer in my team to bring it to life — with accessibility and usability front of mind.\n\nWe developed two different executions to split-test layouts and task completion approaches. Features outside the MVP scope were fed into the product pipeline. After securing a UserTesting licence (which took several business cases and multiple meetings), I prepared the prototypes, wrote the test scripts, arranged participant recruitment, and defined success measures." }, { "type": "image", "src": "images/projects/savings-what-savings/ui-1.png", "alt": "Savings UI design", "caption": "UI designs for the savings proposition, accessibility and usability led" }, { "type": "image", "src": "images/projects/savings-what-savings/ui-2.png", "alt": "Savings UI — alternate layout", "caption": "Alternate layout for A/B testing — validating which approach resonated most with users" }, { "type": "image", "src": "images/projects/savings-what-savings/ui-3.png", "alt": "Savings feature UI", "caption": "Key screens for the savings feature MVP" }, { "type": "image", "src": "images/projects/savings-what-savings/ui-4.png", "alt": "Savings UI detail", "caption": "Detail views — designed for ThinkMoney's money-conscious customer base" }, { "type": "divider", "label": "Status" }, { "type": "text", "body": "Instead of investing £500,000 into the delivery of the project, work was paused to prioritise customer journey mapping for new customer optimisation, deemed a revenue priority. The foundation for the savings proposition was well established and ready to pick back up at a future date." } ] }, { "slug": "out-with-the-old", "title": "Out with the old, in with the new", "subtitle": "Turning an old, tired internal training and education portal into a one-stop platform for information & resources.", "client": "Lundbeck", "role": "UX Design Lead", "year": "2022", "discipline": "Discovery · UX · Design Systems", "reading_time": "6 min read", "metric": "3,000", "metricLabel": "Internal users", "tldr": "A full end-to-end UX project to modernise an outdated internal training portal — from discovery through to a launched, measured product. Delivered on time and within budget.", "description": "End-to-end redesign of an internal training and education platform for a global organisation with ~3,000 users.", "image": "", "hero_image": "", "swatch1": "#3d5a80", "swatch2": "#1a1814", "seo_title": "Out with the old, in with the new — Josh Bowley", "seo_description": "Full end-to-end UX redesign of an internal training portal, delivered on time and within budget for a global team.", "sections": [ { "type": "text", "heading": "The Challenge", "body": "After a long time using an outdated internal website, the challenge was to turn the platform into something that genuinely inspired and helped staff do their jobs as effectively as possible. With around 3,000 brand managers, campaign managers, digital leads, CRM leads, project managers, and medics across the globe, the solution needed to serve multiple segments — accessible, useful, and engaging for all.\n\nAdding to the complexity: tight timelines and strict budgetary constraints meant efficiency was as important as quality." }, { "type": "text", "heading": "The Plan", "body": "I set up a plan following a UX design process I had developed for the agency — keeping a lean approach, as the client and some internal team members weren't familiar with formal UX activities. The process followed: **Discover > Define > Design > Develop > Deliver**.\n\nI was determined not to solutionise anything before completing the research and understanding the true problem." }, { "type": "text", "heading": "Discover", "body": "This phase focused on understanding: what was the real problem; who were the key users; what were their skills and training challenges; how did they use the existing platform; and what did success look like for the business?\n\nSurveys and interviews with stakeholders and end-users — using the critical incidence technique for current platform usage — were supported by an audit of quantitative data, information architecture, and content. A workshop with key stakeholders mapped scenarios, users, content, KPIs, and goals. This allowed a root cause analysis and clear next steps." }, { "type": "text", "heading": "Define", "body": "A follow-up workshop with the working team developed proto-personas, high-level sitemaps, information architecture, and user stories — mapped back to business goals and user needs. Several User Need Statements and 'How Might We' questions formed the basis of an ideation workshop.\n\nDot voting and a feasibility matrix produced the solution: a completely new internal training and best-practice platform, where users from across the globe could learn, access tools, and share best practice with each other.\n\n*'How Might We up-skill local Brand Managers so they are equipped to do their job as effectively as possible?'*" }, { "type": "stats", "items": [ { "number": "3,000", "label": "Global users" }, { "number": "5", "label": "Distinct user types" }, { "number": "On time", "label": "& within budget" } ] }, { "type": "text", "heading": "Design", "body": "Low-fidelity wireframes brought the information architecture to life. Stitched into an InVision prototype, these were tested remotely via Lookback and in-person with key stakeholders, using task-based scenarios.\n\nFindings fed into the next iteration, where I worked with a visual designer to produce a Design System based on key components for mobile, desktop, and tablet. A high-fidelity prototype was then validated with the working group before handoff." }, { "type": "image", "src": "images/projects/out-with-the-old/screenshot-1.png", "alt": "Platform design output", "caption": "Final platform design — built to serve 5 distinct user types across the globe" }, { "type": "image", "src": "images/projects/out-with-the-old/screenshot-2.png", "alt": "Platform in use", "caption": "The delivered platform — replacing a neglected, hard-to-navigate legacy site" }, { "type": "text", "heading": "Develop & Deliver", "body": "I worked closely with a senior developer, junior developer, and PM throughout the build — daily stand-ups ensured they understood the product, users, and business needs as well as I did. QA testing covered all user journeys and edge cases.\n\nPost-launch, Google Analytics, GTM, and Hotjar tracked KPIs and conversion points. The Deliver phase became a continuous CRO exercise — periodically reviewing optimisation opportunities alongside qualitative sentiment feedback from users and star ratings on content." }, { "type": "divider", "label": "Outcome" }, { "type": "quote", "text": "Josh did an excellent job in leading and executing the UX work for our skills platform — proving the value of UX and keeping us well informed every step of the way.", "author": "Stakeholder" } ] }, { "slug": "from-data-to-diagrams", "title": "From Data to Diagrams", "subtitle": "How I solved a big data problem by providing instant access to business-critical information for multiple user types.", "client": "AstraZeneca", "role": "UX Design Lead", "year": "2021", "discipline": "Discovery · Data Viz · UX", "reading_time": "5 min read", "metric": "40,000+", "metricLabel": "Data rows solved", "tldr": "Critical business data was trapped in a 40,000-row spreadsheet, used by hundreds of internal stakeholders but consistently out of date. I led the end-to-end UX process to replace it with a real-time data platform.", "description": "End-to-end UX design for a real-time data platform that replaced a single 40,000-row spreadsheet used by hundreds of stakeholders.", "image": "images/projects/from-data-to-diagrams/hero.jpg", "hero_image": "images/projects/from-data-to-diagrams/hero.jpg", "swatch1": "#2d6a4f", "swatch2": "#1a1814", "seo_title": "From Data to Diagrams — Josh Bowley", "seo_description": "How I replaced a 40,000-row spreadsheet with a real-time data platform — end-to-end UX design for a global organisation.", "sections": [ { "type": "text", "heading": "The Challenge", "body": "For a global company, using a 40,000+ row Excel spreadsheet to help internal stakeholders make critical decisions wasn't sustainable. It was generated by a single person but needed by hundreds. By the time anyone got access to the data, it was already out of date — and when they did get it, they didn't know how to use it effectively." }, { "type": "stats", "items": [ { "number": "40,000+", "label": "Spreadsheet rows" }, { "number": "100s", "label": "Internal stakeholders" }, { "number": "1", "label": "Person generating it all" } ] }, { "type": "text", "heading": "The Plan", "body": "We roughly understood the problem, so I set up a plan following the agency's UX design process — keeping a lean approach throughout. The process followed: **Discover > Define > Design > Develop > Deliver**.\n\nI was adamant we didn't solutionise anything before completing the Define phase." }, { "type": "text", "heading": "Discover", "body": "This phase focused on understanding: what was the real problem; who were the key users; in what capacity did they need the data; what was most valuable to them; and what did success look like for the business?\n\nSurveys and interviews with both stakeholders and end-users — open and closed questions — were combined with an audit of existing assets, including the sprawling spreadsheet itself. I worked with PMs and developers to formalise project documentation before moving into Define." }, { "type": "text", "heading": "Define", "body": "A workshop with the core team produced proto-personas, high-level sitemaps, information architecture, user stories, wireframe sketches, user journeys, a low-fi prototype, and clear goals and KPIs.\n\nAfter collaborative generation and ongoing validation, I took the outputs back and worked with a multidisciplinary team — whiteboard, post-its, and all — to define the solution in detail." }, { "type": "text", "heading": "Design", "body": "Low-fidelity wireframes addressed SSO login, ADFS attributes, key data points, data visualisation examples, and page templates — built in Sketch. An InVision prototype was tested remotely via Lookback and in-person with product owners, using task-based scenarios:\n\n*'Navigate to find project X'* · *'Search for X attribute'* · *'Load up the budget calculator'* · *'How many ongoing projects are there in country X?'*\n\nFindings fed into the next iteration, where a visual designer created the UI with a custom brand identity — validated with key stakeholders and end-users before development." }, { "type": "image", "src": "images/projects/from-data-to-diagrams/process.png", "alt": "UX design process", "caption": "The end-to-end UX process applied across the project" }, { "type": "image", "src": "images/projects/from-data-to-diagrams/overview.png", "alt": "Platform overview", "caption": "The delivered platform — turning 40,000 rows of data into instant, accessible insight" }, { "type": "text", "heading": "Develop & Deliver", "body": "Close collaboration with two developers and a PM through daily stand-ups ensured shared understanding of product, business, and user needs at every stage. QA testing verified all user journeys and edge cases. Google Analytics, GTM, and Hotjar were configured post-launch to track KPIs and conversion points — feeding into ongoing product roadmap development." }, { "type": "divider", "label": "Outcome" }, { "type": "quote", "text": "I heard you were good, but I didn't know you were that good. You've exceeded all expectations!", "author": "Client stakeholder" } ] } ] }