The Legacy Application

about the project

One of my first projects as a UX Front-End Developer/Designer was to take an aging application and make it responsive and WCAG 2.0/Section 508 compliant. It is one of our most important and largest applications. To make it more complicated, it was written in an older language that made it nearly impossible for a front-end developer to directly update the vast majority of the HTML. I overcame this by collaborating very closely with the lead back-end developer, exchanging code snippets and updating style sheets as we went. By approaching it in this way, we were able to overhaul the application without affecting its stability and reliability.

When any major deviations from the old design were made, we did research and usability studies to ensure we were making a decision that would be beneficial to the users.

My Role

- Front-End Developer
- UX Designer (shared role with UX Manager)

Skills Used

- HTML/CSS
- Bootstrap
- Industry Research
- Usability Studies
- Accessibility standards knowledge
- Collaboration

My approach

  1. First I learned about the product I was working on. What it does, who uses it, and how they use it. There’s more to “making it responsive an accessible” than updating the code.

  2. I researched competitor products and best-practices for the elements I needed to redesign.

  3. On elements with significant redesign, I performed usability studies to make sure I was on the right track. If needed, I updated the designs and got more feedback.

  4. I increased my knowledge about the code-base I was working with, techniques that would make the application better for our users, and accessibility standards and testing methods.

  5. Feeling prepared, I rewrote the HTML, CSS, and some Javascript/jQuery for the application, working hand in hand with the back-end developer. We methodically updated the components of the application, piece by piece, testing and improving as we went.

  6. As we finished, I did several more rounds of cross-browser testing, as well as running through the application using a screen-reader, keyboard only navigation, and other manual and automated processes to ensure a good experience for all users.

WHat I learned

At the beginning of the project, I was brand new in my career, so I had a lot to learn. But I took away a few key things from this project:

  • A more thorough knowledge of Bootstrap and 3rd party libraries in general.

  • The complexities of working with enterprise software. The sheer amount of things that are configurable makes a seemingly simple task much more difficult. Every line of code and class name matters.

  • An understanding and appreciation for web accessibility. Because of this project, I’ve continued to learn about and advocate for accessibility.

Project outcome

While I wish I could go back and do some things differently, as I think we always do, the project was very successful. The overhauled application was unrecognizable, in a positive way, to the company’s own CEO. It remained a stable, core application while providing a better experience for our customers. In the following years, that application has layered on numerous functional enhancements and is an asset to the company and the organizations it serves.