Graybar Interactive Graphic

Graybar – Interactive Graphic

While working as a UI/UX designer at Graybar, I was tasked with improving an interactive graphic by elevating user experiences for both customers and internal teams. Simultaneously, I needed to revise its appearance so the design could seamlessly navigate between a desktop and a tablet. I worked, along team of developers and various stakeholders, to create mid to high-fidelity prototypes to simulate to users how it would feel to interact with the graphic and also plan for an effective responsive resizing across screens. Notably, I delivered three tailored versions of the graphic catering to distinct markets: a general plant floor, an edition for water/wastewater facilities, and one for food/beverage plants.

---

---

---

initial user testing and insights

When I began this project, I started off with a mid-fidelity prototype made by previous interns and employees. There was no optimization for tablets and only consulted users to find out what items would be needed in the general plant. My role was to finalize the prototype, both for desktop and tablet. and test it amongst stakeholders to identify pain points and make improvements.

I began by conducting research and seeing how different websites made modifications to their websites for tablets. I then examined in-depth the current prototype and the brand’s style guides. I then went on to check color contrast and other accessibility features that immediately jumped out to me as in need of attention before any testing could happen.

Once I was able to present the prototype, the main takeaways and feedback were:

1. Users need a way to visualize the items that they are using clearly.
2. Categories are too broad for a user to effectively navigate through the graphic.
3. The original graphic is too dependent on hover states and screen space that is unavailable on a tablet.

---

general plant solutions

To begin, I chose to address the tablet’s capabilities first.

• I created tabs on the side of the screen rather than buttons at the bottom of the screen.
• I removed all the hover states for the tablet iterations of the graphic.
• I compensated for the removed hover states by redesigning the titles to appear below the graphics rather than on tap once hovered over.
• I made sure the numbers on the board stayed lit after being tapped rather than only when hovered over.

Next, I chose to attempt to organize the broad range of information that needed to be represented.

• I added subsections to large categories that a user could navigate with a drop-down menu.
• I cropped the screen so that if there were more than 3 graphics in tablet view, the final graphic would be slightly cut off, implicating to the user that they are able to scroll.

Finally, I made some cosmetic changes so the user could better visualize items by increasing the size of the graphic in the background.

---

water & wastewater plant

While working as a team to get a fully programmed prototype of the general plant floor, I was tasked to create a second plant that this time focused on a water/wastewater treatment plant. This plant was more challenging as the information was structured quite differently.

My first step was to better understand the information. I met with stakeholders and experts at the company multiple times and took notes on how the items presented in the graphic related to one another. My goal was to deepen my understanding as best I could before ideating ways to separate my information into digestible categories.

After doing this and talking with the creative director at the company, I was sent over the graphics that I was going to use for the second project.

I decided to do two levels of categories. The top level was broader and sectioned off by area of the plant. They were represented all by the same control panel graphics, which I think could have been handled better. By making each visually different, users could recognize their needs quickly. However, stakeholders would not compromise on this. Therefore, I needed to make sure the areas on the plant map were readily visible and not too hidden behind text and numbers.

I then proceeded to create subcategories and organize all items in each top-level category into their own subcategory. I got a lot of feedback on this and learned that users, especially with touch screens, wanted to click on the items in the control panel as well as navigate through the tab at the top. I made this a reality by making items clickable and adding a glow effect to better indicate which item is selected.

The creation of this plant in Figma took some inventiveness as I wanted to add animations to the control panels as well. I edited their appearance in Adobe Illustrator and then created multiple screens that cycle through their states after a click. This would now be much easier to do with the latest update of Figma that enables variables, but for the version available at the time this was created, this was as close to a solution as I could get without introducing code.

---

food & beverage plant

The final design I worked on for this project was a food and beverage plant. I never got to see the final programmed version of this come to life as I had graduated and accepted another job before its completion.

For this plant, I employed many of the same techniques that I did for the general plant floor. I was unable to test it with users before I left but gave the next UI/UX designer to take my place a strong foundation to experiment with the prototype and find out what works best for users.