Hyundai's Smart Factory Microsite
Educate and build trust with customers via an interactive web experience
At-A-Glance
During my internship with Hyundai, I proposed the design of a microsite that would enhance a customer's experience when researching how a smart factory works. The aim of the digital experience was to create an engaging, interactive resource for customers to learn about some of the more ambiguous technologies surrounding the factory, allowing the company to build trust with their consumers.
The Hyundai Motor Group Innovation Center in Singapore (HMGICS) is Hyundai Motor Group's upcoming smart factory and innovation lab, focusing on leveraging up-and-coming technology and promising near-automation and customization of the car manufacturing process.
I worked on the S Innovation Progress team at Hyundai Motors, which is responsible for the strategy and research behind HMGICS. When I was asked to propose my own independent project for the team, I decided to tackle an area the team wasn't focusing on: UI/UX and the customer-facing experience.
In compliance with my NDA, research details and the process deck have been omitted.
The original HMGICS website was informative of the high-level vision Hyundai had for the smart factory: promoting new technology, valuing customers, and collaborating. However, terms quickly become confusing as they detail the use of artificial intelligence and digital twin technology.
To the average customer, how much do those words really mean, and how do you know that these methods are any good?
Excerpt from the HMGICS websiteGoals
- Design a way to inform customers what these technologies are, and what they mean to a smart factory
- Create a fun and engaging experience so doing research on the process does not feel like a chore
Impact
- Customers will trust the company more if they understand how their product was manufactured
- Hyundai continues to promote a "customer-first" attitude while benefiting from more long-term relationships with their customers
Existing Material
Before I tackled anything, I read a lot of material on what Hyundai's vision of a smart factory was, and found that a lot of the technology centered around newer, intangible concepts that were harder to visualize: artificial intelligence, the metaverse, and digital twin technology. Then, I looked for existing content about each topic, and found that the only available information were articles filled with lengthy paragraphs and lots of technical terms.
User Interview Insights
Next, I talked to a few different users, who were either not familiar with what a smart factory was, or agreed that there needed to be more accessible ways of learning about a smart factory.
Interest
Current solutions to defining a smart factory and their technologies come in lengthy articles that can be difficult to parse or simply boring to sift through.
Engagement
The solution should allow the customer to actively learn the material by interacting and visualizing the information, rather than just passively reading.
Although I brainstormed potential AR/XR solutions and mobile applications, I quickly realized I wanted this product to be accessible to as many customers as possible, meaning that it should not be restricted to someone's phone — and therefore meant building a website.
However, the website also wasn't going to be tackling everything that HMGICS had to offer — I still wanted to keep the original site available so people could browse the articles and commerce available there. This meant that I ultimately decided on building a microsite.
The microsite would be interactive with popups, micro-interactions, and unique animations on each page to engage the user to stay on the site and explore.
The site is designed to guide a user through progressively more complex and technical topics, but also provides a navigation for flexibility, especially if they are only looking to learn about a specific topic.
I started with wireframes to plan out content structure and begin to iterate where menus and icons should be.
I started with some early sketches, and landed on the idea of using cubes as the motif for the site: the cubes gave a modern and sleek edge to the designs that complemented the site's mission.
Early animation ideas
mockups
I decided on using mainly flat and lined graphics to keep a minimalist, futuristic style.
As the mockups were finalized, I was able to implement a live microsite prototype to showcase as part of the final presentation!
The prototype was built using Next.js (React) and SASS/SCSS, with some components borrowed from AntDesign and LordIcons, and animations done with Framer Motion.
While the prototype is not officially in production, I would look at how many people would visit the site, and for how long. If a user was able to navigate through the entirety of the site, then it would indicate engagement and interest, which were the ultimate goals of the project.
Another success metric would be if it ended up impacting HMGICS' sales via more informed customers.
At the end of the internship, I presented the final live prototype with the rest of the team at Hyundai, including the vice president of the Innovation Division.
Reflecting on the project, I think that many of the ideas for the project were not fully realized due to the timeline. One of the features was full mobile responsiveness.
If I were to go back, I would not have tried building a front-end prototype, but rather I would have loved to try and do some more UI designs for potential playable sections, for real, interactive learning.
Additionally, due to the timeline, I wasn't able to do more user testing after creating the prototypes. If I were to go back to this project or redo it, I would perform more user tests for feedback, especially outside my team's feedback that I garnered from meetings.
Acknowledgements
I would like to give many thanks to the whole S Innovation Progress team, who not only trusted me with this independent project proposal, but also were very welcoming. Coming into the Korean workplace as a foreigner was initially intimidating, but the team greeted me with nothing but kindness, and made the entire experience rewarding!
