Designing support cart touchscreens and overhead TVs to track issues

I designed work support cart touchscreens and overhead TV screens as part of a centralized issue reporting platform.

Multiple devices connected via a centralized reporting platform

Our project aimed to streamline EV production by providing a centralized platform for factory technicians to report issues to their Person-In-Charge (PIC). The platform would span desktop, mobile app, work support cart and in-cell overhead TVs.

Besides the mobile app, I designed the work support cart touchscreens and in-cell overhead TV screens. Within one Agile sprint, the designs were implemented by the front-end engineer on PTC ThingWorx.

Duration

Jul 2024

Skills

Design Thinking, Product Scoping, Wireframing, User Testing

Team

1 UI/UX Design Intern, 1 Front-End Engineer, 1 Senior UX Designer

⚠️ Note Before Reading

This project was part of the larger app project I worked on at Hyundai, which is explained in more detail in this featured portfolio entry. Take a look!

Interconnected solutions: cart screens and TVs!

I designed the work support cart touchscreens for technicians to report issues within their production cells, as well as in-cell overhead TV screens for technicians to monitor the status of issues reported within the cell.

Product Requirements

Each device we designed for had its own use case.

🛒 Work Support Cart (This Project)

For technicians to conveniently report issues from the in-cell touchscreen cart.

Report issues for the cell.
Provide limited comments of issue details.

For technicians to conveniently report issues from the in-cell touchscreen cart.

Report issues for the cell.
Provide limited comments of issue details.

📺 In-Cell Overhead Screen (This Project)

For technicians to conveniently view the status of issues from the in-cell screen.

View status of in-cell issues.
(From cart) Confirm or reject the resolution status of issues.

For technicians to conveniently view the status of issues from the in-cell screen.

View status of in-cell issues.
(From cart) Confirm or reject the resolution status of issues.

📱 Mobile App

For production floor technicians to conveniently report and view the status of issues.

View the details of issues reported by user and issues assigned to user.
Create, acknowledge, resolve and confirm issues.
Comment on issues.

For production floor technicians to conveniently report and view the status of issues.

View the details of issues reported by user and issues assigned to user.
Create, acknowledge, resolve and confirm issues.
Comment on issues.

💻 Desktop

For all users to view statuses and act on issues, monitor downtime and conduct root cause analysis.

View the details of all issues.
Create, acknowledge, redirect, resolve and confirm issues.
Conduct root cause analysis and implement countermeasures.

For all users to view statuses and act on issues, monitor downtime and conduct root cause analysis.

View the details of all issues.
Create, acknowledge, redirect, resolve and confirm issues.
Conduct root cause analysis and implement countermeasures.

Work Support Cart

For technicians to conveniently report issues from the in-cell touchscreen cart and provide limited comments.

Overhead TVs

For technicians to conveniently view the status of issues from the in-cell screen, confirm or reject issues.

My designs coming to life!

It felt truly satisfying to work with the front-end engineer to deploy my designs on the production floor. Below, you can see my touchscreen and TV designs in use :)

#1: Define the problem

What's the problem?

The problems with the current workflow are as follows:

😡 Manual and Tedious

Issue logging occurs on paper and WhatsApp: it is manual, tedious and not digitalized for data analysis.

😡 Reliance on WhatsApp

WhatsApp chats used to notify issues and ask for help are cluttered and non-secure.

😡 Unclear Communications

Technicians are unclear on their respective PIC and there is a lack of communications between personnel.

😡 Lack of Countermeasures

No formal method to keep track of root cause analysis, countermeasures and their progress status.

Who are our target users?

For the work support cart and overhead TVs, our main target user group was Production Technicians working on the production floor. They either assemble the EVs or controlling production cells, who have to report issues from the production line.

#2: Conduct some research

Let's interview users…

From interviewing the Production Technicians, we got to understand their key motivations and pain points.

Technicians

Motivations

Want to quickly and efficiently report issues to relevant PICs without disrupting the production flow.
Want to view real-time updates on the status of reported issues.
Want to minimize cell downtime caused by delays in assistance.

Pain Points

Manual logging methods interrupt work and waste time; overwhelming and messy WhatsApp chats.
Lack of clarity about PICs leads to delays in resolving issues.

…and gather additional data

Throughout multiple workshops during the first two Agile sprints, our team gathered data of 100+ escalation processes from our users. Each issue was assigned a name, code, category and PIC.

#3: Design process for cart screens

#3: Ideate and design

#4: Get feedback and iterate

Visualizing user flows

I mapped out a simple user flow of a user reporting an issue with the cart.

Sketching wireframes!

Afterwards, I drew up a quick wireframe sketch to show my design mentor.

Mocking up hi-fidelity screens

Using components from the existing design library, I was able to quickly make high-fidelity designs of the different work support cart touchscreens during one Agile sprint. I handed over the designs to the front-end engineer to deploy on ThingWorx.

#5: Arrive at a final design!

#4: Design process for TVs

Scoping the product

From the first user interviews and existing desktop open issue dashboard, I drew up an initial list of information fields that the overhead TV screens should contain. Throughout rounds of consulting with project managers and users, this list got shortened as lower-priority fields were removed.

Initial List

Final List

Issue Status
Issue Type
Body Number
Estimated Resolution Time, Elapsed Time

Final List

Initial List

Issue Status
Issue Type
Issue Priority
Location
Case Number
Body Number
Current In-Cell Time, Elapsed Time, Forecasted Downtime, Estimated Resolution Time, Contributed Downtime

Initial List

Final List

Issue Status
Issue Type
Body Number
Estimated Resolution Time, Elapsed Time

Iterating and getting feedback

Below are the key iterations I made for an open issue card, the basis of the open issue dashboard, before arriving at the final design. After each iteration, I reviewed with the product team and took note of additional changes to be made.

Iteration 1

Iteration 2

Iteration 3 (Final)

Iteration 3 (Final): Trimming Down Content

✅ Issue status is prominent and only the key information is provided.

✅ The card no longer looks cramped and text size has been increased for legibility.

✅ By loading the dashboard on the work support cart, users can perform the ‘Confirm Resolved’ action on resolved issues, as the design allows the buttons to be on the right.

Iteration 1

Iteration 2

Iteration 3 (Final)

Iteration 3 (Final): Trimming Down Content

✅ Issue status is prominent and only the key information is provided.

✅ The card no longer looks cramped and text size has been increased for legibility.

✅ By loading the dashboard on the work support cart, users can perform the ‘Confirm Resolved’ action on resolved issues, as the design allows the buttons to be on the right.

Iteration 1

Iteration 2

Iteration 3 (Final)

Iteration 3 (Final): Trimming Down Content

✅ Issue status is prominent and only the key information is provided.

✅ The card no longer looks cramped and text size has been increased for legibility.

✅ By loading the dashboard on the work support cart, users can perform the ‘Confirm Resolved’ action on resolved issues, as the design allows the buttons to be on the right.

Arriving at a hi-fidelity design

I finally designed the open issues dashboard for the in-screen overhead TV screens which were deployed on PTC ThingWorx.

#5: Test with users

#6: Reflect

What did our users think?

In order to familiarize our users with the new work support cart and overhead TV interfaces, we ran multiple dry runs and workshops where we installed the created PTC ThingWorx sites on the devices. User feedback was largely positive regarding the interface design and user experience.

😊 Positive Feedback

Users felt the cart interface was intuitive and that the buttons were big enough for the touchscreen.

🤖 Technical Issues

Users reported a lag between issue reporting and showing up on the open issues board. (Tech issue)

🗯️ Suggestion

Users suggested that they should be able to leave comments on reported issues from the work support cart.

In response to that last user feedback, I redesigned the confirmation modal of the work support cart to allow users to add optional comments before double-confirming the report.

After this improvement, users reported that they were more satisfied with the user experience for the work support cart touchscreens.

#6: Let's reflect…

Parting takeaways

This project was an exciting venture into designing for alternative device types: work support cart touchscreens and overhead TVs. I found it interesting to consider the affordances and use cases of different device types. Of course, it was super satisfying to watch my designs be deployed!

🫵🏻 Designing touchscreen monitors

I learned that touchscreen systems may require larger fonts and buttons to accommodate specific use cases, such as technicians wearing their work gloves while reporting issues

👯‍♀️ Working cross-functionally

Since the engineer deploying my designs was in our team, I did not prepare formal hand-offs as I would to an external dev team. We could collaborate in a more relaxed way!

Like what you see?

Check out more projects by me ☆

Improving CNA's page discovery with a navigation menu revamp

Mediacorp | Oct - Dec 2024

UX Research

User Testing

Interface Design

Streamlining volunteer management for Ground-Up Initiative

Ground-Up Initiative | Sep 2023 - Apr 2024

UX Research

Interface Design

Like what you see?

Check out more projects by me :)

Improving CNA's page discovery with a navigation menu revamp

Mediacorp | Oct - Dec 2024

UX Research

User Testing

Interface Design