1. Framing & discovery

Working closely with the product team and expert users, I formalized the problem space, user personas, and data requirements. We mapped the existing user experience end to end to understand current journeys, and documented functional elements, data structures, and API dependencies. This provided a solid foundation for the redesign and gave us a shared view of constraints, pain points, and opportunities. Some key opportunities emerged:

• Simplifying navigation by reorganizing it around user goals rather than technical data models.
• Reducing task completion time through modern components and interaction patterns from our design system.
• Adopting flexible, responsive layouts that take advantage of modern browsers for richer information displays and better adaptation to different screen sizes.

2. Wireframing & navigation model

We began each phase by refining user flows based on the identified opportunities and updated data requirements, ensuring alignment with both BU and SG Markets standards. Together with the product team, we iterated on these flows through a series of workshops until navigation, actions, and displayed data were fully defined and understood.

Using these validated flows, I created wireframes that covered individual screens as well as the overall navigation structure. We reviewed and refined these wireframes weekly with product owners, developers, and expert users. A key focus during this stage was designing content-first, reusable layouts and test responsive behavior to anticipate technical constraints early in the process.

3. Prototyping & testing

Once the structure was validated, I created interactive prototypes in Figma aligned with the SG Markets design system. To ensure continuity and scalability across the platform:

• I built reusable design components for shared platform elements.
• I created templates for recurring information patterns.
• I established breakpoints and designed key screens across multiple sizes.

We then tested the prototypes with representative users, refining interactions and layouts before handoff. The consistency achieved early through shared components and templates significantly accelerated subsequent delivery cycles.

With the product team

We established shared rituals to integrate UX seamlessly into the product lifecycle. This included presenting our UX methodology and expected deliverables, mapping responsibilities across each phase of the design cycle, and visualizing the UX plan in shared documents aligned with the global roadmap. Over time, we refined this collaboration rhythm, ensuring smooth alignment and efficient decision-making during our weekly working sessions.

With the development team

My priority was to involve developers from the earliest stages of the design process, especially given the migration context and the technical challenges introduced by responsive layouts. By testing solutions both in Figma and in development environments, we were able to refine breakpoints and layout behaviors early, ensuring a seamless experience across devices.

Developers’ input helped us identify edge cases sooner and validate user flows with technical feasibility in mind. As a result, we enriched our handoff materials with detailed interaction states, accessibility considerations, and logic specifications to support accurate implementation.

Throughout development, we held weekly follow-up sessions to review component and layout progress, and conducted design reviews directly in test environments to ensure the final product remained faithful to the intended design.