Digital Control Display
A software application display for B2B clients to use as a design display for their own control display.
Client
Enovation Controls
Services
UI Design
Industries
Manufacturing
Date
June 2023-August 2023
PROJECT SCOPE
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.
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.
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.
A behind the scene during the live webinar at Studio Iowa, a video production company
Speaker: Cary Fowler, Former Special Envoy for Global Food Security, U.S. Department of State
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.
PROCESS
I first came 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.
PROCESS
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.
PROCESS
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
The fun yet challenging part: Collaborating with software developers
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.
RESULT: DESIGNS WERE COMPLETED AND HANDED OFF TO THE DEVELOPER TEAM
Due to confidentiality, I'm unable to view the final designs. Please reach out to me if you would like to discuss further.
PRODUCT WAS SUCCESFULLY 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.
REFLECTION
Even though the design of this application tool may not have appeared overly complex. I have learned a lot from working with a team of developers.
Challenges
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.
Highlights
Collaborating with the engineering team! It was fun to hear about the engineering perspectives and discuss the best solution to meet the project goals.
Biggest Learnings
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.
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
HIGHLIGHTS OF MY INTERNSHIP EXPERIENCE
At the end of every week, I do a personal reflection on the things I have learned, skills to be improved, and goals for the next week in my journal. Here are a few shots of my journals.
A group picture with the design team taken at the front entrance of the office
A group picture with the interns working for different departments
Writing ideas on the whiteboard during brainstorming session Visited the local reserve park to see bisons