Author IDE - Simplifying lab creation for Authors with features and AI through Redesign

Author IDE - Simplifying lab creation for Authors with features and AI through Redesign

Author IDE - Simplifying lab creation for Authors with features and AI through Redesign

Overview

Overview

View Prototype

Context

After my first year of my masters, I am currently a Designer intern at IBM within the Skills Network Team. One of our products Author IDE, has not been updated for over 5 years.

Background

Author IDE is the go-to tool for creating lab courses in our product Author Workbench, where authors create and publish course/guided projects and labs for learners in Cognitiveclass.ai or other educational platforms such as edX, Coursera etc. However, as we are using editor.md as our markdown editor, it is outdated and inefficient to our authors and our Global Sales team.

Duration

June 2025 - Present

Team

Brian Ho (ME), Bradley Steinfeld (Developer),

Boyun Leung (Supervisor)

Brian Ho (ME),

Bradley Steinfeld (Developer),

Boyun Leung (Supervisor)

Role

Product Designer

Product Designer

User research, Prototyping & testing, Design System, Branding & Visual Design, Presentation

User research, Prototyping & testing, Design System, Branding & Visual Design, Presentation

Impact Highlights

Accuracy in technical concepts and author styles consistency

90%

90%

Avg. Lab Publishing Time

<10 minutes

<10 minutes

Impacted and supported

>3 million learners &

>1000 authors

>3 million learners &

>1000 authors

The Proposal

Modernize UI & Design

Quality Assurance & Settings

Efficient Content Creation (Ida)

Design Consideration

Ribbons

Organize tools into intuitive tabs like Home, Edit, and Insert for quick access, with shortcuts like Undo/Redo to speed up your workflow.

Design Consideration

View Mode/Markdown Mode

Toggle between visual preview and Markdown editing for content review, giving you an option to edit however you like to make a great lab project!

Design Consideration

Auto-Scroll

Lock the preview panel or unlock it to sync with your edits, making real-time adjustments smooth and hassle-free.

Design Consideration

Colours in Markdown

Highlight features with Prettier-inspired hues—blue for text styles, orange for app starts—to spot elements quickly and add visual fun.

The Proposal

Modernize UI & Design

Quality Assurance & Settings

Efficient Content Creation (Ida)

Design Consideration

Ribbons

Organize tools into intuitive tabs like Home, Edit, and Insert for quick access, with shortcuts like Undo/Redo to speed up your workflow.

Design Consideration

View Mode/Markdown Mode

Toggle between visual preview and Markdown editing for content review, giving you an option to edit however you like to make a great lab project!

Design Consideration

Auto-Scroll

Lock the preview panel or unlock it to sync with your edits, making real-time adjustments smooth and hassle-free.

Design Consideration

Colours in Markdown

Highlight features with Prettier-inspired hues—blue for text styles, orange for app starts—to spot elements quickly and add visual fun.

The Proposal

Modernize UI & Design

Quality Assurance & Settings

Efficient Content Creation (Ida)

Design Consideration

Ribbons

Organize tools into intuitive tabs like Home, Edit, and Insert for quick access, with shortcuts like Undo/Redo to speed up your workflow.

Design Consideration

View Mode/Markdown Mode

Toggle between visual preview and Markdown editing for content review, giving you an option to edit however you like to make a great lab project!

Design Consideration

Auto-Scroll

Lock the preview panel or unlock it to sync with your edits, making real-time adjustments smooth and hassle-free.

Design Consideration

Colours in Markdown

Highlight features with Prettier-inspired hues—blue for text styles, orange for app starts—to spot elements quickly and add visual fun.

So what’s the problem?

Authors find navigating and creating labs in AUthor IDE challenging because of its confusing interface, hidden features, and lack of quality oversight, which makes a boring, low quality, and time-consuming experience.

Authors find navigating and creating labs in AUthor IDE challenging because of its confusing interface, hidden features, and lack of quality oversight, which makes a boring, low quality, and time-consuming experience.

Solution

The new Author IDE, innovates lab creation, with intuitive but familiar UI, content quality tools, and the new Ida chatbot, which makes creating labs faster, higher quality and simple.

The new Author IDE, innovates lab creation, with intuitive but familiar UI, content quality tools, and the new Ida chatbot, which makes creating labs faster, higher quality and simple.

Empathize

Empathize

The primary users, authors and the sales team, face significant challenges:

Experienced Authors:

Struggle to locate features like previews and tools, disrupting their workflow and forcing them to spend more time learning than creating.

New Authors and the Global Sales Team:

New Authors and the

Global Sales Team:

New Authors and the

Global Sales Team:

Delayed by the clunky design, which hinders rapid course and lab deployment.

Problems and Insights

After more talks and discussions with 8 other Authors, these problems are very familiar to me…

Unclear Interface 

Slow creation of lab projects 

Lack of motivation 

Lack of content quality 

Define

Define

At this stage, I establish the direction of what I need to work on to find a solution. I created a problem statement, set target personas, and created design goals to help me focus on the issues Authors are currently facing.

Personas

Set the user needs and wants and their pain points

There are two authors - those who are experienced and create lab projects every month, and those who are new to the tool or publish labs once or twice per year. I created two personas for the two target audience for a better understanding go the different types of authors that would use Author IDE.

Ideate

Ideate

During ideation, I prioritized features, created high-fidelity designs and started creating flows.

Prioritization

Based on importance, feasibility and users’ needs & wants, I ranked 6 features for prototyping.

As our team practices agile, we believe it is best to put out features first, then start iterating even when designs are not fully realized.


When asking data scientists about their desired features for their go-to editor tool, I asked them to rank their most wanted feature.


Based on their rankings, I created a chart to identify the features that are important to them and I set the predicted time developers need to implement them.

Inspirations/Competitor Analysis

Based on commonly used tools and environments, I created a high-fidelity design of the basic interface of Author IDE for other feature prototyping.

The premise of this redesign is to make it tailored to the old editor.md, while making new changes to be done as quickly as possible. As a redesign and proposal of new features, it is needed to invest time in prototyping each feature clearly to developers and data scientists in our team. 

So, based on priority, I designed a new ribbons tool bar with proposed features with reference to ribbons from tools such as Microsoft Word and Google Docs to begin my high-fidelity prototyping of new advanced features.

Prototype & Test

Prototype & Test

With the flows and design of the Author IDE finished, I worked on new features and interaction design after further interviews about the new interface.

Visual Design

Crafting a modern, vibrant, and intuitive design for Authors.

The Author IDE overhaul began with a focus on a fresh look, moving from its dated interface to a lively UI. 

Initially, I considered keeping the muted tones for the editor, but inspired by Prettier’s colour coding, I used bold hues, blue for text styles, orange for apps, green for lists. Overall, it makes the interface more clear and fun, which is efficient with better navigation, and enhances quality by clarifying code structure.

I built a much improved interface including ribbons and settings panels, plus typography and color assets to enhance usability.

Interaction Design for Ida & User Testing

Refining chatbot prompts interaction with thoughtful decision-making. 

I tested different AI chatbots (ChatGPT, Gemini, Claude, Grok) with feature triggering features to examine what works and what doesn’t.

Decision like Ida’s Command phrasing and content generation (Eg. “...help me create a introduction…” or “Open Quality Check”) seemed simple, but it requires a lot of thought to create an author’s workflow. By analyzing those tools, it really gave me insight to create those conversations and potential flows (Eg. ignoring recommendations, delete and replace, further modifying) It overall shapes Ida and make it more human and conversational.

During further interviews and simple usability test with 4 authors, a lot appreciated the tool, and loved Ida’s generate from scratch feature prototype. I prototyped Ida’s messaging screens, testing the community tab with question and answer upvoting.

Early versions consisted of dispersed commands, but the final version focused on help responses and content substitution, which reduces clicks and keep authors focusing on creating labs efficiently and simple.

Key Iterations

Weaving a simpler and polished experience through feedback and encouragement

Throughout the project, I consulted experienced developers like Bradley, Michael, and other data scientists (main users) for feedback and recommendations.  I iterated on the toolbar and Quality Check Modal multiple times, experimenting with layouts and adding shortcuts to ensure intuitive access and clear feedback, ultimately enhancing author efficiency.

What I Learned

What I Learned

The Author IDE redesign 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 Author IDE redesign 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 Author IDE redesign 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. 

Next Steps

What's next for Author IDE? With the demos complete, we're transitioning from Editor.md to Tiptap—a flexible, headless editor framework that supports Markdown customization, extensions, and modern features like collaboration—for a tailored upgrade. Ongoing iterations include: Refining the content quality check with enhanced metrics and AI accuracy. 

Implementing the established timeline: Finalize designs in 1-2 weeks, develop core features (chatbot priority) in 4-6 weeks, test, and beta rollout. 

Lessons Learned

Balancing innovation with usability required thoughtful iteration.

Throughout prototyping, I gained deep insights into user-centered design and decision-making, successfully addressing challenges like hidden features to create an efficient, quality-driven tool. 

I deepened my passion for intuitive interfaces.In visual and interaction design.

I built expertise in modernizing tools with colors and ribbons, discovering a love for crafting systems that make complex tasks feel simple and fun.

© 2025 Brian Ho Yiu Chun

© 2025 Brian Ho Yiu Chun

© 2025 Brian Ho Yiu Chun