Crafting Delightful User Experiences

interaction design / ui libraries / design systems

Fairfax Media's digital team was developing a React-based multimedia generator as a digital product for immersive web content. I was brought in to design modular interface components within a cohesive design system and define the interaction model to be integrated into these components. To showcase the interaction design, I created high-fidelity, nonlinear prototypes using Protopie, demonstrating the logic and functionality. Additionally, I contributed to foundational work for the front-end builder for the React components, ensuring a seamless user experience.

A cohesive design blueprint was created in Adobe XD to develop an extendable design system, starting from the most basic interface elements all the way to templates.

Foundation styles were meticulously defined, incorporating a customised responsive framework, along with detailed specifications for spacing and typography.

Iconography and adaptive UI elements were designed, complete with tailored micro-interactions for each element as required.

A lot of time went into detailed design for components for menus, content blocks and other generic containers, all built for reusability.

Significant time was dedicated to designing detailed components for menus, content blocks, and other generic containers, all engineered for reusability.

Podcasts were rapidly emerging as a key medium for media consumption in Australia, prompting the proposal and design of a more thoughtful and consolidated library.

Several prototypes—both linear and nonlinear, as well as logic-driven—were developed to showcase the desired interaction models for the immersives. These prototypes included scrolling behaviors, image gallery interactions, video playback, loading animations, micro-interactions, and quiz and map-based interactions.

Injecting a Touch of Playfulness into the Workplace

ios / experience / user flows / sales tool / guerilla testing

This project was part of The Works, an initiative to design and develop an internal native mobile app focused on tracking sales targets, allocating resources, and providing employee-specific content, briefs, and communication. I was given preliminary wireframes that required refinement and transformation into high-fidelity UI screens and testable prototypes. I enhanced the design flows and interactions to create a compelling proof of concept for management to evaluate.

The app was designed to include user profiles with familiar social media features, a performance rewards system, and a chat service that incorporated a quick mute function. It facilitated remote networking and messaging for social interactions. Additionally, the design explored contextual and categorized search capabilities, along with employee dashboards that provided access to targets and other relevant activities.

TThe task involved taking pre-approved wireframes and enhancing the user experience by implementing alternative, more streamlined approaches to the interface.

The screens explore how a manager might set their allocated daily targets distribution to their sales teams in a more user-friendly and intuitive way, using a visual reel interface. This approach still maintains an option for more detailed target input, catering to different manager preferences and workflows.

Proof of concept prototype built using Principle.

Crafting the Brand Experience

user experience / interaction design / prototyping / art direction

Digital Cortex was a startup tasked with creating an invite-only concierge mobile app for a newly formed Singapore-based group catering to high-net-worth clients in the region. I was initially brought on board to assist with interface design, but my role quickly expanded. I facilitated remote workshops to address rapidly evolving business requirements, designed around customer scenarios and purchase pathways, built and tested prototypes, and provided overall art direction throughout the project.

Workshops were conducted to better understand the client's network and supposed user behaviours. User journeys and use cases were created for validation.

Specific purchase path flows were designed based on the proposed information architecture of the app.

Given the content requirements for the app, tailored art direction for photography and videography was provided to the digital platform team.

Several high-fidelity prototypes created to showcase the concept.

The product is never finished

user experience / user interface / enterprise / lean agile

MetLife launched a retail insurance portal back in mid-2018, an online tool for insurance advisers to generate quotes, lodge applications, and manage inforce policies. There was a need for an embedded design role within the platform team, immersed in a lean agile practice. I was brought in to establish a UXD process within the squad and pursue user experience improvements for the platform. Armed with a fair amount of user insight, already aggregated by customer experience support, part of the job was identifying practicable solutions for 'quick wins' and, where possible, longer-term enhancements, while at the same time ironing out production issues where the user is directly affected.

A pain point acutely felt by users during application lodgement, was a step that required them to confirm details they have previously entered. The redundancy in the existing pattern led to user annoyance, confusion, and input error causing multiple production defects. Realising there was no real compliance requirement for the repetition, the solution was to simplify and clarify the user input. This also proved to be the solution for the defects resulting from the complicated logic of the previous pattern.

Searching for an 'occupation' within a finite list sounds like a simple problem to solve. The complication was that the list for this product includes very long descriptions, duplicate names, and hidden classes that needed to be user-viewable. The original interface pattern only displayed single-line results and resorted to hover states to reveal the additional details. It was hard to use and was a consistent source of user frustration. The implemented solution was to surface the three, most important information in the search results list itself, and getting rid of the hover states. The occupation names were also displayed in full and the typesetting refined to make it more accessible. Sorting and 'tweaking' the number of results were also done and an animated spinner added to improve system feedback.

When users think of letters and policy documents sent to individual clients, they tend to look for it in the Clients' pages. This makes sense, except that in the MVP, all these documents can only be found in a separate archive section where a user will have to filter and search. This findability issue highlighted a bigger problem in the information architecture of the Portal. The solution for this specific pain point was evident, given observed user behaviour (not to mention complaints) – point the documents to the individual client's page. Simple on paper, but it took a while in the actual migration of course. All worth it at the end.

A branched off multi-step form was designed to accommodate some new categories for the Transfer Terms scenarios. A constraint was to implement dev within the confines of the frontend frameworks (UI and microservices layer) only, which actually ended up giving us more latitude to what's possible for the user interface.

Reducing design and tech debt

user experience / interface design / ui libraries / design systems / accessibility / enterprise / agile

MLC, at the time the wealth management arm of NAB were in the process of remediating a suite of web-facing wealth management apps as a compliance requirement. I was brought in primarily as an interface designer working under the inhouse experience team. The job was within an agile, cross-functional squad looking to uplift entrenched legacy technologies, along with a ReactJS/SPA frontend framework. As an aside, I was to develop the groundwork for a global design system, creating scalable pattern libraries and a frontend styleguide for developers.

A design library, derived from pre-existing elements and new ones was created in Sketch. These were grouped and separated for ease of maintenance and rapid iteration. Foundation styles were revisited, audited and enhanced where needed.

UI elements and components were designed to be responsive and scalable from within the design environment. Accessibility was also a strict requirement from the business and these were made inherent into every component and flow churned out by every squad. Workflows were also devised to provide a manageable system of handover with an iterative process, between design and devs.

Humanising the insurance claims process

enterprise / agile / user flows / ui libraries / design systems

QBE Insurance was building a web facing, enterprise claims platform, based on a ReactJS/SPA front end. I was brought in to serve as both the User Experience and Interface designer working within an Agile, cross functional team stitching together a tech stack of both legacy and new technologies. An aside for me was the creation of scalable design libraries and templates for use in future enterprise platforms.

A reusable set of basic interface elements and patterns, all optimised for well-proven UX best practice, were designed first and brought into a Sketch based design library. Following workshop defined business needs, form specific patterns, within a defined interaction model, were created from the library. As a design system, it was essential for the patterns to be scalable and reusable in the context of all QBE forms in future use.

High fidelity templates and a complete user flow were detailed, derived from analysis and pre-existing solution design. Further UX design guidance was provided within the sprints given MVP business requirements.

Making the brand more human

experience / userflows / designsystems / accessibility

A conceptual redesign of the big T's brand experence RGA, via a design system approach with AA accessibility in mind.

Progressive disclosure – a very human approach of one easy-to-understand question fat a time.

Proof of concept prototypes built with Principle.

Colour and interface

nativeapp / remotecontrol

This is a straightforward requirement for an interface design for smart phone app, multi-airconditioner controller.

Considering that everyone is a user

UX – user flows, interface and information archtecture for an events management web application, for event organisers, attendees and suppliers alike. Designed for a Canberra based events group going through digital transformation.

This was an adaptive website, and designed to be a generic platform and with white labelling in mind.

Architecture and user flows were workshopped and documented with reference screens for the remote development team.

Finding the perfect match

social / findamatch / user flows / couldhaveworkedonasmartwatch

This was design work for a start up back in '14 – interface and experience exploration for a social matching, mobile application.

Brand marketing

ios / user flows / sales tool / information architecture / strategy

Design and implementation work for a tablet-based sales tool for an upmarket property developer. This was commissioned by Whitewall Design Studio, a Manila-based brand consultancy. The resulting insights were leveraged to develop future digital sales strategies for the group.