top of page
Production Floor Views Applications Reports Settings Quick Links Help
.png)
In the heart of modern manufacturing, data is the new currency.
Every machine, every process, every decision generations
valuable information waiting to be unlocked.
Cortex transforms this data into purposeful action.
Manufacturing Data Intelligence
Old Cortex landing page.
I have worked on Cortex since 2020, designing the brand identity and various interface components. Below are some of my previous deliverables:
For this landing page project, I was the sole designer. I did user research and interviews at the manufacturing plant, scaled the brand identity, and built and animated a 3D model of a credit card representing the layers of the manufacturing process.
Logo design
.png)
ID Badge
UI Components
.png)
This is Cortex, an innovative manufacturing execution system.
Cortex consolidates all production floor data of the Thales DIS credit card manufacturing plant, providing seamless workflow, easy communication, and paperless processes for production floor workers. The software's functionality and efficiency is groundbreaking, attracting the attention of Thales' corporate and international branches.
However, the UI design of the landing page was clunky and outdated, and didn't reflect the software's speed and capabilities:
Role: Motion Graphics Specialist/UI Designer
Team: Project Manager, Full-Stack Engineers, Development, Production Floor Workers
Tools: Blender, Adobe Illustrator, Procreate
The assigned task: redesign Cortex's landing page to visually showcase its innovative integration of data and machine learning, and attract new users.
I started with research, and a production floor tour.
During my tour, I took detailed notes and photos of all of the machines and the production process.
I asked myself the following questions:
-
What are the steps of the production process?
-
What are the various layers in each credit card?
-
What does Cortex do? Who uses it?
-
How does Cortex make production easier for workers?
-
How do workers feel about using Cortex?
Findings:
Cortex consolidates an enormous amount of data and information from across dozens of machines, workers, and production steps. Daily production generates 3 thousand cards on average.
Our Project Manager originally requested that I create an illustration to be placed on the landing page, but after seeing the scale of Cortex's capabilities I felt that an illustration wouldn't do the job. The story of Cortex could be told better with the use of motion graphics.
The Design:
I recommended creating a 3D model and animation that visually displayed the layers of a credit card, with each layer representing a step in the production process.
Thumbnail sketch of animation idea.
Once our PM gave the go-ahead, I began building a low-fidelity 3D model of the credit card in Blender, with lighting and animation.
The goal for this first iteration was to ensure all card components and layers were in the correct order, and to test a movement pattern.
The special thing about Thales DIS cards is that they embed contactless chips. For the movement pattern of this first draft, I decided to place emphasis on the copper wire that gives the chip its power.
After feedback from our PM, engineers, production floor workers and several more iterations of the low-fidelity prototype, we arrived at the final high-fidelity animation below:
The final step was to design a background which tied the animation and the rest of the software's UI together.
The Thales brand colors are a deep blue and turquoise, so I stayed within that color family.
Our PM wanted Cortex to have a futuristic, high-tech feel. As a reference point, he showed the team the League of Legends website.
After looking through the LoL website more closely, I felt I understood our PM's inspiration. The League of Legends UI incorporates elements of playful mysticism and magic into machinery, simultaneously giving it a high-tech, edgy look while maintaining a warm, personable and welcoming aesthetic.
Having that vision in mind, I used Adobe Illustrator to create a 2D illustration.
My final design shows a starry night sky, with a web of fibers that represents Cortex's machine learning neural network. I kept it simple, so as not to distract from the main animation.
After feedback and slight adjustments, we settled on this final iteration:
Final background illustration for landing page.
Final touches included adding language, working with the engineers to make sure the animation was exported as a WEBM file with a transparent background, and adjusting spacing.
The final landing page can be viewed at the top of this case study.
Thanks for reading through!
bottom of page