top of page

Digital Display Control Design

Role: UI/UX Design intern 
Company: Enovation Controls LC
Department: Digital Product Design
Digital Display Control
Project type: Collaboration with engineers
Result: The product launched
 in July 2023



Discussions with the developers to understand project goals

The business requirement of the design will be displayed on hardware with a size of 800x480 px. After understanding the business goals and objectives, a team of two UI designers (including myself) and three software developers created a few conceptual designs to ensure everybody was on the same page. 

Some of the features of the control display include:

  • System info

  • Version info

  • Brightness


Enovation Controls

is an innovative manufacturer of electronic controls and displays for diverse markets. They are an international leader in fully customized solutions for engines, engine-driven equipment, and specialty vehicles with a broad range of displays.


The aim of this project was to design a software application display for B2B clients to use as a design toolkit for their own control display.  


A quick mid-fidelity mockup was created by a software developer and shown to the designer and engineering teams to envision the end product of this design.


1. Project goals

5. Discuss with the engineering team 

2. Sketches 

3. Mid-fidelity

4. User Testing

6 Feedback + Iterations 

7. Discuss with the engineering team 

8. Hand it off to
the developers 


The design direction of the sketches focused on simplicity and modernism.  

A few different layouts were created with the navigation bar on the left side of the screen for consistency with other company digital display controls. I explored different placement and sizes of the number and buttons. 



The biggest challenge was the size of the hardware device (800x480 px)

Since the size was small, it was hard to predict the touch target size on the buttons and navigations. According to Nielson Norman, interactive elements should be at least 38 x 38 pixels to prevent errors. However, the numbers were catered towards mobile and web screens. The Web Accessibility Initiative (W3) suggested 44 by 44 pixels on the buttons using a pointer, mouse, or fingers. 

Screenshot 2023-10-16 at 11.52.50 AM.png
Screenshot 2023-10-16 at 11.53.47 AM.png

I first come up with the button designs in Figma


The design direction of the sketches focused on simplicity and modernism.  A few different layouts were created prioritizing accessibility and straightforward information.


Then, I did a user testing focusing on the button shapes and sizes on the hardware to validate my design decisions


Since there were no guidelines about buttons on hardware displays, I first created the pixels with 44 pixels, as suggested, and tested it on a Figma prototype view. However, the button sizes were too small for the size of the hardware. After a discussion with the engineer and design and testing on the button size, I created a size of 100x100 px and tested it on the hardware to validate that the target size for touchscreen points is clickable, easily accessible, and easy to point to the target. 



The fun yet challenging part: Collaborating with software developers

After multiple tests on the hardware, we decided to move forward with the rectangle with rounded corners because it has a large touch target size, and the rounded corners create a user-friendly approach. The video below shows one of the user-testing sessions.


After each screen was made, the screens were imported to Zeplin for the developer team to view the design components, properties, typeface, font size, and pixels. The components, font types, and graphics were saved separately in a collaboration file. 

Screen Shot 2023-09-11 at 3.38.49 PM.png

A screenshot of one of the screens uploaded on Zeplin to show the size of the buttons to make sure that it is in an appropriate size. 

Final work on the hardware device


Due to confidentiality, I'm unable to view the final designs. Please reach out to me if you would like to discuss further.


A shot of the design installed on the hardware

Product launched in July 2023 


After two weeks span of time working on designs and collaborating with three software engineers, the product was launched in July '23. After it was launched, it was confirmed that 6 individuals were actively using the tool.

Screen Shot 2023-09-11 at 9.02.55 PM.png
Screen Shot 2023-09-11 at 9.07.39 PM.png


Even though the design of this application tool may not have appeared overly complex. However, there were many back-and-forth discussions among the designers and developers.

What was challenging?

  • Coming from a design background, it was difficult to be able to speak the same language. I asked many questions to the developers' team and learned the technical terms online. 

  • Limitations and opportunities of hardware products (e.g., screen size, hardware size, budget, etc.)

If given additional time 

  • Conduct usability testing with our in-house or external software engineers since they are the primary audience for this tool

  • Explore more font types and weights, colors, and background patterns 

What was the enjoyable part?

  • Collaborating with the engineering team! It was fun to hear about the engineering perspectives and discuss the best solution to meet the project goals.

  • Networking with people outside of my department through lunch sessions, company events, or even across the hallway!

What did I learn?

  • To keep asking myself, "What if?" and "What else am I missing?" during my work process.

  • Many growth opportunities to learn front-end technical skills to work across engineering teams effectively.

Additional: Weekly Reflection on my journal 

At the end of every week, I do a personal reflection on the things I have learned, technical and soft skills to be improved, and goals for the next week in my journal. Here are a few shots of my journals.  

IMG_3883 2.JPG

Highlights from my internship experience

In this 9-weeks internship, I truly enjoyed my experience working for Enovation Controls and exploring the city of Tulsa, Oklahoma. I'm grateful for the opportunity to meet all the amazing and talented people there. Here are some shots of the highlight of my internship.


A picture of the interns from the manufacturing, engineering, and UI/UX department


Entrance to the office


My work space with my office badge


Me standing in front of the Golden Driller statue, known as the former “oil capital of the world.

MicrosoftTeams-image (21).png

The Digital Product Design team

bottom of page