Translating Flows Into Functional Structures

THE CHALLENGE

Low-fidelity sketches validated the flow logic, but lacked the detail needed for development handoff. The team needed wireframes that showed interaction patterns, information hierarchy, and visual language without committing to final design.

THE SOLUTION: MID-FIDELITY WIREFRAMES

After testing sketches, I've translated validated flows into mid-fidelity wireframes using Figma. These wireframes added clarity while maintaining the ability to iterate quickly.

The 8-screen flow progresses from home screen through new contact creation, fund transfer operations, details confirmation and success page. It shows key information that users are looking for to gain trust and transparency in the process such as confirmed exchange rates and upfront fees.

Each screen introduced visual hierarchy through icons, clear labelling, and precise spacing, moving beyond rough sketches while avoiding the time investment of high-fidelity design.

DESIGN PRINCIPLES APPLIED

Design principles applied focused on information hierarchy like size andn color, visual affordances like icons and buttons, consistent labelling removing ambiguity, and vertical organization creating a scannable layout.

Exchange rates, fees, and amounts remained visible throughout, ensuring transparency rather than hiding details until the end.

KEY FINDINGS FROM MID-FIDELITY TESTING

Mid-fidelity wireframes revealed three issues that sketches missed:

• Information Overload on Summary - Initial design crowded the summary screen so we reorganized with icons to improve scannability.
• Success State Details - Users wanted transaction confirmation as reference thus we've added key information like transaction ID and date of transaction, on top of the other details from summary.

TIMELINE

Day 1: Low-fidelity sketches hand-off. Selected wireframing kits including icons, buttons, text hierarchy, and other visual elements. Started on the 1st version of mid-fidelity wireframes.

Day 2: Iterations on the 2nd version of the mid-fidelity wireframes ensuring correct usage of icons without further cognitive load and scannability. Added interactions flow to produce a working prototype.

PROTOTYPING

The interaction design applied to mid fidelity wireframes helped developers understood spacing, hierarchy, and interaction states without constant clarification.

Here’s a walk through of Airwallex’s mid fidelity prototype: Click Here to Open Prototype

KEY TAKEAWAY

Mid-fidelity wireframes bridge the gap between rough sketches and polished design. They add enough detail to validate interaction patterns and information hierarchy without the time investment of high-fidelity design.

For Airwallex, this phase ensured that by the time designers moved to visual design, the structural and functional foundations were proven.