Fintech
ROLE
UX Design
UI Design/Design System
TEAM
Ming Chan, Project Manager
DEPT UK, Initial Design Work
Stephanie Hu, UX Designer
GOAL
Translating a website design made for stakeholders into modular reusable web components in Adobe Experience Manager
TIMELINE
2/01/2021 ~ 7/01/2021
(5 Months)
Project Background
When I joined the Moody’s.com redesign project, my initial role was to serve as a temporary bridge between the external web design team (DTUK) and Moody’s in-house development team, helping to translate high-fidelity designs into development-ready assets. However, as the project unfolded, my responsibilities expanded significantly to address usability issues, design system gaps, and component responsiveness—all while ensuring smoother collaboration between teams.
Challenges in the Design-to-Development Process
To address these challenges, I took on additional responsibilities that helped streamline the process and improve usability:
⚠️ Blue-sky design without platform constraints
DTUK’s designs were high-concept, but developers were expected to implement them without clear technical feasibility checks.
⚠️ Parallel Design & Development Workflows
Without a defined "ready-for-dev" process, developers were building as designs were evolving.
⚠️ Fragmented Documentation
Component requirements were labeled in Figma but weren’t systematically ticketed for devs and testers, leading to missed elements.
⚠️ Gaps in Communication
No structured walkthroughs meant developers often had to interpret design intentions, resulting in inconsistencies.
⚠️ Usability & Responsiveness Issues Surfaced Late
Since there was no user testing, the first usability feedback often came from developers trying to implement designs.
Adapting Components for Responsiveness & Usability
When I joined, my main task was helping developers navigate DTUK’s designs, which were blue-sky pitches meant to impress stakeholders but lacked technical feasibility checks. The documentation provided was for DTUK’s internal use, not tailored for developers, making it difficult to adapt components for AEM, Moody’s CMS.
An example of the the design notes from a Sprint Deck presented by DTUK to Moody's stakeholders
At first, my instructions were to not revise anything and to act only as a translator between teams. But as it became clear that DTUK did not have capacity for documentation or revisions, I stepped in to interpret, refine, and adapt designs to keep development on track.
An example of an initial DTUK design
An example of the following revisions and documentation needed
Reorganizing the Design Files and the Handoff Process
As the quantity of revisions and re-documentation rapidly grew, I needed to reorganize the design system and give developers a single source of truth for the components.
How files were combined into a new workflow
1) I started by duplicating and reorganizing the design system, allowing me to connect all my design work to a unified system instead of using isolated, one-off components.
2) A delivery file was then created to store all documentation of the components and serve as a finalized and approved source of truth for developers.
3) New design work from DTUK, once approved by Moody’s stakeholders, was added to a discovery file. This allowed developers and me to refine components that were not yet ready to build.
4) Once the new design work was approved by developers, it would be componentized and added to the design system.
5) The new design would then be added and annotated in the delivery file for developers to build.
Exploring New Opportunities
As the development team worked through DTUK’s handoff, the project manager and I gained more flexibility to identify opportunities for improving the user experience. I also took on designing new pages, some of which required custom layouts and solutions beyond the existing design system.
Designs for the "lightbox" feature
Examples of new page not designed by DTUK
Big Refresh, Big Results
The Moody’s brand refresh was a success, bringing new energy to its digital presence and delivering real results. The redesigned site led to a 17% increase in web traffic and a 14% lift in positive brand sentiment.
Throughout the process, DTUK, the development team, and I worked to translate high-concept designs into a functional, scalable system. Aligning design and development meant refining documentation, improving handoffs, and adapting components as needed. As the project evolved, flexibility and collaboration were key to ensuring a smooth and effective implementation.
