/ Approach
Discover
Reviewed BA stories and mapped the core tasks in my lane: manage account security and profile details, and view organisation, participant, and user context for access decisions.
Identified common failure points: sensitive actions that can feel risky or ambiguous, user-type constraints that were not obvious until users tried to edit fields, and admin tables that became unreadable with dense content.
Confirmed build constraints early, including reusable table patterns and the need for responsive references for implementation.
Define
Defined what “success” meant:
Self-service feels safe, clear, and consistent for high-impact actions.
Users can immediately understand what they can edit and what is managed elsewhere, based on user type.
Admins can verify organisational context quickly using consistent views that scale.
Set clear visibility boundaries to prevent accidental access and reduce confusion:
System admins have broad directory visibility.
Organisation and participant admins have organisation-level context views.
Business users do not access admin organisation pages.
User types govern editability within self-service, separate to roles.
Design
Self-service account security
Designed a Manage Account experience that separates profile information from security actions, reducing cognitive load and clarifying intent.
Designed sensitive actions with safety-first patterns, including clear sequencing, confirmation points, and consistent outcomes messaging to prevent trial-and-error.
Standardised interruption handling so session and error states behave consistently across self-service.
User-type based editability
Solved a key constraint where user types, not roles, determine whether fields are editable. Non-federated users can update some details, while federated and legacy users are view-only. Below is a table in Confluence provided by Business Analyst to identify the permissions level between profiles.
We explored four patterns to handle partial editability where clicking 'Update details' should only allow editing two fields, while everything else stays read-only.
Inline convert labels to inputs
What we tried: clicking Update swapped read-only labels into input fields in place.
Why it failed: label and input typography and spacing differed, causing visible misalignment and a “jumping layout” effect that felt messy and reduced trust.
Pull editable fields into a single aligned row
What we tried: grouping the two editable fields together to avoid mixed label and input alignment issues.
Why it failed: different element heights still created uneven vertical gaps above and below the row, making the section feel visually inconsistent and harder to scan.
Side drawer edit panel
What we tried: opening an edit drawer from the right with only the editable fields.
Why it failed: on ultrawide screens the drawer sat too far to the right, increasing eye travel and making the edit state feel disconnected from the content being updated.
Conditional editable container (selected)
What we did: clicking Update reveals an inline “Edit” container that only contains the two editable fields. Save closes the container and returns to read-only labels with a success or failure toast.
Why it worked best: it keeps the page layout stable, makes the editable scope unmistakable (only two fields), avoids alignment issues, and keeps the edit interaction close to the information it affects across screen sizes.
Micro interactions that prevent form friction (phone number component)
Created a custom phone number component aligned to the design system, designed to behave consistently across all required states.
Covered default, focus, filled, validation, error, disabled, and read-only states, including user-type based locking and clear helper messaging.
Admin organisation context (view-only)
Designed organisation context views that allow admins to confirm organisation identity, associated participants, associated users, and key attributes such as federation status.
Standardised scalable table patterns to support discovery and verification tasks: search, filtering, pagination, selection states, and export behaviours.
Introduced a consistent dense-content pattern for tables: two-line truncation for long text and tag clusters, with a “View more” link opening a modal for full content. This preserved scanability while keeping full details accessible.
Mobile responsive key screens
Designed key screens responsively so engineering had clear breakpoint references, especially for forms, tabbed views, and dense tables.
Ensured critical actions remain visible and usable on smaller viewports to avoid layout guesswork during build.
Design system and accessibility
Kept designs grounded in AEMO’s design system and component constraints to reduce bespoke UI and improve consistency across portals.
Designed with accessibility fundamentals in mind, including keyboard-friendly interactions, visible focus, clear labels, meaningful error messaging, and status cues that do not rely on colour alone.
Deliver
Worked in a tight loop:
BA stories → wireframes → hi-fi designs → functional specs for engineering and QA.Used clickable prototypes to align stakeholders on behaviour where static screens can mislead, especially partial editability and sensitive security flows.
Included responsive screen references and component behaviour notes so implementation remained consistent across devices and across admin and self-service surfaces.
Coordinated with adjacent registration and authentication streams to keep the overall identity experience coherent end to end.
/ Challenges & Solutions
Challenge:
User types created partial editability that could feel like a broken form
Solution:
Prototyped multiple patterns to communicate editable vs locked fields, then converged on a model that makes constraints visible upfront and easy to understand.
Result:
Users can immediately see what they can change, what they cannot, and why, without dead ends.
Challenge:
Phone number capture had to be accurate, reusable, and accessible across the whole program
Solution:
Designed a new phone number input that supports international numbers with a country selector, defaulting to Australia (+61), plus a searchable country list (search by country name or ISO code) with clear “no results” behaviour. I defined input and submission rules so formatting stays consistent (allow numbers, spaces, hyphens; remove leading 0 and spaces on submit; preserve + and hyphens), and made the component configurable for Australia-only use when required.
Result:
This created a single, design system aligned component that reduces form friction, improves data consistency, and gives teams a reliable pattern to reuse without redesigning phone input behaviour each time.
Challenge:
Long text and multiple tags made tables unreadable and unpredictable
Solution:
Introduced a consistent two-line truncation rule and a “View more” modal pattern to keep rows scannable while still allowing access to full content.
Result:
Tables remain stable and readable, while detailed information stays accessible on demand.
/ Conclusion
This IDAM lane improved day-to-day identity workflows by solving both macro and micro problems that drive risk and friction. While registration, login and MFA uplift were delivered by adjacent streams, my work delivered safer self-service account security and clearer view-only admin organisation context for accurate access decisions. The final designs made constraints visible rather than surprising, standardised key interaction patterns across tables and forms, and provided responsive references and build-ready specs to support consistent implementation across AEMO’s Market and Internal portals.
