Automating Hyundai's issue reporting with a mobile app

During my 6-month internship, I worked on a mobile app as part of a centralized platform for automating issue reporting.

Hassle-free, efficient issue reporting during production

Hyundai Motor Group Innovation Center Singapore is a subsidiary of Hyundai Motor Group and Singapore's first smart factory for the production of electric vehicles.

Our project aimed to provide an automated platform for technicians to report issues to Persons-In-Charge (PICs). This helps to digitalize the inefficient manual reporting system.

Duration

Aug - Oct 2024

Skills

Design Thinking, Wireframing, App Design, User Research and Testing

Team

1 UI/UX Design Intern, 1 Senior UX Designer, 1 Project Manager, 1 Process Consultant, 2 Data Scientists, 2 Front-End Engineers

Our solution: An all-in-one mobile app!

I worked on the mobile app to allow users to report, track and resolve issues from their phones, reducing unnecessary downtime. My designs were implemented on OutSystems, a low-code app development platform.

View Assigned Issues

PICs can view all issues assigned to them at one glance and swipe to quickly acknowledge and resolve issues.

Read Issue Details

Both technicians and PICs can tap into any issue to view its type, location, body number, comments and more.

Create a New Issue

Both technicians and PICs can create a new issue to be reported to a PIC.

#1: Define the problem

What's the problem?

😡 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?

The Production Issue Tracking project team defined two key groups of target users:

Production Technicians who are working on the production floor, either assembling the EVs or controlling production cells, who have to report issues from the production line.

Production Technicians who are working on the production floor, either assembling the EVs or controlling production cells, who have to report issues from the production line.

PICs (Engineers and Managers) who do not work directly on the production floor but are able to oversee, troubleshoot and resolve issues, such as by ordering required parts to technicians.

PICs (Engineers and Managers) who do not work directly on the production floor but are able to oversee, troubleshoot and resolve issues, such as by ordering required parts to technicians.

#2: Conduct some research

Let's interview users…

From interviewing both Production Technicians and PICs, we got to understand their key motivations and pain points. [Click tabs to toggle! ✧]

Technicians

PICs

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.

Technicians

PICs

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.

Technicians

PICs

Motivations

Want to streamline communication to address issues promptly.
Want to track and document recurring issues to implement effective countermeasures.
Want to reduce production delays and maintain productivity.

Pain Points

Reliance on WhatsApp leads to overlooked messages and hinders proper documentation.
Lack of a centralized system prevents analysis of trends and root causes.

…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: Ideate and design

What are the product requirements?

Our project aimed to build a centralized system for issue reporting and resolution using multiple device platforms: mobile app, desktop, work support cart, and in-cell production screens.

I primarily worked on the mobile app and assisted with the work support cart and in-cell screens.

📱 Mobile App (This Project)

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.

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

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.

Visualizing user flows

I drew up user flows for the mobile app to visualize the user experience. My design mentor also aided me in drawing a sitemap to map out each page, which I found useful when designing to ensure all features were accounted for.

View Figma file: User Flows

Sketching wireframes!

I sketched out low-fidelity wireframes of the mobile app. Then, I refined them on Figma to be more mid-fidelity. Since we had adopted a desktop-first approach, I borrowed the card-like interface from the desktop dashboard.

#4: Get feedback and iterate

#5: Arrive at a final design!

#4: Get feedback and iterate

Feedback I

After reviewing the wireframes with the project managers and engineers, I got some feedback. I realized that my initial designs, which were adapted from desktop, did not best optimize mobile real estate. Thus, I iterated to act on the feedback.

Swipe Shortcut

Issue List Interface

Design Decision 1: Added Swipe Shortcut

PIC swipes to acknowledge issue.

PIC swipes to resolve issue.

Technician swipes to confirm issue is resolved.

✅ Simple, intuitive thumb gesture for users to interact with issues and perform quick actions, providing a shortcut similar to existing mobile apps.

Swipe Shortcut

Issue List Interface

Design Decision 1: Added Swipe Shortcut

PIC swipes to acknowledge issue.

PIC swipes to resolve issue.

Technician swipes to confirm issue is resolved.

✅ Simple, intuitive thumb gesture for users to interact with issues and perform quick actions, providing a shortcut similar to existing mobile apps.

Swipe Shortcut

Issue List Interface

Design Decision 1: Added Swipe Shortcut

PIC swipes to acknowledge issue.

PIC swipes to resolve issue.

Technician swipes to confirm issue is resolved.

✅ Simple, intuitive thumb gesture for users to interact with issues and perform quick actions, providing a shortcut similar to existing mobile apps.

Refining to a mid-fi proof of concept

After making the first round of key iterations above, I refined the designs to a mid-fidelity proof-of-concept and basic prototype which I showed again to the project team and senior manager for further review. Then, a new round of iterations began!

View Figma file: Mid-Fi Designs

Feedback II (The Sequel)

As I iterated the designs to a hi-fidelity state, I continued to receive design feedback from the project team, leading to additional iterations.

We continued to trim down the app to its most necessary functions: assigned issues, reported issues and create issue. Also, from analyzing existing user behavior of using WhatsApp to communicate with other users and send photos/videos, we also prioritized and developed upon the ‘Comments’ and ‘Photos’ features.

Bottom Navbar

Comments Feature

Photos Feature

Design Decision 3: Trimmed Bottom Navbar

❌ ‘Browse’ and ‘Settings’ tabs were deemed unnecessary, as users only would check relevant issues on the go.

✅ ‘Browse’ and ‘Settings’ now removed from navbar, so it now has 3 key items.

✅ Settings Function: Easily log in and out by tapping the profile icon.

Bottom Navbar

Comments Feature

Photos Feature

Design Decision 3: Trimmed Bottom Navbar

❌ ‘Browse’ and ‘Settings’ tabs were deemed unnecessary, as users only would check relevant issues on the go.

✅ ‘Browse’ and ‘Settings’ now removed from navbar, so it now has 3 key items.

✅ Settings Function: Easily log in and out by tapping the profile icon.

Bottom Navbar

Comments Feature

Photos Feature

Design Decision 3: Trimmed Bottom Navbar

❌ ‘Browse’ and ‘Settings’ tabs were deemed unnecessary, as users only would check relevant issues on the go.

✅ ‘Browse’ and ‘Settings’ now removed from navbar, so it now has 3 key items.

✅ Settings Function: Easily log in and out by tapping the profile icon.

#5: Arrive at a final design!

#6: Let's reflect…

Finally, some hi-fi designs…

After rounds of iterations and changes in the product scope, I finally reached a high-fidelity design and prototype that was ready for dev hand-off to the front-end engineers within our project team!

View Figma file: Hi-Fi Designs

…and a final prototype!

What did our users think?

We conducted trainings with the users to install and use the mobile app on their personal phones, where we received user feedback. Our team also monitored app usage using OutSystems during the subsequent production cycle, obtaining user data on the MVP.

🗣️ User Feedback

Surprisingly, the mobile app take-up rate was lower than the desktop and work support cart, in contrast to our user research.

Surprisingly, the mobile app take-up rate was lower than the desktop and work support cart, in contrast to our user research.

App users were satisfied but also requested to browse all issues.

App users were satisfied but also requested to browse all issues.

Users were concerned about the privacy of the workplace app.

Users were concerned about the privacy of the workplace app.

Despite users preferring to use desktop over the mobile app, these findings were still positive as our team was able to better understand their preferences and privacy concerns. The app also is still beneficial for PICs who use it on-the-go.

Combined with the other devices, the app helps us achieve a centralized, data-driven platform for issue reporting.

#6: Let's reflect…

Parting takeaways

As this internship project was mostly handled by myself with some guidance from my design mentor, I learned a lot about UX Design within a corporate setting: the designer’s role among project managers and developers, managing stakeholders, and acting on feedback.

🔀 Your designs will always change

Designing in the real world means accounting for shifting product requirements and balancing stakeholder expectations with user feedback. Be adaptable and not invest too much into a particular design!

🗝️ Prioritize key features first

Instead of trying to cram all the features at once, consider user needs and prioritize key features for the MVP in the first sprints. Take note of supporting features as they can be added in later sprints.

🗣️ All feedback is important

Although the low user adoption of the mobile app could be rather discouraging, it's an important insight for the team going forward on which devices to prioritize.

💼 Review, review, review

I tend to want to jump straight into Figma and design hi-fi right away, but it is important to start with user flows and lo-fi wireframes to review first, which can save time later on.