Digital Display Control Design
Role: UI/UX Design intern
Company: Enovation Controls LC
Department: Digital Product Design
Product: Digital Display Control
Project type: Collaboration with engineers
Result: The product launched in July 2023
PROJECT SCOPE
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
OVERVIEW
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.
PROCESS
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
SKETCHES
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.
CHALLENGE
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.
I first come up with the button designs in Figma
PROCESS
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
PROCESS
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.
PROCESS
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.
PROCESS: WORKING WITH CROSS-FUNCTIONAL TEAMS
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.
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
RESULT
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
OUTCOME
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.
PERSONAL REFLECTION
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.
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.
.png)
The Digital Product Design team