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.
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
From Execution to Strategy
By the time Moody’s launched their new site MVP, my role had evolved from a ‘design translator’ to a strategic problem solver. I expanded my scope to tackle challenges that could have impeded the in-house team’s progress, ultimately setting them up for long-term success.
⚠️ Gaps in developer/designer communication ➡
✅ Becoming the embedded designer for the in-house team
⚠️ Blue-sky designs without platform constraints ➡
✅ A design system tailor made for AEM
⚠️ Fragmented documentation ➡
✅ Improved design file system for future designers, PMs, and developers
Big Refresh, Big Results
Ultimately, 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.
