top of page
Overview
FREELANCE WORK
Oishi Interactive Screens
Roles
UX/UI, Visual Design, Motion Graphics
Tools
Adobe Illustrator, Adobe Premiere Pro
Timeframe
May - July 2020
OVERVIEW
Oishi Liwayway Co. Ltd. is a snack company based in the Philippines, with branches all across Asia, including Shanghai, China. To assist Oishi with automating their industrial processes, I designed multiple mimic touch screen interfaces to replace their machine control panels, making them more intuitive, accurate, and user friendly. The interface designs are currently in the process of being developed for industry use by the Maintenance Department.
ROLE
I worked as an individual freelance user interface designer to design the two fryer machine control screen interfaces. I primarily communicated with the Management Information Systems Manager and Operations Manager to understand the project goals and get insight on previous work, but worked more closely with the Maintenance department to iterate over the interface designs.
THE PROBLEM
Over the past few years, Oishi has been automating their industrial processes by replacing their machine control panels with mimic touch screens using SCADA and HMI software. However, they wanted to make the interactive graphics and animations for the mimic touch screens more intuitive, aesthetic and easy to use, because they believe that it is essential for the interfaces to have a far-reaching user experience, especially in manufacturing, warehousing and field jobs where tasks are repetitive and communication is essential to real time executions. As more machines were upgraded and redesigned, Oishi also needed to update previous mimic touch screens to match the new machines, so my job was to redesign the screen graphics, auto-switching sequence and monitoring graphics scope for the rotary fryer and Ohyama fryer machines.
Original Designs of Mimic Touch Screens for Fryer Machines:
Original mimic touch screen design for rotary fryer
![[1] Ohyama Fryer screenshot.png](https://static.wixstatic.com/media/ce47d1_92c6e4bc61f54476a47e96d0f38c01e7~mv2.png/v1/fill/w_719,h_538,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/%5B1%5D%20Ohyama%20Fryer%20screenshot.png)
Original mimic touch screen design for Ohyama fryer
Research
RESEARCH
In order to fully understand which aspects of the current design users struggled with, I met with the Management Information Systems Manager and Operations Manager to analyze the original machine interface design. From this meeting, I was able to:
-
Clarify certain aspects of the machine design that was unclear, for example, which motors were associated with which parts of the machine in the diagram
-
Get advice on potential changes that I was looking to implement
-
Develop a sense for the overarching aesthetic that they were looking to achieve
-
Understand which machine parts can be further improved based on additional AutoCAD drawings that were provided
-
Look at the actual machine parts to see how I could potentially translate it into a diagram drawing in the interface design
Sample annotated notes that I took during out meeting for the rotary fryer
Live video demo of the rotary fryer hood being raised as part of the machine tour
![[1] Rotary fryer 36L x 12 pockets.png](https://static.wixstatic.com/media/ce47d1_3e608e52e6f0439ebccf5ba9487e2fae~mv2.png/v1/fill/w_355,h_212,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/%5B1%5D%20Rotary%20fryer%2036L%20x%2012%20pockets.png)
![[1] Batch Fryer to Autopack layout.jpg](https://static.wixstatic.com/media/ce47d1_83672d70ab714625a58910a93b08372e~mv2.jpg/v1/crop/x_0,y_704,w_2399,h_1016/fill/w_719,h_304,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/%5B1%5D%20Batch%20Fryer%20to%20Autopack%20layout.jpg)
AutoCAD drawings of both the rotary and Ohyama fryers for reference
UI Design
UI DESIGN
In order to "modernize" the interface design look, I decided to go with a simple, minimalistic visual style that utilized solid colors instead of gradients, and eliminated all outlines from the original interface design. I added rounded corners to all buttons and edges to soften the look. The labels and number meters were also altered completely by replacing the digital, techno font and LCD display with a simpler sans-serif font, Barlow Medium, and rounded box display.
#F9FCFC
#E1E2E1
#B7B7B7
#8E8E8E
#6B6F73
#4A506E
#272B3B
#FEDF49
#53B848
#EF4558
Primary, secondary & alert color palettes
Iterations
ITERATIONS
Throughout the whole design process, I continuously met with the Maintenance department to get updated versions of both the machine structure design and receive input on my interface screen designs. It was important to iterate through this process, as my work in translating the actual machine into a mimic screen drawing lead them to take a full-scope review at how the machine was being structured, and inspired the restructuring of the piping and filtration systems within the larger machine design. Below are several key iterations for both the rotary fryer and the Ohyama fryer, as well as some annotated notes that I received as input from the Operations Manager.
![[2] Batch Fryer + Valves.jpg](https://static.wixstatic.com/media/ce47d1_7b0fe20877bc463280afa8f4f4eacc54~mv2.jpg/v1/fill/w_719,h_539,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/%5B2%5D%20Batch%20Fryer%20%2B%20Valves.jpg)
Annotated notes on my interface designs to further improve the next design iteration
Rotary Fryer Iterations:
![[Final 1] rotary fryer.png](https://static.wixstatic.com/media/ce47d1_2ed21968d458456da29765f5e87a24a4~mv2.png/v1/fill/w_719,h_539,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/%5BFinal%201%5D%20rotary%20fryer.png)
Final Solution
![[Final 1] ohyama fryer.png](https://static.wixstatic.com/media/ce47d1_eebda926e517476a99013f7c76fa8d9d~mv2.png/v1/fill/w_719,h_539,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/%5BFinal%201%5D%20ohyama%20fryer.png)
Ohyama Fryer Iterations:
FINAL SOLUTION
After iterating over the design numerous times, the final two designs for both fryer machines are shown below. The maintenance department at Oishi checked all diagrams and buttons for operability to ensure that the design was accurate.
Final mimic touch screen for rotary fryer
Final mimic touch screen for Ohyama fryer
Impact & Takeaways
IMPACT
After finalizing the mimic touch screen designs, Oishi is currently in the process of integrating it into the Scada and HMI software to display the graphics on a large screen. The final developed product is expected to be completed by the end of 2020 to be used within both fryer production processes by the Maintenance Department (~45 employees).
​
Additionally, the process of iterating over the design had the ability to influence changes in the actual machine set-up, since the whole machine module is manufactured in-house. According to the Operations Manager, the mimic screen project spurred the following:
-
A re-alignment of beliefs on how to do oil management
-
A re-equipped, future-proof oil tank x 2 on load cells
-
A uniform way of oil process flow
TAKEAWAYS
​Iterate, Review, Repeat
Having gone through at least five different versions for each fryer machine, I learned that iterating through multiple designs was key to producing a high quality product. It was only through iterating that inspired the machine set-up to undergo a structure redesign, which ultimately led to better oil management for the frying process, in addition to an improved interface design overall.
Develop a Jack-of-all-Trades Mentality
Never underestimate where you can take advantage of skills that may seem unrelated to the project. In taking advantage of my multi-faceted background, I was able to utilize my knowledge in engineering to analyze the machine operation processes at a deeper level, while my cross-functional skills in visual design and motion graphics allowed me to explore how animating the screen graphics can further mimic the actual machine set-up more accurately.
Thanks for reading!
bottom of page