Bluebeam Revu is a PDF markup, editing, and viewing solution for the AEC (Architecture, Engineering and Construction) industry. For the 2018 release, the UI was updated, which included theme color and control library changes. I was responsible for creating a comprehensive style guide, and maintaining design integrity throughout implementation and delivery.
Bluebeam had done UI theming in previous versions of Revu, for which I had also been involved with, but it never extended beyond the main UI shell. There was a mix of custom and out-of-the-box Windows components and controls. This resulted in an inconsistent visual experience across different parts of the application. Much like the Revu 2018 icon work, this attributed to our user’s negative perception of an aging UI.
The theme work for 2018 was to touch every part of Revu’s UI. Each year Bluebeam had operated as a startup increased the complexity of our job. It was not any one individual’s task to document, and all of Engineering and Product contributed during this phase. Due to the large scope, the theme work done for Revu 2018 quickly spun out into multiple initiatives. We divided it in to three basic epics:
First was color and typography. Revu had the choice of a dark and light mode, or a slider to set a custom level of UI brightness. Early on it was decided that the 2018 release would only support the more expected behavior of a dark and light mode, and the custom slider would be deprecated to alleviate engineering. So, we wanted to choose colors that would not deviate too far from what our users were already experiencing. Finally, font choice and sizing would be refined for legibility.
Second was components and controls. Revu used all default Windows styled controls. Similarly, over the years many custom components had been created for Revu. The majority of these were also set with default Windows styling. A complete list of all these items and their multiple states had to be complied and documented.
Third was dialog theming and layout. Never had any of Revu’s dialogs been themed, and many were not templated. This became the greatest engineering hurdle to overcome and another massive task to document and map.
Needless to say, countless pages (Bluebeam used Confluence), of written form documentation, checklists, and spreadsheets were produced to track the output.
Apart from the continual documentation of what existed in Revu, I began conceptual work on design systems and style guides. Again, because of Bluebeam’s many years operating as a startup, this phase depended heavily on internal stakeholder interviews and feedback, and only until we were midway through the work did user testing begin.
Revu utilizes 40+ control types. Some are slight variants, others are completely unique. All of them and their states had to be considered and mocked up for Engineering to code.
The underlying technology driving Revu’s UI was transitioning from WinForms to WPF, which made control creation and iteration easier. Working with lead engineer, I established a workflow that allowed us to accomplish the task smoothly.
Since Revu’s UI was developed using a legacy Windows technology called WinForms, the scope of the dialog theming work was determined by two factors — refactoring all dialogs to WPF, and refactoring key dialogs to WPF and improving UX. The key dialogs were determined by Product Management as higher priority and use dialogs.
I defined a basic themed dialog within the style guide from which the engineers could follow. This covered close to 70% of the dialogs.
With 300+ dialogs, and inevitably some scope creep, the entirety of the dialog work was not completed for the 2018.0 release and had to be scheduled throughout the rest of the calendar year.
The work was arduous, and lasted many sprints longer than it should’ve, but the results of creating a comprehensive style guide for Revu paid off — It allowed the engineers to update everything according to the 2018 guidelines more rapidly. It lived on our internal Confluence site to serve as a guide throughout the release year.
The additional bonus was that any future UI iterations for Revu would be that much easier, not only due to documented styles both in and out of the code, but also because it gave Engineering the much needed opportunity to transition much of Revu off WinForms and on WPF.