Developer Resources provides a vast library of information on how clients can integrate certain APIs into their app based on their company size and selected HCM (Human Capital Management) category. I had the opportunity to redesign the whole Developer Resource website and help solve a couple of issues. One of the key issues that I helped address was accessibility. We here at ADP are always striving to help and assist EVERYONE when it comes to our products. ADP stands for Always designing for People. As such, we want to accommodate all types of users from those who have low vision to those who use screen readers.

I have worked closely with the Marketplace team (designers, engineers, content and product managers) to reskin and tackle outstanding issues with the current Developer Resources website.

The main reason for the project was to reskin the entire Developer Resources website with our newly developed Design System and tackle any accessibility issues along the way. I was able to tackle some of our user pain points as well. The last part was not part of the original project roadmap but with little time and resources, I was able to fight for these changes to enhance the overall user experience.

• To achieve conformity with the newly built design system
• To improve accessibility
• To enhance user experience in site navigation

The main reason for the project was to reskin the entire Developer Resources website with our newly developed Design System and tackle any accessibility issues along the way. I was able to tackle some of our user pain points as well. The last part was not part of the original project roadmap but with little time and resources, I was able to fight for these changes to enhance the overall user experience.

• Deepen my understanding of the Design System
• Take accessibility training
• Identify the pain points in site navigation

• For those with low vision, it was hard to read some of the text because the background was too dark and the text was too light (did not meet WCAG standard)
• There was no semantic order, so the screen reader didn't know how to differentiate between different HTML tags (screen reader difficulties)
• There isn’t a way to filter between North American and International Products.

• Atlassian Developer Resources
• Salesforce Developer Resources
• Mozilla Developer Resources

Note: Making a website 100% accessible is not an easy task but it is doable. Not every company will get everything right but it does show that they care for their users. Accessibility improvements requires a lot of time, effort and money.

With all the research that I have done, I was able reskin the entire ADP Developer Resources and tackle a few outstanding user experience issues. I have listed out some of the issues that we have noticed and tackled. There were many issues and if you like to learn more on how I solve those issues, feel free to reach out to me.

Couple of issues with the previous design:

• Outdated design system
• WCAG standard not met (Text, color, icons)
• Inconsistent spacings

Couple of issues with the previous design:

• Semantic markings are not accurate
• No landmarks

Here are some screens that I have done. If you would like to see the entire website, please click here.

Couple of issues with the previous design:

• WCAG AA met (such as Color Contrast)
• Using newly built Design System
• Modern look

Couple of issues with the previous design:

• Accurate semantic markups
• Alt text added
• Fluid navigation flow