My approach

Every design problem I’ve faced differs from one another and with it, so does the approach. This page looks at the some of the main stages in my approach and the various artefacts I produce from ideation to final solutions.

1) Breaking down the problem

Problem Breakdown: When I joined Trade Ledger as Design Lead, I initiated a comprehensive breakdown of features across the entire platform. My goal was to improve product-wide usability; this exercise helped teams understand functional relationships, identify starting points, and prioritise problems effectively.
Design System Workshop: As Design Lead at Trade Ledger, I facilitated a DS workshop with developers to whiteboard and specify props for core components. This defined default states and naming conventions, while exposing systemic gaps that we subsequently moved into the DS backlog.
Feature Audits: As Design Lead at Vouch, I periodically performed feature breakdowns to identify and remove functions that no longer aligned with our market positioning. Pictured above are two PMs working with the Head of Product to map these out. This helped PMs define ownership over specific areas like "Recording UX" and "Video Collection."
Physical Workspaces: While managing a team of three ICs at Vouch, I maintained a "physical" workspace by printing and posting our work. We held weekly presentations to discuss challenges and gather feedback, which helped surface fresh approaches from PMs and engineers.

2) Ideation and concepts

Storyboarding: During my time at Vouch, early hand-drawn concepts and storyboards helped designers and engineers focus on user goals for video collection. By stripping away high-fidelity details, we facilitated more productive, high-level conversations.
User Empathy: In a digital-first environment, it’s easy to become "divorced" from the actual user experience. To combat this, I used illustrations to help teams at Vouch visualise the product from the user’s point of view, keeping the human element at the centre of our design.
Technical Collaboration: Trade Ledger was a complex debtor-financing product. As Principal IC, I frequently white-boarded with Architects to bridge the gap between technical constraints and user needs, ensuring a shared understanding of complex systems.
Conceptual direction: Sauce AI (Principal IC). My primary role was helping users understand Sauce AI's value. I treated our help centre (Gitbook) as a standalone product. Re-organizing the Information Architecture and creating visual "tiles" to guide the user journey. This concept helped the team align on my proposed strategic direction.

3) User flows and supporting data

Complex Flows: As Design Lead at Trade Ledger, I developed conditional user flows to expose the complexity of financing applications — for example, mapping different paths based on whether an application was linked to a registered business. These models were vital for clarifying requirements with System Architects.
Entity Relationships: During my time as Senior UX Designer at Digital Eskimo, we developed a website with a custom CMS and templating system aimed at helping disadvantaged individuals enter tertiary education. I ensured each template could dynamically render attributes based on common objects to maintain a consistent user experience.
Multi-Product Mapping: Trade Ledger had three distinct financial products. As Design Lead, I mapped common pages and entities to ensure our Design System shared components efficiently across the entire suite.
Analytics and Data: This collection of analytics, IA, and presentation assets represents the typical artefacts I produce to build a grounded understanding of a new problem space. They are essential for creating shared understanding across cross-functional teams. During my time as Principle IC at Expert360.

4) Interaction breakdowns

Component Specification: I specified the entire Design System for both designers and engineers. This included detailed work on “autocomplete interaction states” and smart defaults, which significantly improved usability for keyboard-reliant users. During my time as Design Lead at Trade Ledger.
Component Specification: At Sauce AI, "table rows" were deceptively complex. I designed them to accommodate varying data lengths and null states while providing developers with full interaction specs, rather than just a static component sheet.
Iterative Design Stages: This is often what component pages look like as l iterate through a product solution. It's messy. Things are all over the place as you figure out what works, what doesn't — and gather feedback from collaborators. This was part of an experiment at Sauce AI, as we created a visual “Feedback-map”.
High-Fidelity Prototyping: As Principal IC at Sauce AI, I aimed to create lifelike prototypes with logic and behaviours baked into the components. This enabled "hands-on" assessment by users, focusing on how a product feels rather than just how it looks.

5) Final stages

User Testing: At Vouch, our design team audited the BETA product to remove unused functions and empty states. To validate these changes, I coached Junior Designers on user-testing methodologies and script writing.
Before and After Comparison: This "before and after" comparison at Vouch. As Design Lead I helped the team visualise the impact of our new Design System. I used these images to demonstrate the product's maturation and inspire the team regarding future possibilities.
Before and After Comparison: Here we're looking at a Campaigns page, where a user has started to collect video responses from participants. The old design didn't make use of data, imagery, and logical use of space for key functions. The new Design not only capitalised on those opportunities but also positioned the product as a professional video editing suite.
Concept Validation: This was a polished image of an functional experiment during my time at Sauce AI. We designed, developed, and tested a visual map of all customer feedback. That was presented spatially based on relationships across "Al-embeddings" from similarity scores determined by Al. This mockup helped gain early-interest during calls with current customers.

My approach

Every design problem I’ve faced differs from one another and with it, so does the approach. This page looks at the some of the main stages in my approach and the various artefacts I produce from ideation to final solutions.

1) Breaking down the problem

Design System Workshop: As Design Lead at Trade Ledger, I facilitated a DS workshop with developers to whiteboard and specify props for core components. This defined default states and naming conventions, while exposing systemic gaps that we subsequently moved into the DS backlog.

Physical Workspaces: While managing a team of three ICs at Vouch, I maintained a "physical" workspace by printing and posting our work. We held weekly presentations to discuss challenges and gather feedback, which helped surface fresh approaches from PMs and engineers.

2) Ideation and concepts

Storyboarding: During my time at Vouch, early hand-drawn concepts and storyboards helped designers and engineers focus on user goals for video collection. By stripping away high-fidelity details, we facilitated more productive, high-level conversations.

User Empathy: In a digital-first environment, it’s easy to become "divorced" from the actual user experience. To combat this, I used illustrations to help teams at Vouch visualise the product from the user’s point of view, keeping the human element at the centre of our design.

Technical Collaboration: Trade Ledger was a complex debtor-financing product. As Principal IC, I frequently white-boarded with Architects to bridge the gap between technical constraints and user needs, ensuring a shared understanding of complex systems.

3) User flows and supporting data

Multi-Product Mapping: Trade Ledger had three distinct financial products. As Design Lead, I mapped common pages and entities to ensure our Design System shared components efficiently across the entire suite.

4) Interaction breakdowns

Component Specification: I specified the entire Design System for both designers and engineers. This included detailed work on “autocomplete interaction states” and smart defaults, which significantly improved usability for keyboard-reliant users. During my time as Design Lead at Trade Ledger.

Component Specification: At Sauce AI, "table rows" were deceptively complex. I designed them to accommodate varying data lengths and null states while providing developers with full interaction specs, rather than just a static component sheet.

High-Fidelity Prototyping: As Principal IC at Sauce AI, I aimed to create lifelike prototypes with logic and behaviours baked into the components. This enabled "hands-on" assessment by users, focusing on how a product feels rather than just how it looks.

5) Final stages

User Testing: At Vouch, our design team audited the BETA product to remove unused functions and empty states. To validate these changes, I coached Junior Designers on user-testing methodologies and script writing.

Before and After Comparison: This "before and after" comparison at Vouch. As Design Lead I helped the team visualise the impact of our new Design System. I used these images to demonstrate the product's maturation and inspire the team regarding future possibilities.