Q3 2023—Q3 2026 (estimated) · Part-Time · State Government Agency
UX · Accessibility · eCommerce · ASP.NET Web Forms · VB.NET/Visual Basic · SQL · JavaScript · HTML · CSS/Bootstrap
The agency’s custom public-facing eCommerce application needed a better experience for the people who depended on it. I took ownership of ongoing development and helped modernize the application. I also refactored the backend code where I could, and created the test plan the internal testers are using for UAT.
Modernizing a Public-Facing Government eCommerce Website
At a Glance
Role: IT Programmer Analyst II / Technical Owner
Experience: 7 years supporting and developing the application
Environment: ASP.NET Web Forms · VB.NET · SQL · HTML · CSS/Bootstrap · JavaScript
Focus: UX · Accessibility · eCommerce · Modernization
Status: Currently in UAT
My Contributions
UX & accessibility
Improved forms, information findability, responsive behavior, and accessibility.
Application development
Worked across frontend, backend, and database layers to implement new functionality and improve existing features.
Testing & support
Created test plans for technical and non-technical stakeholders, defining test instructions and criteria for identifying different types of feedback.
The Challenge
The application was already a production system supporting real patrons and transactions. Over time, it had accumulated problems that made the experience harder to use and maintain.
The issues I identified included:
Pages relying on non-semantic markup
Confusing form layouts
“Walls of text” making important information hard to find
Crowded layouts on mobile
My goal was to make meaningful improvements without losing functionality patrons and staff already depended on.
What I Did
Below are three parts of this project that I am particularly proud of. I believe they best demonstrate my values and my thought processes as a developer.
01 — Simplified Complex Ordering Forms
The problem
The application's ordering forms were difficult to follow on both desktop and mobile. Labels appeared to the left of their inputs in a staggered, multi-column layout, causing the eye to follow a "Z" pattern. Some labels also included help text, making them long enough to become visually separated from their inputs.
As I continued to learn about accessibility and UX, I found additional problems:
Forms used HTML tables for layout rather than semantic HTML,
Labels were not programmatically associated with their inputs,
Some forms contained dependent comboboxes that updated dynamically when another selection changed. Those updates happened silently, leaving screen-reader users without any indication that the available options had changed.
I identified these problems myself while looking for ways to improve the site and decided to make the form experience the first part of a larger modernization project.
What I changed
I rebuilt the form structure using semantic HTML and ASP.NET controls, removing the layout tables and restructuring each field so that its label appeared above its input and its help text appeared under the input.
I chose the single-column layout after researching form usability and how people visually scan forms. The goal was to create a more predictable path through the form rather than requiring users’ eyes to move back and forth across the page.
I also:
Programmatically associated every label with its corresponding input
Used Bootstrap 5.3 responsive utilities to improve the forms across screen sizes
Added an ARIA live region to provide a polite announcement when a dependent combobox updated, so screen-reader users would know that the available options had changed
Why I made these changes
The visual and accessibility problems were closely connected. The original layout relied heavily on visual relationships between labels and inputs, and some of those relationships were difficult for both sighted users and assistive technology to interpret.
I treated the form as a single experience rather than fixing each issue in isolation. The result was a simpler visual structure, clearer relationships between labels and inputs, and better feedback when the form changed dynamically.
Focus: Form UX · Semantic HTML · Accessibility · Responsive Design · ASP.NET Web Forms
Examples of research that informed the decisions
Avoid Multi-Column Forms — Baymard Institute
Field Label UX: Place Labels Above the Field — Baymard Institute
02 — Replaced a Static Page with a Searchable FAQ
The problem
The website's FAQ page was a static page with questions and answers listed in no particular order. There was no practical way for a patron to quickly find a specific question or browse related information.
I identified this as a usability problem while looking for ways to improve the site. I also saw an opportunity to make the FAQ easier for staff to maintain.
What I did
I designed and implemented a structured FAQ experience that gives users several ways to find information:
Search
A text field and search button let users search across questions, answers, and topics.
Frequently asked questions
The four most-asked questions are surfaced near the top of the page so commonly needed information is immediately available.
Topic browsing
All FAQ topics are presented in a responsive four-column grid. Each topic shows links to its first one or two questions, followed by a link to browse the full topic.
Topic pages
Individual topic pages present all questions within that topic and include automatically generated on-page navigation. The navigation links use each question's text, so adding a new question automatically adds the corresponding link.
Building the content structure
I designed the underlying content and database structure so staff and developers can manage the FAQ without changing the application's code.
The structure allows staff to:
Assign questions to topics
Control which four questions receive the highest visibility
Maintain the information as individual questions rather than editing a single document
Topics also contribute to search, giving users another way to find relevant information.
Performance
I implemented five-day server-side caching for the FAQ data to reduce repeated database queries and to keep the search performant for patrons with limited device bandwidth.
This decision was informed by preliminary Lighthouse results and the goal of keeping the experience as responsive as possible.
Why I made these changes
The original static page did not solve the problem of helping people easily find information, and I wanted the new experience to work for both internal staff and our patrons.
Patrons should be able to find answers quickly, while staff should be able to organize and update those answers without needing a site update.
Focus: Information Architecture · Content Modeling · Search · UX · SQL · Performance · Accessibility
Examples of research that informed the decisions
An FAQ’s User Experience Deconstructed — Nielsen Norman Group
Should I Use Accordions in My Page Design? — Purdue University
Krug, S. (2014). Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability (3rd ed.). New Riders.
03 — Made Dense Information Easier to Understand and Use
The problem
The site contained large blocks of instructional content written with the goal of giving patrons every detail they might need. In practice, much of the content was difficult to scan and understand quickly.
The copy often:
used passive voice,
contained few meaningful headings or breaks,
had a Flesch–Kincaid Grade Level above the recommended Grade Level 10, and
was organized more like a traditional document than a webpage, making it harder to find the details a patron needed without reading through large amounts of text.
I identified these issues through my own review of the site and through feedback we had received about similar content across our websites.
What I changed
As part of the modernization work, I reworked the content structure and presentation to make important information easier to find and understand.
I reviewed the copy and then:
Broke dense content into shorter, logically grouped sections
Added headings and other visual structure to support scanning
Reduced passive voice and adjusted wording to bring the content to a Flesch–Kincaid Grade Level of 10 or below
Structured information around the questions patrons are most likely to have rather than treating the page like a document that should be read from beginning to end
Why I made these changes
My approach was also influenced by what I learned about trauma-informed design. The application provides access to sensitive records, and I recognized that the process of finding information and completing an order could already be stressful for some patrons.
I wanted to reduce unnecessary cognitive load and help people find what they need without making them work harder than necessary to understand the site. That meant prioritizing clear writing, scannable structure, and easy access to important information as part of the user experience.
Focus: Plain language · Information architecture · Content strategy · UX thinking · Trauma-informed design
Examples of research that informed the decisions
Plain Language Guide Series — Digital.gov
Scott, C. & Eggleston, M. (2023, December 19). Inclusive by Design: Use a Trauma-Informed Approach. User Experience - The Magazine of the UXPA. https://uxpamagazine.org/inclusive-by-design-use-a-trauma-informed-approach/
Krug, S. (2014). Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability (3rd ed.). New Riders.
Testing & UAT
Because the modernization affects an established public-facing application, I wanted to make sure we tested both the new experience and the functionality that was already working. I created a formal test plan from scratch to give non-technical testers clear guidance on what to test and what kind of feedback would be most useful before launch.
I defined six primary testing areas based on new and existing functionality:
New Visual Design & Usability
Searchable FAQ Section
Form Usability
Canadian Payment & Shipping
Multi-Item Pricing Rules
Regression Test Cases
The test plan also explains what testers need to complete the testing, including links and test payment information, and provides guidance on how to report useful findings. I wanted to distinguish actual bugs or usability problems from personal preferences about layout or design, while making clear what types of issues would be addressed before launch.
To make reporting more consistent, I also created a dedicated feedback form where testers can submit their findings in an organized format.
I personally tested all of the functionality covered by the plan in my local development environment, including both new functionality and existing features. The completed test plan has now been handed off to a dedicated group of volunteers who agreed to work through the testing process and provide feedback during UAT.
Focus: Test planning · UAT preparation · Functional testing · Regression testing · Defect identification · Feedback criteria
What I Gained
Confidence
When I first started working on this application more than seven years ago, it was intimidating. Because the eCommerce system is custom-built, there often was not documentation or an existing resource to turn to when something broke in production or an older piece of code behaved unexpectedly.
That has changed a lot over the years. After working with the application, troubleshooting production issues, and gradually improving it, I rarely find those situations intimidating anymore. I have handled much more difficult problems, I know the system well, and I trust myself to figure out what comes next.
Discovering My Focus
This project also made it clear how important UX and accessibility are to me. I enjoy researching how people might experience an interface, looking into best practices for more complicated situations, and using that research to guide decisions rather than relying on personal preference.
I now approach development by thinking about as many user experiences as possible and asking whether the interface and its content make sense to someone who is not already an expert in the subject.
Taking Ownership
One of the biggest things I learned was that I could take an idea I noticed on the site and turn it into a project from beginning to end. I researched different approaches, tested and refined solutions, presented my reasoning, and defended design decisions with evidence.
Seven years ago, I would not have imagined taking on something of this scale largely on my own. I am proud of that growth, and I'm especially proud that I can now turn what I learn into something I can explain and teach to others.
What’s Next
The site is not perfect, and I do not expect it to ever be finished. There will always be another experience to evaluate, another accessibility issue to uncover, or another way to reduce friction for the people using it.
The next areas I would like to explore are real user testing and a deeper accessibility evaluation of the shopping cart. With limited funding, formal usability sessions may not be practical, so I would like to find sustainable ways to involve volunteers and gather feedback on this site and the agency's other public-facing websites.
For now, I am proud of how far this application has come. Seven years ago, I could not have imagined getting it this far. I cannot wait to see the modernization make it into the hands of its users.