top of page
Wireframe - Order Confirmation Desktop
Wireframe - Order Confirmation Mobile
PEERS Clinic Website: Text

PENNSYLVANIA LIQUOR CONTROL BOARD

CUSTOMER PROJECT
Duration: 1 Year - 2022~2023
Team: 3 Designers, 2 Engineers, 1 QA
Role: UX Designer, Accessibility specialist

PROJECT OVERVIEW

Summary:

  • PLCB aimed to modernize their B2B and B2C desktop and mobile sites to align with current design trends and enhance overall clarity. A significant focus was placed on ensuring the website's accessibility compliance, given its status as a government supported site

​

What I did:

  • As I joined this significant client project during the final stages of implementation, my primary role in design involved addressing minor updates as design issues arose. However, my major focus centered on conducting a comprehensive accessibility audit using the Lighthouse feature on Chrome and the Oracle Accessibility Toolbar. Through this process, I identified and logged over 200 accessibility issues, collaborating closely with engineers and QAs to ensure thorough resolution.
     

Constraints:

  • As the project was in the implementation stages, design updates had to align with the general design to avoid complications for the developers.

  • Due to the minor nature of the updates, a quick turnaround was essential, preventing the opportunity for official user interviews. Instead, we referenced baymard.com, an eCommerce UX best practices research site, to inform the changes.

Accessibility Testing:

After checking for accessibility issues via screen reader and Lighthouse, I logged over 200 tickets on JIRA for our engineers and QA team to address. I worked with the engineers and QA to ensure the fixes were done properly.

Accessibility Testing - Screen Reader

Accessibility Testing - Screen Reader image

Accessibility Testing - Lighthouse (Chrome)

Accessibility Testing - Lighthouse (Chrome) Image

JIRA Tickets

JIRA Tickets Image

Sample Design Change:

  • An example of a design change is illustrated below. The client required a method to display all the discounts associated with an item.

Product Tile - Discount information ideation

Product Tile - Discount information ideation 1

Information overload to display all the discounts

Product Tile - Discount information ideation 2

Information overload to display all the discounts

Product Tile - Discount information Final

Product Tile - Discount information Final (No tool tip)

Main information here
Detailed info hidden in tooltip

Product Tile - Discount information Final (With tool tip)
bottom of page