I led the design of an AI-powered platform for accelerating drug discovery, turning a vague idea of “faster research with agents” into a tool scientists could trust. Through stakeholder discussions, client workshops, and design exploration, I found researchers didn’t just want a chat interface—they needed ways to configure workflows, reuse setups, and monitor experiments in real time. That shift reframed the product from a chatbot into a research tool, and redefined how the company envisioned human–AI collaboration.
Agent Studio
2024
Multi-AI BIO R&D Solution
Solution
Solution
Main Features
Main Features
Wait a minute, the video will be up soon...
Wait a minute, the video will be up soon...
Users can send commands through simple conversations and monitor the AI agent’s background operations at any time.
Users can send commands through simple conversations and monitor the AI agent’s background operations at any time.
Most Memorable Moment
Most Memorable Moment
It wasn’t in a brainstorming session that everything shifted—it was when my work was put in front of leadership. Instead of being treated as just “screens,” the designs reframed the conversation: suddenly, the discussion wasn’t about what could be built fastest, but about what vision the product should stand for.
It wasn’t in a brainstorming session that everything shifted—it was when my work was put in front of leadership. Instead of being treated as just “screens,” the designs reframed the conversation: suddenly, the discussion wasn’t about what could be built fastest, but about what vision the product should stand for.
Looking back, that moment changed how I define my role. My responsibility isn’t just to arrange pixels, but to design the lens through which teams set direction. It reminded me that design has the power to align strategy, not just deliver assets. And sometimes, the most memorable impact isn’t the feature you ship, but the shift in perspective you create for everyone else.
Looking back, that moment changed how I define my role. My responsibility isn’t just to arrange pixels, but to design the lens through which teams set direction. It reminded me that design has the power to align strategy, not just deliver assets. And sometimes, the most memorable impact isn’t the feature you ship, but the shift in perspective you create for everyone else.
When Design Stopped Being Decoration and Became Direction
When Design Stopped Being Decoration and Became Direction
My Teams & My Role
My Teams & My Role
My Role
My Role
Product Designer; Mentor of Interns
Product Designer; Mentor of Interns
Duration
Duration
Apr-Aug 2024(4 months)
Apr-Aug 2024(4 months)
Tools
Tools
Figma; Midjourney; Lottie Files
Figma; Midjourney; Lottie Files
Collaborators
Collaborators
Jie Li (Product Director); Zhen Chu (Intern); Maggie Chen (Intern)
Jie Li (Product Director); Zhen Chu (Intern); Maggie Chen (Intern)
Chapetr 1 - I Refused to Let It Become Just Another Chatbot
Chapetr 1 - I Refused to Let It Become Just Another Chatbot
Section 1
Section 1
Kickoff · Stakeholder Interviews · Requirements Gathering
Kickoff · Stakeholder Interviews · Requirements Gathering
I Entered With Questions Others Hadn’t Asked Yet
I Entered With Questions Others Hadn’t Asked Yet
At the kickoff, I didn’t walk in as someone new to the project. Weeks earlier, I had built a demo animation for the product director—my first attempt at imagining how scientists might interact with the platform. Because of that, I was already seeing the friction points the team hadn’t named yet.
At the kickoff, I didn’t walk in as someone new to the project. Weeks earlier, I had built a demo animation for the product director—my first attempt at imagining how scientists might interact with the platform. Because of that, I was already seeing the friction points the team hadn’t named yet.
Everyone seemed excited about a “chat-based AI” approach—simple, efficient, quick to build. But in my mind, I kept thinking: if it’s only a chatbot, scientists will never see this as a serious R&D platform. What they really need isn’t just an input box; it’s the sense of control they have in a lab. That realization shifted my role immediately—I wasn’t there to decorate an idea, but to transform a vague vision into something customers could actually trust.
Everyone seemed excited about a “chat-based AI” approach—simple, efficient, quick to build. But in my mind, I kept thinking: if it’s only a chatbot, scientists will never see this as a serious R&D platform. What they really need isn’t just an input box; it’s the sense of control they have in a lab. That realization shifted my role immediately—I wasn’t there to decorate an idea, but to transform a vague vision into something customers could actually trust.
AI Chat is enough
AI Chat is enough
But how do scientists track the whole workflow?
But how do scientists track the whole workflow?
Section 2
Section 2
Client Workshop · User Needs Discovery · Workflow Visualization
Client Workshop · User Needs Discovery · Workflow Visualization
When Clients Asked for Control, I Realized Data Alone Wasn’t Enough
When Clients Asked for Control, I Realized Data Alone Wasn’t Enough
black-box chatbot
black-box chatbot
visual workflow
visual workflow
In the first client meeting, I mostly listened. But the more I heard, the clearer it became: the PM’s emphasis on “chat” wasn’t enough. Clients wanted to see. They wanted to visualize the workflow, track multiple tasks running in parallel, and even view snippets of the code behind the agents. What they were asking for wasn’t data—it was reassurance.
In the first client meeting, I mostly listened. But the more I heard, the clearer it became: the PM’s emphasis on “chat” wasn’t enough. Clients wanted to see. They wanted to visualize the workflow, track multiple tasks running in parallel, and even view snippets of the code behind the agents. What they were asking for wasn’t data—it was reassurance.
Sitting there, I felt a strong urge: I had to translate the AI’s invisible power into something scientists could grasp, like watching an instrument run in a lab. That moment changed how I saw my role. I wasn’t just a designer; I was the bridge between researchers and the AI, responsible for making the unseen tangible.
Sitting there, I felt a strong urge: I had to translate the AI’s invisible power into something scientists could grasp, like watching an instrument run in a lab. That moment changed how I saw my role. I wasn’t just a designer; I was the bridge between researchers and the AI, responsible for making the unseen tangible.
Section 3
Section 3
Competitive Analysis · Wireframes · Interaction Flows
Competitive Analysis · Wireframes · Interaction Flows
I Challenged the Three-Window Idea With My Own Vision
I Challenged the Three-Window Idea With My Own Vision
The PM imagined a three-window setup: one for the workflow, one for AI collaboration, one for chat. On paper, it sounded complete. But to me, it felt fragmented—three islands with no natural flow. If we thought it was cumbersome, how would scientists feel under real pressure?
The PM imagined a three-window setup: one for the workflow, one for AI collaboration, one for chat. On paper, it sounded complete. But to me, it felt fragmented—three islands with no natural flow. If we thought it was cumbersome, how would scientists feel under real pressure?
Too fragmented
Too fragmented
Simpler, user-friendly
Simpler, user-friendly
“ Scientists don’t need more screens—they need clarity.
“ Scientists don’t need more screens—they need clarity.
I proposed something different: two windows. A global workflow on the left, a combined chat-and-agent view on the right. This way, scientists could see progress and context together. To lower the cognitive load, I added preset prompt cards beneath the input box, giving users a quick way to start tasks instead of staring at an empty cursor. When I put my sketches on the table, I felt nervous but energized. This wasn’t just about a cleaner layout—it was about fighting for a way of working that made sense to scientists.
I proposed something different: two windows. A global workflow on the left, a combined chat-and-agent view on the right. This way, scientists could see progress and context together. To lower the cognitive load, I added preset prompt cards beneath the input box, giving users a quick way to start tasks instead of staring at an empty cursor. When I put my sketches on the table, I felt nervous but energized. This wasn’t just about a cleaner layout—it was about fighting for a way of working that made sense to scientists.
Section 4
Section 4
Design Critique · Information Architecture · Trade-offs
Design Critique · Information Architecture · Trade-offs
When My Idea Broke, I Learned to Redefine Compromise
When My Idea Broke, I Learned to Redefine Compromise
The engineers pushed back. Merging the agent logs with the chat, they explained, would contaminate data and compromise results. Hearing that, I felt a sting of disappointment—my neat “solution” wasn’t technically viable.
The engineers pushed back. Merging the agent logs with the chat, they explained, would contaminate data and compromise results. Hearing that, I felt a sting of disappointment—my neat “solution” wasn’t technically viable.
Agent Status Visualization!
Agent Status Visualization!
Under processing ...
Under processing ...
3-Windows
3-Windows
2-Windows
2-Windows
But instead of defending stubbornly, I listened. I realized my job wasn’t to win my idea; it was to move the team forward. So we returned to the three-window structure, but I insisted on adding visualized agent personas—showing their roles, status, and progress. That one change turned an abstract process into something scientists could track and trust.
But instead of defending stubbornly, I listened. I realized my job wasn’t to win my idea; it was to move the team forward. So we returned to the three-window structure, but I insisted on adding visualized agent personas—showing their roles, status, and progress. That one change turned an abstract process into something scientists could track and trust.
Walking out of that meeting, I felt a shift. I hadn’t “won,” but I had earned trust. My value wasn’t measured by whether my idea survived intact, but by whether I helped the team pivot toward something stronger.
Walking out of that meeting, I felt a shift. I hadn’t “won,” but I had earned trust. My value wasn’t measured by whether my idea survived intact, but by whether I helped the team pivot toward something stronger.
Chapetr 2 - When Delivery Pressure Hit, I Chose Ownership Over Shortcuts
Chapetr 2 - When Delivery Pressure Hit, I Chose Ownership Over Shortcuts
Section 1
Section 1
Moodboard · Hi-fi Mockups · Design Review
Moodboard · Hi-fi Mockups · Design Review
The First Time the CEO Remembered My Name
The First Time the CEO Remembered My Name
When I handed over two versions of the Hi-fi designs, I wasn’t sure which—if either—would land. One leaned toward minimalism, the other toward a bolder tech aesthetic. The product director took them straight to the CEO and design lead.
When I handed over two versions of the Hi-fi designs, I wasn’t sure which—if either—would land. One leaned toward minimalism, the other toward a bolder tech aesthetic. The product director took them straight to the CEO and design lead.
Days later, he came back: “The CEO asked, who designed this? Mary?” Hearing that, I froze for a moment. My pixels weren’t just screens—they had become decisions. For the first time, leadership knew my name. That recognition gave me a quiet confidence: my thinking and persistence were shaping the product’s direction.
Days later, he came back: “The CEO asked, who designed this? Mary?” Hearing that, I froze for a moment. My pixels weren’t just screens—they had become decisions. For the first time, leadership knew my name. That recognition gave me a quiet confidence: my thinking and persistence were shaping the product’s direction.
Minimalist Scientific
Minimalist Scientific
Clean but restrained
Clean but restrained
Tech-Aesthetic
Tech-Aesthetic
Approved by CEO
Approved by CEO
Section 2
Section 2
User Flows · Design System Consistency · Team Collaboration
User Flows · Design System Consistency · Team Collaboration
I Became a Designer and a Mentor at the Same Time
I Became a Designer and a Mentor at the Same Time
With the core pages finalized, a wave of routine admin pages remained. Instead of carrying it all myself, I delegated to an intern. I mapped out flows, explained annotation rules, and showed him how to mark every interaction detail in Figma.
With the core pages finalized, a wave of routine admin pages remained. Instead of carrying it all myself, I delegated to an intern. I mapped out flows, explained annotation rules, and showed him how to mark every interaction detail in Figma.
The real reward wasn’t that I saved time—it was watching him grow. He began to deliver pages independently, and I reviewed and coached him along the way. I realized my value wasn’t just execution, but amplifying the team’s capacity. I wasn’t only a designer anymore—I was a multiplier.
The real reward wasn’t that I saved time—it was watching him grow. He began to deliver pages independently, and I reviewed and coached him along the way. I realized my value wasn’t just execution, but amplifying the team’s capacity. I wasn’t only a designer anymore—I was a multiplier.
1 year ago
1 year ago
1 year ago
1 year ago
Screenshots of our collaboration and guidance process
Screenshots of our collaboration and guidance process
Section 3
Section 3
Design Specs · QA Walkthrough · Developer Handoff
Design Specs · QA Walkthrough · Developer Handoff
I Took Responsibility All the Way to Development
I Took Responsibility All the Way to Development
Handing off to engineering didn’t mean my job was over—it meant it had just shifted. Developers flagged missing states, unclear motion specs, odd gaps. Instead of stepping back, I leaned in. I answered questions, clarified flows, and even recorded demo videos to show animations.
Handing off to engineering didn’t mean my job was over—it meant it had just shifted. Developers flagged missing states, unclear motion specs, odd gaps. Instead of stepping back, I leaned in. I answered questions, clarified flows, and even recorded demo videos to show animations.
Motion Demo
Motion Demo
Demo of the loading effect we expect
Demo of the loading effect we expect
Screenshots of our QA Tracking System
Screenshots of our QA Tracking System
To keep everything aligned, I built a QA tracker: logging bugs, mismatches, and updates through first, second, and third rounds of checks. It was tedious, but necessary. For me, it wasn’t about pixels—it was about whether scientists could trust the experience. That’s what ownership looked like.
To keep everything aligned, I built a QA tracker: logging bugs, mismatches, and updates through first, second, and third rounds of checks. It was tedious, but necessary. For me, it wasn’t about pixels—it was about whether scientists could trust the experience. That’s what ownership looked like.
Section 4
Section 4
Product Metrics · Stakeholder Feedback · OKR Alignment
Product Metrics · Stakeholder Feedback · OKR Alignment
It Wasn’t Just a Dashboard—It Was a 90% Efficiency Leap
It Wasn’t Just a Dashboard—It Was a 90% Efficiency Leap
Two months after launch, the numbers spoke: R&D cycles cut from 3–5 days down to 3–5 hours. Efficiency up 90%. Over 200 companies onboarded. 2,000+ users registered.
Two months after launch, the numbers spoke: R&D cycles cut from 3–5 days down to 3–5 hours. Efficiency up 90%. Over 200 companies onboarded. 2,000+ users registered.
As the team celebrated, I thought back to the kickoff, when I worried if I could handle the challenge. Looking now, my role was never just about designing screens. It was about reframing workflows, bridging cross-functional conflicts, and owning the product until the very end.
As the team celebrated, I thought back to the kickoff, when I worried if I could handle the challenge. Looking now, my role was never just about designing screens. It was about reframing workflows, bridging cross-functional conflicts, and owning the product until the very end.
The CEO’s words still echo: “This is good. Who designed it? Mary?” That was the moment I knew—I wasn’t just part of the project; I had become part of its story.
The CEO’s words still echo: “This is good. Who designed it? Mary?” That was the moment I knew—I wasn’t just part of the project; I had become part of its story.
90%
90%
Efficiency Improvement
Efficiency Improvement
200 +
200 +
Companies
Companies
2K +
2K +
Users
Users
I led the design of an AI-powered platform for accelerating drug discovery, turning a vague idea of “faster research with agents” into a tool scientists could trust. Through stakeholder discussions, client workshops, and design exploration, I found researchers didn’t just want a chat interface—they needed ways to configure workflows, reuse setups, and monitor experiments in real time. That shift reframed the product from a chatbot into a research tool, and redefined how the company envisioned human–AI collaboration.
Agent Studio
2024
Multi-AI BIO R&D Solution
Solution
Solution
Main Features
Main Features
Wait a minute, the video will be up soon...
Wait a minute, the video will be up soon...
Users can send commands through simple conversations and monitor the AI agent’s background operations at any time.
Users can send commands through simple conversations and monitor the AI agent’s background operations at any time.
Most Memorable Moment
Most Memorable Moment
It wasn’t in a brainstorming session that everything shifted—it was when my work was put in front of leadership. Instead of being treated as just “screens,” the designs reframed the conversation: suddenly, the discussion wasn’t about what could be built fastest, but about what vision the product should stand for.
It wasn’t in a brainstorming session that everything shifted—it was when my work was put in front of leadership. Instead of being treated as just “screens,” the designs reframed the conversation: suddenly, the discussion wasn’t about what could be built fastest, but about what vision the product should stand for.
Looking back, that moment changed how I define my role. My responsibility isn’t just to arrange pixels, but to design the lens through which teams set direction. It reminded me that design has the power to align strategy, not just deliver assets. And sometimes, the most memorable impact isn’t the feature you ship, but the shift in perspective you create for everyone else.
Looking back, that moment changed how I define my role. My responsibility isn’t just to arrange pixels, but to design the lens through which teams set direction. It reminded me that design has the power to align strategy, not just deliver assets. And sometimes, the most memorable impact isn’t the feature you ship, but the shift in perspective you create for everyone else.
When Design Stopped Being Decoration and Became Direction
When Design Stopped Being Decoration and Became Direction
My Teams & My Role
My Teams & My Role
My Role
My Role
Product Designer; Mentor of Interns
Product Designer; Mentor of Interns
Duration
Duration
Apr-Aug 2024(4 months)
Apr-Aug 2024(4 months)
Tools
Tools
Figma; Midjourney; Lottie Files
Figma; Midjourney; Lottie Files
Collaborators
Collaborators
Jie Li (Product Director); Zhen Chu (Intern); Maggie Chen (Intern)
Jie Li (Product Director); Zhen Chu (Intern); Maggie Chen (Intern)
Chapetr 1 - I Refused to Let It Become Just Another Chatbot
Chapetr 1 - I Refused to Let It Become Just Another Chatbot
Section 1
Section 1
Kickoff · Stakeholder Interviews · Requirements Gathering
Kickoff · Stakeholder Interviews · Requirements Gathering
I Entered With Questions Others Hadn’t Asked Yet
I Entered With Questions Others Hadn’t Asked Yet
At the kickoff, I didn’t walk in as someone new to the project. Weeks earlier, I had built a demo animation for the product director—my first attempt at imagining how scientists might interact with the platform. Because of that, I was already seeing the friction points the team hadn’t named yet.
At the kickoff, I didn’t walk in as someone new to the project. Weeks earlier, I had built a demo animation for the product director—my first attempt at imagining how scientists might interact with the platform. Because of that, I was already seeing the friction points the team hadn’t named yet.
Everyone seemed excited about a “chat-based AI” approach—simple, efficient, quick to build. But in my mind, I kept thinking: if it’s only a chatbot, scientists will never see this as a serious R&D platform. What they really need isn’t just an input box; it’s the sense of control they have in a lab. That realization shifted my role immediately—I wasn’t there to decorate an idea, but to transform a vague vision into something customers could actually trust.
Everyone seemed excited about a “chat-based AI” approach—simple, efficient, quick to build. But in my mind, I kept thinking: if it’s only a chatbot, scientists will never see this as a serious R&D platform. What they really need isn’t just an input box; it’s the sense of control they have in a lab. That realization shifted my role immediately—I wasn’t there to decorate an idea, but to transform a vague vision into something customers could actually trust.
AI Chat is enough
AI Chat is enough
But how do scientists track the whole workflow?
But how do scientists track the whole workflow?
Section 2
Section 2
Client Workshop · User Needs Discovery · Workflow Visualization
Client Workshop · User Needs Discovery · Workflow Visualization
When Clients Asked for Control, I Realized Data Alone Wasn’t Enough
When Clients Asked for Control, I Realized Data Alone Wasn’t Enough
black-box chatbot
black-box chatbot
visual workflow
visual workflow
In the first client meeting, I mostly listened. But the more I heard, the clearer it became: the PM’s emphasis on “chat” wasn’t enough. Clients wanted to see. They wanted to visualize the workflow, track multiple tasks running in parallel, and even view snippets of the code behind the agents. What they were asking for wasn’t data—it was reassurance.
In the first client meeting, I mostly listened. But the more I heard, the clearer it became: the PM’s emphasis on “chat” wasn’t enough. Clients wanted to see. They wanted to visualize the workflow, track multiple tasks running in parallel, and even view snippets of the code behind the agents. What they were asking for wasn’t data—it was reassurance.
Sitting there, I felt a strong urge: I had to translate the AI’s invisible power into something scientists could grasp, like watching an instrument run in a lab. That moment changed how I saw my role. I wasn’t just a designer; I was the bridge between researchers and the AI, responsible for making the unseen tangible.
Sitting there, I felt a strong urge: I had to translate the AI’s invisible power into something scientists could grasp, like watching an instrument run in a lab. That moment changed how I saw my role. I wasn’t just a designer; I was the bridge between researchers and the AI, responsible for making the unseen tangible.
Section 3
Section 3
Competitive Analysis · Wireframes · Interaction Flows
Competitive Analysis · Wireframes · Interaction Flows
I Challenged the Three-Window Idea With My Own Vision
I Challenged the Three-Window Idea With My Own Vision
The PM imagined a three-window setup: one for the workflow, one for AI collaboration, one for chat. On paper, it sounded complete. But to me, it felt fragmented—three islands with no natural flow. If we thought it was cumbersome, how would scientists feel under real pressure?
The PM imagined a three-window setup: one for the workflow, one for AI collaboration, one for chat. On paper, it sounded complete. But to me, it felt fragmented—three islands with no natural flow. If we thought it was cumbersome, how would scientists feel under real pressure?
Too fragmented
Too fragmented
Simpler, user-friendly
Simpler, user-friendly
“ Scientists don’t need more screens—they need clarity.
“ Scientists don’t need more screens—they need clarity.
I proposed something different: two windows. A global workflow on the left, a combined chat-and-agent view on the right. This way, scientists could see progress and context together. To lower the cognitive load, I added preset prompt cards beneath the input box, giving users a quick way to start tasks instead of staring at an empty cursor. When I put my sketches on the table, I felt nervous but energized. This wasn’t just about a cleaner layout—it was about fighting for a way of working that made sense to scientists.
I proposed something different: two windows. A global workflow on the left, a combined chat-and-agent view on the right. This way, scientists could see progress and context together. To lower the cognitive load, I added preset prompt cards beneath the input box, giving users a quick way to start tasks instead of staring at an empty cursor. When I put my sketches on the table, I felt nervous but energized. This wasn’t just about a cleaner layout—it was about fighting for a way of working that made sense to scientists.
Section 4
Section 4
Design Critique · Information Architecture · Trade-offs
Design Critique · Information Architecture · Trade-offs
When My Idea Broke, I Learned to Redefine Compromise
When My Idea Broke, I Learned to Redefine Compromise
The engineers pushed back. Merging the agent logs with the chat, they explained, would contaminate data and compromise results. Hearing that, I felt a sting of disappointment—my neat “solution” wasn’t technically viable.
The engineers pushed back. Merging the agent logs with the chat, they explained, would contaminate data and compromise results. Hearing that, I felt a sting of disappointment—my neat “solution” wasn’t technically viable.
Agent Status Visualization!
Agent Status Visualization!
Under processing ...
Under processing ...
3-Windows
3-Windows
2-Windows
2-Windows
But instead of defending stubbornly, I listened. I realized my job wasn’t to win my idea; it was to move the team forward. So we returned to the three-window structure, but I insisted on adding visualized agent personas—showing their roles, status, and progress. That one change turned an abstract process into something scientists could track and trust.
But instead of defending stubbornly, I listened. I realized my job wasn’t to win my idea; it was to move the team forward. So we returned to the three-window structure, but I insisted on adding visualized agent personas—showing their roles, status, and progress. That one change turned an abstract process into something scientists could track and trust.
Walking out of that meeting, I felt a shift. I hadn’t “won,” but I had earned trust. My value wasn’t measured by whether my idea survived intact, but by whether I helped the team pivot toward something stronger.
Walking out of that meeting, I felt a shift. I hadn’t “won,” but I had earned trust. My value wasn’t measured by whether my idea survived intact, but by whether I helped the team pivot toward something stronger.
Chapetr 2 - When Delivery Pressure Hit, I Chose Ownership Over Shortcuts
Chapetr 2 - When Delivery Pressure Hit, I Chose Ownership Over Shortcuts
Section 1
Section 1
Moodboard · Hi-fi Mockups · Design Review
Moodboard · Hi-fi Mockups · Design Review
The First Time the CEO Remembered My Name
The First Time the CEO Remembered My Name
When I handed over two versions of the Hi-fi designs, I wasn’t sure which—if either—would land. One leaned toward minimalism, the other toward a bolder tech aesthetic. The product director took them straight to the CEO and design lead.
When I handed over two versions of the Hi-fi designs, I wasn’t sure which—if either—would land. One leaned toward minimalism, the other toward a bolder tech aesthetic. The product director took them straight to the CEO and design lead.
Days later, he came back: “The CEO asked, who designed this? Mary?” Hearing that, I froze for a moment. My pixels weren’t just screens—they had become decisions. For the first time, leadership knew my name. That recognition gave me a quiet confidence: my thinking and persistence were shaping the product’s direction.
Days later, he came back: “The CEO asked, who designed this? Mary?” Hearing that, I froze for a moment. My pixels weren’t just screens—they had become decisions. For the first time, leadership knew my name. That recognition gave me a quiet confidence: my thinking and persistence were shaping the product’s direction.
Minimalist Scientific
Minimalist Scientific
Clean but restrained
Clean but restrained
Tech-Aesthetic
Tech-Aesthetic
Approved by CEO
Approved by CEO
Section 2
Section 2
User Flows · Design System Consistency · Team Collaboration
User Flows · Design System Consistency · Team Collaboration
I Became a Designer and a Mentor at the Same Time
I Became a Designer and a Mentor at the Same Time
With the core pages finalized, a wave of routine admin pages remained. Instead of carrying it all myself, I delegated to an intern. I mapped out flows, explained annotation rules, and showed him how to mark every interaction detail in Figma.
With the core pages finalized, a wave of routine admin pages remained. Instead of carrying it all myself, I delegated to an intern. I mapped out flows, explained annotation rules, and showed him how to mark every interaction detail in Figma.
The real reward wasn’t that I saved time—it was watching him grow. He began to deliver pages independently, and I reviewed and coached him along the way. I realized my value wasn’t just execution, but amplifying the team’s capacity. I wasn’t only a designer anymore—I was a multiplier.
The real reward wasn’t that I saved time—it was watching him grow. He began to deliver pages independently, and I reviewed and coached him along the way. I realized my value wasn’t just execution, but amplifying the team’s capacity. I wasn’t only a designer anymore—I was a multiplier.
1 year ago
1 year ago
1 year ago
1 year ago
Screenshots of our collaboration and guidance process
Screenshots of our collaboration and guidance process
Section 3
Section 3
Design Specs · QA Walkthrough · Developer Handoff
Design Specs · QA Walkthrough · Developer Handoff
I Took Responsibility All the Way to Development
I Took Responsibility All the Way to Development
Handing off to engineering didn’t mean my job was over—it meant it had just shifted. Developers flagged missing states, unclear motion specs, odd gaps. Instead of stepping back, I leaned in. I answered questions, clarified flows, and even recorded demo videos to show animations.
Handing off to engineering didn’t mean my job was over—it meant it had just shifted. Developers flagged missing states, unclear motion specs, odd gaps. Instead of stepping back, I leaned in. I answered questions, clarified flows, and even recorded demo videos to show animations.
Motion Demo
Motion Demo
Demo of the loading effect we expect
Demo of the loading effect we expect
Screenshots of our QA Tracking System
Screenshots of our QA Tracking System
To keep everything aligned, I built a QA tracker: logging bugs, mismatches, and updates through first, second, and third rounds of checks. It was tedious, but necessary. For me, it wasn’t about pixels—it was about whether scientists could trust the experience. That’s what ownership looked like.
To keep everything aligned, I built a QA tracker: logging bugs, mismatches, and updates through first, second, and third rounds of checks. It was tedious, but necessary. For me, it wasn’t about pixels—it was about whether scientists could trust the experience. That’s what ownership looked like.
Section 4
Section 4
Product Metrics · Stakeholder Feedback · OKR Alignment
Product Metrics · Stakeholder Feedback · OKR Alignment
It Wasn’t Just a Dashboard—It Was a 90% Efficiency Leap
It Wasn’t Just a Dashboard—It Was a 90% Efficiency Leap
Two months after launch, the numbers spoke: R&D cycles cut from 3–5 days down to 3–5 hours. Efficiency up 90%. Over 200 companies onboarded. 2,000+ users registered.
Two months after launch, the numbers spoke: R&D cycles cut from 3–5 days down to 3–5 hours. Efficiency up 90%. Over 200 companies onboarded. 2,000+ users registered.
As the team celebrated, I thought back to the kickoff, when I worried if I could handle the challenge. Looking now, my role was never just about designing screens. It was about reframing workflows, bridging cross-functional conflicts, and owning the product until the very end.
As the team celebrated, I thought back to the kickoff, when I worried if I could handle the challenge. Looking now, my role was never just about designing screens. It was about reframing workflows, bridging cross-functional conflicts, and owning the product until the very end.
The CEO’s words still echo: “This is good. Who designed it? Mary?” That was the moment I knew—I wasn’t just part of the project; I had become part of its story.
The CEO’s words still echo: “This is good. Who designed it? Mary?” That was the moment I knew—I wasn’t just part of the project; I had become part of its story.
90%
90%
Efficiency Improvement
Efficiency Improvement
200 +
200 +
Companies
Companies
2K +
2K +
Users
Users
I led the design of an AI-powered platform for accelerating drug discovery, turning a vague idea of “faster research with agents” into a tool scientists could trust. Through stakeholder discussions, client workshops, and design exploration, I found researchers didn’t just want a chat interface—they needed ways to configure workflows, reuse setups, and monitor experiments in real time. That shift reframed the product from a chatbot into a research tool, and redefined how the company envisioned human–AI collaboration.
Agent Studio
2024
Multi-AI BIO R&D Solution
Solution
Solution
Main Features
Main Features
Wait a minute, the video will be up soon...
Wait a minute, the video will be up soon...
Users can send commands through simple conversations and monitor the AI agent’s background operations at any time.
Users can send commands through simple conversations and monitor the AI agent’s background operations at any time.
Most Memorable Moment
Most Memorable Moment
It wasn’t in a brainstorming session that everything shifted—it was when my work was put in front of leadership. Instead of being treated as just “screens,” the designs reframed the conversation: suddenly, the discussion wasn’t about what could be built fastest, but about what vision the product should stand for.
It wasn’t in a brainstorming session that everything shifted—it was when my work was put in front of leadership. Instead of being treated as just “screens,” the designs reframed the conversation: suddenly, the discussion wasn’t about what could be built fastest, but about what vision the product should stand for.
Looking back, that moment changed how I define my role. My responsibility isn’t just to arrange pixels, but to design the lens through which teams set direction. It reminded me that design has the power to align strategy, not just deliver assets. And sometimes, the most memorable impact isn’t the feature you ship, but the shift in perspective you create for everyone else.
Looking back, that moment changed how I define my role. My responsibility isn’t just to arrange pixels, but to design the lens through which teams set direction. It reminded me that design has the power to align strategy, not just deliver assets. And sometimes, the most memorable impact isn’t the feature you ship, but the shift in perspective you create for everyone else.
When Design Stopped Being Decoration and Became Direction
When Design Stopped Being Decoration and Became Direction
My Teams & My Role
My Teams & My Role
My Role
My Role
Product Designer; Mentor of Interns
Product Designer; Mentor of Interns
Duration
Duration
Apr-Aug 2024(4 months)
Apr-Aug 2024(4 months)
Tools
Tools
Figma; Midjourney; Lottie Files
Figma; Midjourney; Lottie Files
Collaborators
Collaborators
Jie Li (Product Director); Zhen Chu (Intern); Maggie Chen (Intern)
Jie Li (Product Director); Zhen Chu (Intern); Maggie Chen (Intern)
Chapetr 1 - I Refused to Let It Become Just Another Chatbot
Chapetr 1 - I Refused to Let It Become Just Another Chatbot
Section 1
Section 1
Kickoff · Stakeholder Interviews · Requirements Gathering
Kickoff · Stakeholder Interviews · Requirements Gathering
I Entered With Questions Others Hadn’t Asked Yet
I Entered With Questions Others Hadn’t Asked Yet
At the kickoff, I didn’t walk in as someone new to the project. Weeks earlier, I had built a demo animation for the product director—my first attempt at imagining how scientists might interact with the platform. Because of that, I was already seeing the friction points the team hadn’t named yet.
At the kickoff, I didn’t walk in as someone new to the project. Weeks earlier, I had built a demo animation for the product director—my first attempt at imagining how scientists might interact with the platform. Because of that, I was already seeing the friction points the team hadn’t named yet.
Everyone seemed excited about a “chat-based AI” approach—simple, efficient, quick to build. But in my mind, I kept thinking: if it’s only a chatbot, scientists will never see this as a serious R&D platform. What they really need isn’t just an input box; it’s the sense of control they have in a lab. That realization shifted my role immediately—I wasn’t there to decorate an idea, but to transform a vague vision into something customers could actually trust.
Everyone seemed excited about a “chat-based AI” approach—simple, efficient, quick to build. But in my mind, I kept thinking: if it’s only a chatbot, scientists will never see this as a serious R&D platform. What they really need isn’t just an input box; it’s the sense of control they have in a lab. That realization shifted my role immediately—I wasn’t there to decorate an idea, but to transform a vague vision into something customers could actually trust.
AI Chat is enough
AI Chat is enough
But how do scientists track the whole workflow?
But how do scientists track the whole workflow?
Section 2
Section 2
Client Workshop · User Needs Discovery · Workflow Visualization
Client Workshop · User Needs Discovery · Workflow Visualization
When Clients Asked for Control, I Realized Data Alone Wasn’t Enough
When Clients Asked for Control, I Realized Data Alone Wasn’t Enough
black-box chatbot
black-box chatbot
visual workflow
visual workflow
In the first client meeting, I mostly listened. But the more I heard, the clearer it became: the PM’s emphasis on “chat” wasn’t enough. Clients wanted to see. They wanted to visualize the workflow, track multiple tasks running in parallel, and even view snippets of the code behind the agents. What they were asking for wasn’t data—it was reassurance.
In the first client meeting, I mostly listened. But the more I heard, the clearer it became: the PM’s emphasis on “chat” wasn’t enough. Clients wanted to see. They wanted to visualize the workflow, track multiple tasks running in parallel, and even view snippets of the code behind the agents. What they were asking for wasn’t data—it was reassurance.
Sitting there, I felt a strong urge: I had to translate the AI’s invisible power into something scientists could grasp, like watching an instrument run in a lab. That moment changed how I saw my role. I wasn’t just a designer; I was the bridge between researchers and the AI, responsible for making the unseen tangible.
Sitting there, I felt a strong urge: I had to translate the AI’s invisible power into something scientists could grasp, like watching an instrument run in a lab. That moment changed how I saw my role. I wasn’t just a designer; I was the bridge between researchers and the AI, responsible for making the unseen tangible.
Section 3
Section 3
Competitive Analysis · Wireframes · Interaction Flows
Competitive Analysis · Wireframes · Interaction Flows
I Challenged the Three-Window Idea With My Own Vision
I Challenged the Three-Window Idea With My Own Vision
The PM imagined a three-window setup: one for the workflow, one for AI collaboration, one for chat. On paper, it sounded complete. But to me, it felt fragmented—three islands with no natural flow. If we thought it was cumbersome, how would scientists feel under real pressure?
The PM imagined a three-window setup: one for the workflow, one for AI collaboration, one for chat. On paper, it sounded complete. But to me, it felt fragmented—three islands with no natural flow. If we thought it was cumbersome, how would scientists feel under real pressure?
Too fragmented
Too fragmented
Simpler, user-friendly
Simpler, user-friendly
“ Scientists don’t need more screens—they need clarity.
“ Scientists don’t need more screens—they need clarity.
I proposed something different: two windows. A global workflow on the left, a combined chat-and-agent view on the right. This way, scientists could see progress and context together. To lower the cognitive load, I added preset prompt cards beneath the input box, giving users a quick way to start tasks instead of staring at an empty cursor. When I put my sketches on the table, I felt nervous but energized. This wasn’t just about a cleaner layout—it was about fighting for a way of working that made sense to scientists.
I proposed something different: two windows. A global workflow on the left, a combined chat-and-agent view on the right. This way, scientists could see progress and context together. To lower the cognitive load, I added preset prompt cards beneath the input box, giving users a quick way to start tasks instead of staring at an empty cursor. When I put my sketches on the table, I felt nervous but energized. This wasn’t just about a cleaner layout—it was about fighting for a way of working that made sense to scientists.
Section 4
Section 4
Design Critique · Information Architecture · Trade-offs
Design Critique · Information Architecture · Trade-offs
When My Idea Broke, I Learned to Redefine Compromise
When My Idea Broke, I Learned to Redefine Compromise
The engineers pushed back. Merging the agent logs with the chat, they explained, would contaminate data and compromise results. Hearing that, I felt a sting of disappointment—my neat “solution” wasn’t technically viable.
The engineers pushed back. Merging the agent logs with the chat, they explained, would contaminate data and compromise results. Hearing that, I felt a sting of disappointment—my neat “solution” wasn’t technically viable.
Agent Status Visualization!
Agent Status Visualization!
Under processing ...
Under processing ...
3-Windows
3-Windows
2-Windows
2-Windows
But instead of defending stubbornly, I listened. I realized my job wasn’t to win my idea; it was to move the team forward. So we returned to the three-window structure, but I insisted on adding visualized agent personas—showing their roles, status, and progress. That one change turned an abstract process into something scientists could track and trust.
But instead of defending stubbornly, I listened. I realized my job wasn’t to win my idea; it was to move the team forward. So we returned to the three-window structure, but I insisted on adding visualized agent personas—showing their roles, status, and progress. That one change turned an abstract process into something scientists could track and trust.
Walking out of that meeting, I felt a shift. I hadn’t “won,” but I had earned trust. My value wasn’t measured by whether my idea survived intact, but by whether I helped the team pivot toward something stronger.
Walking out of that meeting, I felt a shift. I hadn’t “won,” but I had earned trust. My value wasn’t measured by whether my idea survived intact, but by whether I helped the team pivot toward something stronger.
Chapetr 2 - When Delivery Pressure Hit, I Chose Ownership Over Shortcuts
Chapetr 2 - When Delivery Pressure Hit, I Chose Ownership Over Shortcuts
Section 1
Section 1
Moodboard · Hi-fi Mockups · Design Review
Moodboard · Hi-fi Mockups · Design Review
The First Time the CEO Remembered My Name
The First Time the CEO Remembered My Name
When I handed over two versions of the Hi-fi designs, I wasn’t sure which—if either—would land. One leaned toward minimalism, the other toward a bolder tech aesthetic. The product director took them straight to the CEO and design lead.
When I handed over two versions of the Hi-fi designs, I wasn’t sure which—if either—would land. One leaned toward minimalism, the other toward a bolder tech aesthetic. The product director took them straight to the CEO and design lead.
Days later, he came back: “The CEO asked, who designed this? Mary?” Hearing that, I froze for a moment. My pixels weren’t just screens—they had become decisions. For the first time, leadership knew my name. That recognition gave me a quiet confidence: my thinking and persistence were shaping the product’s direction.
Days later, he came back: “The CEO asked, who designed this? Mary?” Hearing that, I froze for a moment. My pixels weren’t just screens—they had become decisions. For the first time, leadership knew my name. That recognition gave me a quiet confidence: my thinking and persistence were shaping the product’s direction.
Minimalist Scientific
Minimalist Scientific
Clean but restrained
Clean but restrained
Tech-Aesthetic
Tech-Aesthetic
Approved by CEO
Approved by CEO
Section 2
Section 2
User Flows · Design System Consistency · Team Collaboration
User Flows · Design System Consistency · Team Collaboration
I Became a Designer and a Mentor at the Same Time
I Became a Designer and a Mentor at the Same Time
With the core pages finalized, a wave of routine admin pages remained. Instead of carrying it all myself, I delegated to an intern. I mapped out flows, explained annotation rules, and showed him how to mark every interaction detail in Figma.
With the core pages finalized, a wave of routine admin pages remained. Instead of carrying it all myself, I delegated to an intern. I mapped out flows, explained annotation rules, and showed him how to mark every interaction detail in Figma.
The real reward wasn’t that I saved time—it was watching him grow. He began to deliver pages independently, and I reviewed and coached him along the way. I realized my value wasn’t just execution, but amplifying the team’s capacity. I wasn’t only a designer anymore—I was a multiplier.
The real reward wasn’t that I saved time—it was watching him grow. He began to deliver pages independently, and I reviewed and coached him along the way. I realized my value wasn’t just execution, but amplifying the team’s capacity. I wasn’t only a designer anymore—I was a multiplier.
1 year ago
1 year ago
1 year ago
1 year ago
Screenshots of our collaboration and guidance process
Screenshots of our collaboration and guidance process
Section 3
Section 3
Design Specs · QA Walkthrough · Developer Handoff
Design Specs · QA Walkthrough · Developer Handoff
I Took Responsibility All the Way to Development
I Took Responsibility All the Way to Development
Handing off to engineering didn’t mean my job was over—it meant it had just shifted. Developers flagged missing states, unclear motion specs, odd gaps. Instead of stepping back, I leaned in. I answered questions, clarified flows, and even recorded demo videos to show animations.
Handing off to engineering didn’t mean my job was over—it meant it had just shifted. Developers flagged missing states, unclear motion specs, odd gaps. Instead of stepping back, I leaned in. I answered questions, clarified flows, and even recorded demo videos to show animations.
Motion Demo
Motion Demo
Demo of the loading effect we expect
Demo of the loading effect we expect
Screenshots of our QA Tracking System
Screenshots of our QA Tracking System
To keep everything aligned, I built a QA tracker: logging bugs, mismatches, and updates through first, second, and third rounds of checks. It was tedious, but necessary. For me, it wasn’t about pixels—it was about whether scientists could trust the experience. That’s what ownership looked like.
To keep everything aligned, I built a QA tracker: logging bugs, mismatches, and updates through first, second, and third rounds of checks. It was tedious, but necessary. For me, it wasn’t about pixels—it was about whether scientists could trust the experience. That’s what ownership looked like.
Section 4
Section 4
Product Metrics · Stakeholder Feedback · OKR Alignment
Product Metrics · Stakeholder Feedback · OKR Alignment
It Wasn’t Just a Dashboard—It Was a 90% Efficiency Leap
It Wasn’t Just a Dashboard—It Was a 90% Efficiency Leap
Two months after launch, the numbers spoke: R&D cycles cut from 3–5 days down to 3–5 hours. Efficiency up 90%. Over 200 companies onboarded. 2,000+ users registered.
Two months after launch, the numbers spoke: R&D cycles cut from 3–5 days down to 3–5 hours. Efficiency up 90%. Over 200 companies onboarded. 2,000+ users registered.
As the team celebrated, I thought back to the kickoff, when I worried if I could handle the challenge. Looking now, my role was never just about designing screens. It was about reframing workflows, bridging cross-functional conflicts, and owning the product until the very end.
As the team celebrated, I thought back to the kickoff, when I worried if I could handle the challenge. Looking now, my role was never just about designing screens. It was about reframing workflows, bridging cross-functional conflicts, and owning the product until the very end.
The CEO’s words still echo: “This is good. Who designed it? Mary?” That was the moment I knew—I wasn’t just part of the project; I had become part of its story.
The CEO’s words still echo: “This is good. Who designed it? Mary?” That was the moment I knew—I wasn’t just part of the project; I had become part of its story.
90%
90%
Efficiency Improvement
Efficiency Improvement
200 +
200 +
Companies
Companies
2K +
2K +
Users
Users