Background Image
Application UI

Next Arrow

Pretty Buttons

A side joke on the UX / UI team is "all we do is make pretty buttons." This goes back to when my boss' boss who first developed a UX presence in our Bingham Farms office when it was strictly a developers realm, her colleague would refer to her position as, "Oh, she makes pretty buttons." That was the understanding and attitude developers in this office had toward "design." "UX" was hardly a spoken word even when I started. I found a part of my job—to get respect and thus assistance with the developers— was to help educate them as to what UX is, it's purpose and value. This was usually done on a more intimate, one-to-one basis. However, I did create a blog on the company intranet called Design Ain't Pretty to evangelize as to what design and UX is.

When I started at Thomson Reuters most of the screens for Thomson IP Manager (TIPM) were already designed and created, my first task on the UX/UI team was to put some cohesion and unity to all the screens between TIPM and Connected IP Payments (cIPP), to make them look like they were from the same company. For the most part my co-worker had already most things in place. But the standard had been to utilize every available space. Practically no margins, no padding, no air, no breath. I was able to argue for more margins and a little more breathing room. I also swept through both applications with my co-worker setting and enacting common standards for margins, padding, alignments, typography, as well as for the XAML coding. In addition, I created and added icons to all buttons, in addition to their labels.

One of the biggest modifications I made to both TIPM and cIPP was to make the fields fluid. Previously they had been fixed widths. This entailed a lot of grid restructuring to layout an "auto/10px spacing/*" structure. That is the widest label would automatically set the label width with a 10px margin and the control field filling in the rest of the width. As displayed below, some grids were "auto/10/*/30/auto/10/*" and so forth.

Thomson IP Manager - dark theme

AutoKey >Data Dictionary >Query

Thomson IP Manager - TR theme

>Query >Process Designer >Rules Summary