Lansing Ridge HOA Website

ADA Compliance/UI Redesign (Case Study)

Define the Problem

First and foremost, the client needed their website to be ADA compliant. They also wanted a more modern, organized, and minimalistic UI redesign. As you can see from the old homepage, the client's website was not accessible to people with disabilities, the information is disorganized, and the design desperately needed to be updated.

Collect Information and Brainstorm Ideas

Since ADA compliance was the most important factor in the redesign, I knew I needed to start with that in mind first. I began researching and taking notes on the best ADA compliant practices for websites.

After that, I went through each page on the old website to take inventory of content and begin to reorganize it. I then started to hand sketch wireframes and brainstorm new layout ideas.

Develop Solutions and Get Feedback

After brainstorming and analyzing all the information I collected on paper, I turned my sketches into medium fidelity wireframes in Figma. I wanted to be able to physically show the client new layout ideas and receive feedback before starting on the hi-fidelity mockups.

Prototype, Test, and Improve

Once I received feedback on the medium fidelity wireframes, I began creating hi-fi desktop mockups. I decided to start with desktop designs first because the majority of the client's userbase visits are through desktop view. This step in the process entailed designing prototypes, sending them to the client for testing, and improving as needed.

Cross Platform Design

Once the desktop prototypes were put through final approval by the client, I came up with mockups for the mobile UI. Since another large portion of the user base will utilize the client's site in mobile and tablet view, it was important to make sure those user interfaces were also ADA compliant, easy to use, and nice to look at.

Click here to view the live site.