Brian Ho Yiu Chun

Product Designer

Work

About

Play

Resume

Let's Talk! ✽

Brian Ho Yiu Chun

Product Designer

Brian Ho Yiu Chun

Product Designer

From outdated editor to AI companion: redesigning the authoring IDE experience for IBM’s 10M+ learners.

From outdated editor to AI companion: redesigning the authoring IDE experience for IBM’s 10M+ learners.

When

8-month Internship, 2025

Role

UX Designer & Design Engineer

UX Designer & Design Engineer

Team

Myself , Uday Kenwar (Developer), Wilbur Elbourni (Developer), Karry Huang (Developer), Albert Huynh (Developer)

Myself , Uday Kenwar (Developer),

Wilbur Elbourni (Developer), Karry Huang (Developer), Albert Huynh (Developer)

Launched

Fall 2025

Tools & Skills

Figma, React, Tailwind CSS, Javascript, HTML, LLM Integration, AI Interaction Design

Contribution

User interface design, Prototyping, Design System, Front-end coding, Vector Animation, Project Management

Impact Highlights

Accuracy in technical concepts and author styles consistency

90%

Avg. Lab Publishing Time

<34 minutes

Impacted and supported

>10 million learners &

>1000 authors

So what’s the problem?

As an agile software team, quick turnaround and development was key. However, I identified that the Author IDE, the primary tool for creating labs, was a massive bottleneck. The existing interface lacked coherence and features like previews and environment-specific tools were buried. It forced authors to spend more time "learning the tool" than "creating content."

As our global sales team starts to rely more on our course creation platform, the lack of quality guardrails means labs are often inconsistent in tone and technical accuracy. Look how many disparate navigation patterns and hidden menus existed in the legacy IDE:

Switch to view comments!

Click bubbles to see comments!

Switch to view comments!

Click bubbles to see comments!

See what our team thinks!

Click bubbles to see comments!

Bradley Steinfeld

4 hours ago

Everything is just so unclear, i wish we can have history of their labs so that the data scientists can publish any version they want.

Tenzin Migmar

Just now

You know there’s so many hidden features in our tool, like I don’t even know that we can hide the preview until you asked me today!

Karan Goswami

3 days ago

It’s just endless scrolling, It takes time for me to find certain elements or even locate pages in the markdown.

Abdul Fatir

6 mins ago

I hate that guided tutorial! I always just skip it because it doesn’t help me with anything!

Thus,

Thus,

A system needs to bring cohesion to the workflow. We needed a proactive environment that leveraged familiar developer mental models to speed up creation while ensuring every lab met IBM’s global standards.

A system needs to bring cohesion to the workflow. We needed a proactive environment that leveraged familiar developer mental models to speed up creation while ensuring every lab met IBM’s global standards.

So,

So,

What if we evolved the editor into a centralized, collaborative AI agent that eliminates redundancy and inconsistency by thinking alongside the author?

What if we evolved the editor into a centralized, collaborative AI agent that eliminates redundancy and inconsistency by thinking alongside the author?

Understanding the existing system and processes was key. 

Understanding the existing system and processes was key. 

Understanding the existing system and processes was key. 

Authors on our platform are primarily Data Scientists and Engineers, users who are comfortable with code but frustrated by inconsistent UI. My key objectives were:

Authors on our platform are primarily Data Scientists and Engineers, users who are comfortable with code but frustrated by inconsistent UI. My key objectives were:

Modernize the Workspace: Use "Wayfinding" to make tools discoverable for technical users.

Modernize the Workspace: Use "Wayfinding" to make tools discoverable for technical users.

Integrate AI Agency: Design an automotive “helper” as a collaborative partner, not just a chatbot.

Integrate AI Agency: Design an automotive “helper” as a collaborative partner, not just a chatbot.

Optimize for Data Science: Ensure code snippets and technical accuracy are front-and-center.

Optimize for Data Science: Ensure code snippets and technical accuracy are front-and-center.

Remember Data Scientists are important!

Remember Data Scientists are important!

Remember Data Scientists are important!

Beyond design, I also focused on implementation. I developed the front-end components for the new Ribbon UI and the editor using React and Tailwind CSS.

I worked closely with authors & data scientists to make sure the transition from a Markdown view to a visual editor mode was seamless, providing working code they could easily cross-reference.

Beyond design, I also focused on implementation. I developed the front-end components for the new Ribbon UI and the editor using React and Tailwind CSS.

I worked closely with authors & data scientists to make sure the transition from a Markdown view to a visual editor mode was seamless, providing working code they could easily cross-reference.

Laying out the foundations

Laying out the foundations

Laying out the foundations

Wayfinding through Ribbons

Wayfinding through Ribbons

I introduced a Ribbon Navigation system inspired by Microsoft Word and VS Code. For Data Scientists who rely on high information density, this ensured that environment-specific tools (like Cloud IDEs and Dataset management) were always one click away, not buried in sub-menus.

Color as a Language

Color as a Language

I introduced Syntax-inspired Color Coding: Blue for styles, Orange for file operations, and Green for list structures. This "Recognition over Recall" approach allowed technical authors to scan complex lab structures as if they were reading code in a native IDE.

Visual Editor

Visual Editor

With a WYSIWYG (What-You-See-Is-What-You-Get) editor similar to Notion, authors can skip editing small words and code languages, allowing more people to step into creating more variety of courses, and also increase efficiency of finishing course instructions.

Designing an AI agent

Designing an AI agent

Designing an AI agent

After setting up the basics, I designed a new Agentic AI, called IDA as a workspace that aims to think alongside the author.

After setting up the basics, I designed a new Agentic AI, called IDA as a workspace that aims to think alongside the author.

The Governors of Ida

The Governors of Ida

The Governors of Ida

I designed a toggle system that allows authors, primarily Data Scientists, choose their level of "Human-in-the-loop" involvement. This ensures that speed never comes at the cost of technical accuracy.

Ida generates a Task Summary outlining the logic of the changes before execution.

Plan Mode

Manual Accept

Auto-Accept

Ida generates a Task Summary outlining the logic of the changes before execution.

Plan Mode

Manual Accept

Auto-Accept

Ida generates a Task Summary outlining the logic of the changes before execution.

Plan Mode

Manual Accept

Auto-Accept

Core Design Considerations

Core Design Considerations

Instead of a static editor, I designed Ida to handle the four primary tasks of a Data Scientist's content workflow:

Instead of a static editor, I designed Ida to handle the four primary tasks of a Data Scientist's content workflow:

Wayfinding: Create from Scratch

Wayfinding: Create from Scratch

Wayfinding: Create from Scratch

Synthesis: Proofread

Synthesis: Proofread

Synthesis: Proofread

Transformation: Generate and Replace

Transformation: Generate and Replace

Transformation: Generate and Replace

Trust Building: Search for Help and Communities

Trust Building: Search for Communities

Trust Building: Search for Communities

We need to build trust for our users.

We need to build trust for our users.

We need to build trust for our users.

Action Status: I designed a clear "Thinking... Citing..." status to eliminate system silence and manage expectations during heavy LLM processing.

Action Status: I designed a clear "Thinking... Citing..." status to eliminate system silence and manage expectations during heavy LLM processing.

Action Status: I designed a clear "Thinking... Citing..." status to eliminate system silence and manage expectations during heavy LLM processing.

Source Citations: To prevent hallucinations, Ida identifies Footprints. If content is based on sourcing existing guided projects or other labs, it shows the specific sources used.

Source Citations: To prevent hallucinations, Ida identifies Footprints. If content is based on sourcing existing guided projects or other labs, it shows the specific sources used.

Source Citations: To prevent hallucinations, Ida identifies Footprints. If content is based on sourcing existing guided projects or other labs, it shows the specific sources used.

Feedback Loops: Every generated reply includes Like/Dislike buttons and Checkpoint markers to allow authors to show us where to improve in the quality of generation of output.

Feedback Loops: Every generated reply includes Like/Dislike buttons and Checkpoint markers to allow authors to show us where to improve in the quality of generation of output.

Feedback Loops: Every generated reply includes Like/Dislike buttons and Checkpoint markers to allow authors to show us where to improve in the quality of generation of output.

Supplying quality with AI

Supplying quality with AI

Supplying quality with AI

I identified that technical accuracy was our biggest trust barrier. I designed a Quality Scorecard evaluating 6 metrics in real-time. This turned subjective "quality" into hard data, allowing authors to catch "breaking bugs" in their lab instructions before they reached learners.

I identified that technical accuracy was our biggest trust barrier. I designed a Quality Scorecard evaluating 6 metrics in real-time. This turned subjective "quality" into hard data, allowing authors to catch "breaking bugs" in their lab instructions before they reached learners.

I identified that technical accuracy was our biggest trust barrier. I designed a Quality Scorecard evaluating 6 metrics in real-time. This turned subjective "quality" into hard data, allowing authors to catch "breaking bugs" in their lab instructions before they reached learners.

So how are authors creating now?

So how are authors creating now?

So how are authors creating now?

I identified that technical accuracy was our biggest trust barrier. I designed a Quality Scorecard evaluating 6 metrics in real-time. This turned subjective "quality" into hard data, allowing authors to catch "breaking bugs" in their lab instructions before they reached learners.

I identified that technical accuracy was our biggest trust barrier. I designed a Quality Scorecard evaluating 6 metrics in real-time. This turned subjective "quality" into hard data, allowing authors to catch "breaking bugs" in their lab instructions before they reached learners.

I identified that technical accuracy was our biggest trust barrier. I designed a Quality Scorecard evaluating 6 metrics in real-time. This turned subjective "quality" into hard data, allowing authors to catch "breaking bugs" in their lab instructions before they reached learners.

What I Learned

What I Learned

What I Learned

The new SN-Editor was an exciting and impactful project, where I honed skills in UX research, prototyping, UI design, and AI integration, ultimately proposing tools that elevate lab creation. 

The new SN-Editor was an exciting and impactful project, where I honed skills in UX research, prototyping, UI design, and AI integration, ultimately proposing tools that elevate lab creation. 

The new SN-Editor was an exciting and impactful project, where I honed skills in UX research, prototyping, UI design, and AI integration, ultimately proposing tools that elevate lab creation. 

The Future is Agentic

The Future is Agentic

The Future is Agentic

This project deepened my passion for intuitive interfaces. Throughout this process, I discovered that the most successful "AI Design" is not just about the AI itself —it’s about crafting a system that makes the human, whether a designer, developer, or data scientist, feel more capable and creative.

This project deepened my passion for intuitive interfaces. Throughout this process, I discovered that the most successful "AI Design" is not just about the AI itself —it’s about crafting a system that makes the human, whether a designer, developer, or data scientist, feel more capable and creative.

Transparency is the ultimate feature.

Transparency is the ultimate feature.

Transparency is the ultimate feature.

During my final month, I realized that while Auto-Accept was requested as the basic, Plan Mode was the feature that actually can provide trust for users. This taught me that for Data Scientists, seeing the "logic" of the AI is more important than the speed of the generation.

During my final month, I realized that while Auto-Accept was requested as the basic, Plan Mode was the feature that actually can provide trust for users. This taught me that for Data Scientists, seeing the "logic" of the AI is more important than the speed of the generation.

Designing for the "Human-in-the-Loop"

Designing for the "Human-in-the-Loop"

Designing for the "Human-in-the-Loop"

By implementing Checkpoints and Manual Edits, I moved the editor closer to a Git-like workflow. This project taught me that the best AI interfaces don't hide the complexity; they provide the guardrails to manage it safely.

By implementing Checkpoints and Manual Edits, I moved the editor closer to a Git-like workflow. This project taught me that the best AI interfaces don't hide the complexity; they provide the guardrails to manage it safely.

Other Selected Works

Wellness@HKU

A Personalized Resource Navigator for HKU Students

Wellness@HKU

A Personalized Resource Navigator for HKU Students

Wellness@HKU

A Personalized Resource Navigator for HKU Students

Foodnote

Simplifying Meal Decision Making for Students

Foodnote

Simplifying Meal Decision Making for Students

Foodnote

Simplifying Meal Decision Making for Students

© 2026 Brian Ho Yiu Chun

brian.hoyc@gmail.com

@hoycbrian

Resume

© 2026 Brian Ho Yiu Chun

brian.hoyc@gmail.com

@hoycbrian

Resume

© 2026 Brian Ho Yiu Chun

brian.hoyc@gmail.com

@hoycbrian

Resume