The challenge

Cybersource and its Developer Center engaged with multiple agencies to go through a refresh in 2019 and a separate one in 2020. I was involved in both iterations of refreshes and also helped to develop some AEM components shared between both. I partnered closely with developers, product owners, and technical product managers for this project.

In this project, I acted as the design lead, conducted user research, and did some front end development on reusable AEM components.

Modernizing the look and feel

Cybersource underwent a brand refresh with help from an external agency. I created a variant logo for the developer center and refreshed all pages in the site to reflect this fresh new look.

The API Reference

The API Reference is a center for developers of any skill level to play with Cybersource APIs directly in the browser. It is a powerful tool used by over 440,000 companies to solve enterprise payment conundrums.

In an effort to mitigate future tech debt, stay aligned with other Cybersource products, and to take advantage of our internal UI library, I created a case to completely move the Developer Center from Angular to React. This took months of discussion, but by putting in effort to empathize and communicate with the development team, we were able to decide that this was the best solution for the future of the platform.

I conducted a card sort test with developers of varying levels to determine the most intuitive and logical way to organize the plethora of information in the API reference.