Fiserv

Designing developer portal and API explorer with better user conversion and enhanced support features

Usability Heuristics

Match between systems and the real world

When creating a platform for engineers to discover and implement APIs, it is important to use the language and system that they are familiar with. The terms and concepts should seem clear to the users to build an experience that feels intuitive.

However, Fiserv’s developer portal used “witty“ language that failed to match the industry standards. For example, they used a copy “boarding“ instead of “onboarding“ and “merchant intelligence“ rather than “user data“ for their main API categories. Though witty, this could cause potential users to guess what each category of API entails and misunderstandings or site abandonment.

Usability Heuristics

Recognition than recall

A positive user interaction doesn’t always have to be lengthy. In fact, supporting user navigation in the most intuitive ways so users can find what they need and use it quickly can result in a positive user experience. In Fiserv’s case, users were left without any guides and descriptions about each API and parameter. Unless the users were already familiar with Fiserv’s product, users have to spend a long time reading and trying to understand the products.

Question 1

“Does this API meet my needs?”

According to user research, effective value setting is crucial for attracting and retaining users. In other words, engineers and developers need to understand why using Fiserv’s products is beneficial to them and their company’s business. On the current Fiserv developer portal, there is a lack of value-setting communication.

In addition, the API explorer fails to clearly communicate what each API does. This was a looming usability issue I discovered during heuristics evaluation that was validated during the research. During the research, I discovered that most engineers have a general idea about what they are looking for. Their real task was to find the API that matches their needs. This lack of value setting and failure to provide an adequate API description resulted in user confusion and unsuccessful conversion.

Question 2

“How do I use this API?”

The next looming usability issue was that there was no instruction on how to implement each API. Users often felt lost after arriving at the API explorer page and found themselves asking a question, “now what?” Below is a stark difference between Fiserv’s API explorer and a successfully curated API explorer by a competitor company Stripe. Stripe provides a concise description of the API’s function and guides users on the implementation with step-by-step instruction. This is a reflection of a user-centered design approach as one of my interview participants phrased, “instruction does help my work, but it also shows that the company cares about what we do and understand our effort.“

With the next actionable steps unfigured, Fiserv’s users were facing another challenge as they searched for support; looking for help was not easy. Fiserv’s developer portal provides a link to support on the homepage only. As a result, if a user needs to access the support, they needed to abandon their browsing and navigate back to the homepage. This was creating frictions in their workflow and a lot of frustrations.

Question 3

“What would this API look like?”

One of the key elements the interview participates mentioned being useful was having lots of visual examples. This included images and the code examples they can easily copy and paste for implementation.

Fiserv’s API explorer does have a “Try It Out“ section, functioning as a sandbox for engineers to test out coding examples. But, it has a lot of prebuilt filters that users need to click through to get to the code example. This added flow slows down the user exploration and sometimes resulted in site abandonment.

Solution 1

Help users discover what they need

In order to create the most intuitive and seamless API discovery, users need to know where to go without having to think deeply about their navigation. To improve on the misleading wordings, I added tags under the API categories to help users understand what each category entails. Users can use the keywords during navigate to find APIs that meet their needs.

However, I realized there is another approach that was more effective for this usability issue; updating the UX copy. With an updated wordings that match the industry standards, users can intuitively direct themselves and discover APIs they need.

Solution 2

Inform users what each API does

During the research, one of the biggest usability issues was the lack of explanation about what each API does and how it can benefit users’ projects or their company. I decided to create a section to house a brief description under each API to help users understand the basic functionality of the API and added a link to API Reference for more information.

Keeping in mind the current API documentation system at Fiserv, I included a version selector for engineers to access previous versions of the API.

Solution 4

Use visual examples

Carefully selected visual examples can help create an engaging user experience. In this case, I used visual examples such as images, icons, and written-out code to help create an intuitive and hassle-free user experience. Additional visual examples helped reduce the time spent reading and opened up opportunities for users to interact with the product.

Another approach within the solution was simplifying the sandbox on the API explorer. The current “Try It Out” section forces users to take an extra step to view the coding example. Eliminating the friction, I simplified the sandbox to only show the necessary code that users need and made it available to easily copy and paste for implementation. To accommodate for different coding languages, I allowed users to choose an appropriate language with one simple click.

User feedback

I asked potential users to explore the design and share their thoughts on what they think the website is doing successfully and what I could improve more. After sharing the new developer portal and API explorer with the potential users, I received feedback from users on the overall usability. Users showed positive reactions to the support-related features such as “Guides & Tutorials“ as well as the step-by-step instructions and mentioned that they feel more empowered to start using the product with the support.

Closing Remarks

Understanding the user problem is key

This design project posed a unique challenge to me because I wasn’t familiar with the subject matter. To understand what I was designing for, I first searched and learned about developer portals and API explorers. Once I started to understand the subject matter, I asked the target users to share their workflow. I was able to empathize with the users and ask better questions. I learned that good research reveals the real user problems which will lead to a better design solution.

Working with constraints

In order to create a realistic and implementable design, designers should be aware of budgetary and time constraints. In other words, designers sometimes have to produce solutions without extensive research, IA, wireframes, and other validations. That forced me to extract valuable user insights from the research and constantly look back to them when making design decisions. What would I do if I had more time, you ask? I would still cling to the user insights but would do extensive usability testings with a working prototype to uncover any other usability issue.

Make obvious things more obvious

Through this design project, I learned that being “clever” or “witty“ isn’t always admirable. In fact, using the common language that users are familiar with is important. This not only prevents unnecessary confusion but also shows that designers are always keeping the end-users in mind when they approach a project.