Touchable Code Editor for Industrial Robots

Touchable Code Editor for Industrial Robots

Touchable Code Editor for Industrial Robots

Improve user experience and efficiency of code editor in ABB robot controller for robot programmers

Improve user experience and efficiency of code editor in ABB robot controller for robot programmers

Improve user experience and efficiency of code editor in ABB robot controller for robot programmers

Project Type

Project Type

Project Type

Collaboration

Collaboration

Collaboration

Strategies

Strategies

Strategies

User Research

UX Design

User Research

UX Design

Tool

Tool

Tool

Figma


Figma


Figma


Date

Date

Date

2023-Present

2023-Present

Project Overview

This project is to improve the user experience of robot programmers using ABB OmniCore FlexPendant for programming robot tasks. This code editor is designed for touch screens and is used to generate text-based code lines. 

Challenges

Baby Duck Syndrome: User resistance to transitioning to the latest version

Old Version

The older version robot controller IRC5 has been in the market for 20 years.

The older version robot controller IRC5 has been in the market for 20 years.

UX Design

UX was not a focal point in the early stage of development.

UX was not a focal point in the early stage of development.

User Habits

Compared to IRC5, the interface and interaction have a huge difference.

Compared to IRC5, the interface and interaction have a huge difference.

Limitation

What kinds of restrictions need to be considered?

What kinds of restrictions need to be considered?

Objectives

Objectives

Objectives

Objectives

Objectives

  • Reduce the time spent on task completion

  • Make the interaction and interface more touch-friendly

  • Streamline user interactions for better experience

Collaboration

What is my problem solving process?

What is my problem solving process?

Design Process

1

1

Pre-study

Pre-study

2

2

Empathize

Empathize

3

3

Define

Define

4

4

Prototype

Prototype

5

5

Test

Test

6

6

Deliver

Deliver

1

Pre-study

2

Empathize

3

Define

4

Prototype

5

Test

6

Deliver

Prestudy: What is out there

7 Companies

3 types of interface

9 touchable code editors

Market Status

The market lacks an exemplary text-based programming interface

The market lacks an exemplary text-based programming interface

Challenges

Our competitors also grapple with the issue of redundant steps and cumbersome interaction

Our competitors also grapple with the issue of redundant steps and cumbersome interaction

Empathize: User Experience

Online & Onsite Research

7+ countries

Internal & External users

Online Interview

Online Interview

Talk to as many users as possible who use the product in niche markets around the world to gather user feedback.

Talk to as many users as possible who use the product in niche markets around the world to gather user feedback.

Onsite Observation

Onsite Observation

Observe user scenario in real work environment to better understand workflow

Observe user scenario in real work environment to better understand workflow

Target Audience

Target Audience

Participants cover four types of audiences, which are the audiences for this product.

Participants cover four types of audiences, which are the audiences for this product.

Define: Problems

30+ UX issues

Problem prioritizations

Affinity map

Through thematic analysis, the affinity map was created. there are four main themes: User Experience Overview, User Experience Problem - productivity, Expectation - more efficiently, Role

Fancy UI is not needed, high productivity is important

To better understand the UX issues, I created UX issue cards. After listing all the problems, I employed the MoSCoW Metric method to categorize them into: 'Must Improve', 'Should Improve', 'Could Improve' and 'won't Improve' category.

Drawing on the results of the user study, I established a set of design principles and objectives to guide my work.

'big and bigger' buttons for big fingers

Less tap and cumbersome interaction

Replace drop down menu

Shortcuts & Customization

Design for touchscreen with limited size and sensitivity

Prototype: From issues to solutions

Interaction

Interface & Layout

Information Display

01/

01/

Coloring important information & Pop up information with shortcuts

Coloring important information & Pop up information with shortcuts

Issue: It takes time for user to find the location of error. 

Issue: It takes time for user to find the location of error. 

Solution: Syntax errors are now highlighted in orange for quick and easy identification.​​​​​​​

Solution: Syntax errors are now highlighted in orange for quick and easy identification.​​​​​​​

02/

02/

Avoid using dropdown menu & Utilize 'pin' for quick access

Avoid using dropdown menu & Utilize 'pin' for quick access

Issue: The dropdown menu is inconvenient and easily trigger accidental selection.

Issue: The dropdown menu is inconvenient and easily trigger accidental selection.

Solution: Users can quickly switch using sidebar menu and pin favorite data on the top.

Solution: Users can quickly switch using sidebar menu and pin favorite data on the top.

03/

03/

Balancing sacrificing space and reducing redundant interactions

Balancing sacrificing space and reducing redundant interactions

Issue: Vertical menu requires users to switch back and forth to view submenu

Issue: Vertical menu requires users to switch back and forth to view submenu

Solution: Horizontal menu allows users to quickly switch between panels

Solution: Horizontal menu allows users to quickly switch between panels

Prototype: Design Overview

Program Structure

Users now can swiftly navigate through files under various tasks and modules and track recent modification.

Program Editor

Users now can swiftly toggle between operation panels, customize their interface, and define their own shortcuts for enhanced usability.

Property Panels

The data and instruction editing panels are designed to present information more clearly and in an organized manner.

User Testing: How to evaluate design

A/B Testing

Questionnaire

Online Interview

User Forum

…

Evaluation Example

  • The new solution decreased the average task's time consumption by 15%

  • UEQ: All metrics showed the new design performing better than the existing one.

  • The solution received a usability score of 72.9, indicating satisfactory usability.

Evaluation Example

  • The new solution decreased the average task's time consumption by 15%

  • UEQ: All metrics showed the new design performing better than the existing one.

  • The solution received a usability score of 72.9, indicating satisfactory usability.

Lesson Learned

The improvement is heading in the right direction

The improvement is heading in the right direction

The improvement is heading in the right direction

You may also be interested in…

You may also be interested in…

You may also be interested in…

Shipping Fee in TMS

Shipping Fee in TMS

Component CMS

Component CMS

Fire Department Go Digital

Fire Department Go Digital

Nice to meet you here!

Let's have a coffee chat about UX, Tech, life, podcasts and cats :)

© 2024 Xuanling Xu

Home

About

Resume

Nice to meet you here!

Let's have a coffee chat about UX, Tech, life, podcasts and cats :)

© 2024 Xuanling Xu

Home

About

Resume