Our main software product received no significant layout or interface improvements in over a decade. For my experience working between design, business, and technical teams previously as a product manager, I began to look for opportunities to improve the application during my time as technical writer, which I would later be given responsibility for as design director.
Background
Company culture
Developers dominate while design is dismissed
Years of prioritizing raw functionality over user experience led to an outdated application interface and low UX maturity. This affected how the product is perceived by both existing and potential clients. I suggested that design is more than mere decoration; it contributes to the usability of the product and its perceived quality. Form is function.
"Users often perceive aesthetically pleasing design as design that’s more usable." — The Aesthetic-Usability Effect↗
There were no competitors driving innovation
Management was not oblivious to the need to refresh our look and feel, but the company enjoyed near exclusive market share in this highly-specific niche space. There simply was not enough market pressure, and so less emphasis was given to improving what didn't seem broken—least of all to an engineer.
Some of the old guard resisted change
Small company veterans wear many hats. A subject matter expert might fill the roles of trainer, salesperson, client support, and product owner—all at once! Asking them to share responsibility proved difficult, as they have been used to carte blanche. The worry that we might change too much too fast is a valid user experience concern; it can also be an overreaction.
Evangelism
Our inaction has resulted in the app looking outdated by over a decade. It fell to me to show stakeholders and peers how a fresh system-driven design will help achieve scalability, brand consistency, and improved user satisfaction.
I pitched the need for composable, semantic components
The company had no history incorporating design, but the engineers concur that following a standardized single source of truth would resolve inconsistencies in the interface and allow them to develop features much faster. This was an opportunity to introduce the team to the principles of Brad Frost↗'s Atomic Design.
I proposed a token-based design system to unify the UI
Design tokens for shared constants like color, typography, spacing, and sizing units inhabit the inter-team space between design and development. In Atomic Design, the principles enforced by these guiding values drive the building blocks of the larger design system. By tightening design standards for element hierarchy, color palette, margins, breakpoints, and typography, the entire product feels cleaner without disrupting the user’s understanding of the existing layout.
Discovery
⇪ Back to Top | ⇦ Previous | Next ⇨
Spacing
Margins & padding
Our current design's inconsistent use of margins and padding leads to a poor visual hierarchy, making it challenging for users to discern associated elements. Applying the principle of proximity, we need to strategically adjust these spaces to group related items visually. This will enhance the user's ability to process information logically and intuitively, improving overall readability and user experience.
Alignment & borders
The outdated yet frequent use of the <table> HTML element for layout results in unnecessary visual clutter and physical separations. This not only violates semantic coding principles but also disrupts the ability to smoothly navigate the UI. By refining alignment and minimizing borders, we create a more cohesive layout that adheres to best design practices. This established a clearer visual flow, making the interface user-friendly and visually appealing.
Visual branding
I introduced a perceptually-uniform, accessible palette
Our pale blues and dull grays were drab and clinical, giving the product a corporate 20th-century feel. My first attempt to create a brand-compliant color system was based on a flawed faith in HSL, but over the next two years, my fascination to understand how to control and properly calculate how human eyes see color led me down a proper study of perceptually-uniform colorspaces like okLab, which I use to this day.
I illustrated new custom icons
The existing icons were outsourced, pixelated, and inconsistent, making it difficult to quickly identify their meaning. By creating a set of cohesive icons that adhere to a consistent style, we enhance recognition and reinforce brand identity.
I enhanced clarity by restricting fonts
Using five typefaces and multiple weights across the application, our user experience was arbitrary and disjointed. By limiting our design system to one primary brand typeface (plus one monospaced font), we simplified user decision-making and enhance cognitive processing. This helps with clear visual hierarchy, readability, and the Gestalt principles of perception, as well as reinforces our brand identity.
Voice & tone
I simplified language to be less verbose
The language and copy often complicated rather than simplified the user experience. Questions and instructions were burdened with unnecessary supplementary text consuming valuable interface space. This overwhelms cognitive load and violates Miller's Law, which says users can only hold limited information in their working memory.
Even our marketing copy lacked warmth and engagement. A simple feature list fails to sell or simplify, especially in an industry where official texts are dense and jargon-laden. From my experience as a technical writer, I aimed to revise our language to be concise, clear, and user-centric, counteracting the industry norm of verbose medical writing and aligning our voice closer to human conversation.
I added softer UI text to system pages
To communicate without alarming or blaming the user, even system error pages should be light-natured. Otherwise, the user might think they broke something more serious. Instead of dumping system-generated error messages into the user's lap, this was an opportunity to introduce UX writing and the idea that user-centered voice amplifies, not cheapens, the brand.
Elements & components
Devs reinvented components many times over
Front-end framework developers use imperative abstractions like Tailwind to trivialize the chore of semantic design altogether. This ad hoc flavor-of-the-week approach to UI often yields redundant components meant for the same purpose. I audited these elements in the CSS and proposed ways to unify them into a single specification.
I standardized our interactive design elements
Our application's inconsistency in interactive elements, like buttons and links, creates a disjointed user experience. This inconsistency not only disrupts visual harmony but also confuses users. Varied styles and the lack of standard interactive cues, such as hover effects, violate basic web design conventions and hinder usability. Adhering to Fitts’s Law, interactive elements should be easily recognizable and accessible. Users should not have to relearn interaction patterns on different parts of the same application.
My mission was to implement a standardized design for buttons and interactive elements across the application, with hover states, consistent styling, and clear affordances for all interactions.
Testing
⇪ Back to Top | ⇦ Previous | Next ⇨
Strategy
Implementing an app-wide design system could be best achieved by refactoring the application’s global CSS. This would offer maximum impact with minimal disruption. By separating CSS from the .NET developers’ concerns, I could make progress without the bottleneck of others’ workload.
I tested CSS ideas designing in the browser
I cloned existing HTML pages from production and used browser Dev Tools to test styling and specificity issues in real-time. From this sandboxed CSS, I could reverse-engineer, QA on the spot, and rebuild a cleaner site from scratch.
I designated screen regions on templates
Using grid- and column-based layouts, I established consistent zones for content placement, ensuring uniformity and predictability across similar and related pages. I looked for semantic patterns and tried to define areas of the screen by their purpose, such as the page banner. This would help developers understand the intent of the design and how to apply it to new features.
I started with the Home page to pilot these templates
Being the first screen shown during demos and largely consistent across users, I chose the application’s landing page to pilot new components, styles, and page layouts. This allowed me to assemble several concepts in one place for peers and stakeholders to review.
Prototyping
By presenting a prototype, concepts and hypotheses become real. Interface designers often show fixed mockups and screenshots of their proposals, but its complexity and technical feasibility are left to the imaginations of non-technical product owners and non-designer devs. A tangible prototype instead addresses critical questions before they arise.
I prototyped design samples in Webflow
My initial design draft served as a mood board to visualize potential improvements, fostering feedback and setting the stage for phased implementation aligned with development sprints. In 2020, I harnessed Webflow’s capabilities to build interactive prototypes, providing stakeholders with tangible examples to explore and assess proposed changes.
The need for higher fidelity pushed me to HTML
So stakeholders could see interactions on their own screen rather than a curated screenshot, I built sandbox prototypes in HTML. This allowed them to interact with the design and understand the proposed changes in a more tangible way.
Delivery
Code
The aging source code was tangled and brittle
The logic in our .NET Web Forms tech stack was tightly coupled to content, HTML markup, and styling. Front-end decisions were made on the spot by programmers who operate primarily at the server. Client-side artifacts in the markup often went unnoticed.
Imperative server code was overriding the browser
A design system would not only resolve technical debt but also lay the foundation for a more agile, responsive, and user-focused process. Programmers often used inline styles and server-side logic to control the UI, which made it difficult to maintain and update the application’s appearance.
By separating concerns and moving to a more declarative, component-based approach, we could improve the application’s scalability and maintainability. I would need to upgrade the legacy HTML to modern, semantic tags to make the best use of CSS styling.
I mocked up a page to illustrate box model architecture
Some outdated practices in the HTML include <table> layout, fixed column widths, non-semantic tags, and floats/clears. To overcome technical and timeline objections, I created a developer-centric wireframe to illustrate the proposed HTML block elements, class naming, and semantic tagging.
Eventually, this process proved inefficient, as I still had to wait for developers to implement the changes.
I pushed my code updates to a dedicated UI Git branch
To be directly productive, I learned and was given access to the company’s Bitbucket repository. I created a UI branch to commit my changes, which allowed me to work on the design system independently of the main application. This also enabled me to collaborate with developers, who could review my code and provide feedback.
Documentation
To manage the UI project, our development team used the collaborative Atlassian suite—including Jira, Confluence, and Bitbucket—not only to offer transparency into our decisions throughout the process, but also to host our published source-of-truth design system.
I grouped UI tasks into a Jira epic so QA only needed to review once
To this point, the developers did not have a process for unit testing front-end changes. Testers would have to explore the entire application to ensure the UI was consistent. By batching UI updates into epics, QA could review the application in the same task, logging issues in Jira and documenting them in Confluence.
I drafted specifications in Confluence…
In our quest to refine and standardize our design system, one of the pivotal steps was the creation of a detailed specification template within Confluence. This template was designed to meticulously address each element and component, ensuring nothing was overlooked. The inclusion of an 'Audit' section was particularly crucial. It allowed us to systematically review existing components, identifying areas for improvement based on set criteria such as usability, consistency, and code efficiency.
…then published to the design system after review
The success of our design system relied on a collaborative review process. Each component's specification underwent scrutiny from designers, developers, and managers in Confluence. This ensured diverse perspectives were considered, balancing design quality, technical feasibility, and business alignment. The process not only expedited decision-making but also encouraged a unified approach to design system evolution.
Results
The design system was a success, providing a single source of truth for design and development teams. We significantly cleaned and refactored CSS and HTML, reducing technical debt and improving maintenance.
The application's UI was modernized, enhancing scalability, brand consistency, and user satisfaction.
The design system was published on Confluence, ensuring transparency and accessibility for all stakeholders.
