Client
America's Best Contacts & Eyeglasses
Mower
Deliverables
Touch Screen
UI/UX
Overview
America's Best Eye Contacts & Eyeglasses wanted to develop a touchscreen display featuring their range of lenses in a user-friendly and interactive manner. As a digital designer, I assisted in enhancing the UI/UX of the touchscreen by devising solutions to simplify the user experience. I then brought these solutions to life by designing the entire touchscreen experience.
Problem
They faced the challenge of effectively showcasing their extensive range of lens options to customers. To streamline the process and facilitate customer comprehension, they needed a solution that would visually present all lens types, enabling easy comparison and understanding.
Goals
As a designer, my aim was to collaborate with the team to ensure the user experience catered to customers of all ages. I wanted to create a touch screen interface that was intuitive and accessible. This involved designing clear navigation, easy-to-use buttons, and simplifying the overall process so that anyone could interact with the touch screen effortlessly and find the options they needed.
UI Wireframe
Throughout the initial design phase, I held several meetings with the team to refine the wireframe for optimal user experience. My primary focus was on strategically placing navigation and buttons to ensure they didn't obstruct the background visuals. Additionally, I positioned interactive buttons at eye level to ensure anyone with different heights could easily click and interact with them.
Design Considerations
One factor I had to consider during the design process was ensuring that the touchscreen display's height was appropriate for individuals of varying heights, allowing for easy button access. In the initial round of UI wireframes, all navigation and buttons were placed at the bottom of the screen, making it challenging for taller individuals to reach. To address this issue, I increased the vertical height of the main navigation and relocated it to the middle-right of the screen for easy access without obstructing background visuals. Other UI elements were dispersed across the top and bottom of the screen to clearly differentiate between buttons.
Final Design
After multiple rounds of revisions, I have successfully designed a perfect touch screen suitable for customers of all ages, showcasing various types of lenses. One of the toughest challenges was placing UI elements such as navigation and buttons in positions that wouldn't obscure the background images or videos. To overcome this issue, I made these elements semi-transparent, allowing the background visuals to remain visible while ensuring the text on the UI elements remained legible.
Color Palette
Blue
#0057B8
Dark Blue
#024B86
Light Blue
#DAF1FC
Typography
ADA Compliant
I wanted all buttons to have a semi-transparent appearance because white buttons were obscuring the background visuals, but using semi-transparent buttons posed legibility issues due to the diverse colors of the background visuals. To address this, I created an ADA-compliant chart to determine the ideal opacity for the button backgrounds, ensuring that white text remained legible.
UI Kit
Hi, I'm Kelly, a Digital and Motion Graphics Designer based in Rochester, NY.
© 2024 Kelly Choi. All Rights Reserved.