Control Client redesign
ConnectWise Control is a self-hosted remote desktop software application. Its Windows Client provides features to help technician (Host) remote to the user's (Guest's) Windows machine and fix issues remotely.
Overview
My title was software engineer when ConnectWise hired me, but my boss Jake Morgan (CTO of Control), allowed me to explore what I wanted to work on to make myself productive for the team. Since I am pretty new to the dev environment, Jake encouraged me to write down what I feel about Control as a product with my fresh mind. So I wrote a UIUX heuristic evaluation for the Control web UI, Control Windows client, and the official website. Windows Client is one of the items on the top of my to-fix list. So I started my UIUX journey from here, trying to redesign the Control Windows client.
Our Windows Client was built many years ago before I joined ConnectWise in 2015. It uses WinForms to create its UI. In contrast, most of our competitors used WPF to create a modern-looking UI. Compared to WinForms, WPF provides more flexibility on customized UI components.
The challenge for me is: our Dev team don't have enough resources to rewrite the whole Windows Client into WPF; So we have to keep using WinForms, which brings a lot of limitation to the design. For example, WinForms does not support font change, rounded corn panel, or transparent background button.
With those technical barriers in mind, I start to research how to make a modern-looking UI that is simple to build.
Discover
Above are two screenshots of the old design: annotation tab and Miscellaneous tab.
During the discovery phase, I found more UX issues with the current design, which caused more problems than just outdated UI.
1. Information overload.
My first time using the host client, I got overwhelmed by its Miscellaneous Panel. There is a wall of text mixed with a lot of wide buttons without enough padding and margin.
2. Lack of visual hierarchy.
Each section includes a title, a short description, and buttons. However, since the margin between sections and margin within each section are very similar, the user could not understand the grouping without reading through the details.
3. Small clickable area.
Buttons take 100% width, but their height is minimal. Users may find it hard to click on them accurately.
IDEATION
1. To reduce the information overload, I moved the description text under the hover over of the "i" icon. Besides that, I also worked with PM to rethink the grouping of functions and move some functions out from the Miscellaneous Panel to make each tab more balanced in size.
2. For visual hierarchy, I increased padding in most places and ensured the tab panel padding > function group padding > button padding in the function group. Besides that, I also tried many different layouts and color palettes to enhance the visual hierarchy.
3. To make the clickable area larger, I moved the function title into the button. Increase the height of each button.
4. To solve the issue with outdated style, I gathered images of modern UIs on Pinterest and modified them to improve our new UI. In the end, I decide to use the Win10 tiles style.
Design
I started with the smallest elements(Atoms level). I redrew all the icons to make them look consistent and pixel perfect, enlarged the font size to make them easier to read. Then I redefined the grouping of buttons, alignment of elements in each block. Besides that, I found six patterns in our current design:
-
Single Button
-
Button Group
-
Toggle Buttons
-
Multi-select Buttons
-
Dropdown
-
Slider
Before going with the Win10 style, I also tried many different layouts and color palettes. Here are some thoughts behind those design decisions:
For the layout, I tried to group buttons by type. Like put all the toggles on one side and the rest on the other side. However, this pattern's problem is that when we have more and more toggles, the whole panel will look unbalanced. Plus, some of the pages do not even have any toggles at all.
For the color usage, I thought about using colors to help people remember and differentiate buttons. However, there are a couple of issues:
-
we will run out of distinct colors if more than ten buttons are in one panel.
-
Colors have their meanings. During the user test, many users constantly ask why one feature has a red background and the other one's background color is green, does the green one safer to run than the red one.
-
Besides that, around 5% of our patterners are color blind, and I should not rely too much on colors to differentiate buttons.
When I am running out of ideas and still don't have a satisfying design, I start to think about where the user will use this client. It is our Windows client. So what about using the Win10 style.
Win10 style inspired me about the layout and color. I need to redesign six patterns from the current design into tiles. So here is what I did:
Test
For testing in the early phase, I designed the UI in Illustrator and built an interactive Flash prototype. I tested the design with my colleagues. (Yes, I used Flash since it supports SVGs. Another reason is: there was no Adobe UX or Figma back in the day)
Once we got to a point most colleagues liked, we picked random people who worked in the same building to test the design. I did an A/B test by measuring the time for them to find specific functions in two designs. The result turned out to be very good. New users liked the new design a lot.
Next phase, I posted the Flash prototype to ConnectWise Control Forum and let our experienced users play around with it. In this phase, I learned that: experienced users don't like changes since they are getting used to the UI of the current design, and the new design will mess up their muscle memories and slow them down. So I have to prove to our users, PM, and the whole team why the new design is better (it looks better and can improve efficiency).
My title was a software engineer at that time, but I started to learn more about UIUX. One day I found this UX law that can help me prove my design: Fitts Law.
"Fitts' law states that the amount of time required for a person to move a pointer (e.g., mouse cursor) to a target area is a function of the distance to the target divided by the size of the target. Thus, the longer the distance and the smaller the target's size, the longer it takes."
I love math, and I am super excited to see a UX issue solved by math. So I measured the height of each button and the distance for the cursor to move. The whole team was surprised once I got the result. The result shows that the new design's index of difficulty(ID) is reduced by half compared to the current design.
Finally, after many iterations, the new tiles design got approved. To speed up the development process, I created an interactive HTML prototype this time. So the developer can inspect CSS for padding and colors and interact with toggles, slider, hover over state, tooltips, etc.
The new design turns out to be very impressive. I was invited to a tech talk for our CW Control YouTube channel. Since I am a visual person, I made the story a motion graphic video using After Effect. Below is the video and how the final Windows client looks. I hope you like it.
