Developer Studio from Fiserv

Project overview: I worked on redesigning and expanding the support page experience for Fiserv’s developer portal called Developer Studio.

I led and completed the project with the support of my team. My work is now live on Developer Studio.

My role: Product Designer

Timeline: September 2021- November 2021

Tools: Figma, UserZoom, Github

Support team: Jimmy C. (Product Designer), Jongho L. (Product Designer), Olga Z. (Developer), Vardan B. (Director IT)

Background

Context of the Developer Studio

In mid-September 2021, Fiserv launched Developer Studio, a developer portal, to bring their financial technology products onto one platform.

The goal of the portal is to make it easier for existing Fiserv clients to access their APIs while attracting new clients. Although the portal is intended for developers, there will be non-developer visitors (small business owners, product managers, students, etc) who would need help navigating the space. There is room to provide this information on their Support Page but it would need some work with its design and purpose.

Research

User problem

I started off my research by going over existing user testing results conducted by my team. I referred to the most recent results based on the full Developer Studio experience. At this point of the product, developers can:

Discover and search for endpoints
Try out the API sandbox
Create and log into the account

Based on the usability test results, I gathered two user insights:

Insight #1
Users have a high chance of drop-off when they can’t find the desired API

Insight #2
There is not enough “support” as the user explores the unfamiliar portal

The drop-off rate is based on the way the site map is designed and the terminology used. There are two routes where you can find the endpoints:

Through the Product Area page and then the Product page. The endpoints are nested inside the Products.
All APIs Page. This centralizes all endpoints.

If you didn’t design the portal, you probably don’t know what is a “Product Area” or “Product” or maybe even “endpoints”, depending on your level of knowledge. If users don’t know these terms, then they wouldn’t know how to accurately use the functionalities in the portal, such as the filter, tags, or the API sandbox.

What is the current experience like on the Support Page?

The Support Page has a basic look with limited features.
As a user, you can reach out to the Developer Studio team through Github and Slack

Challenge and proposition

Project challenge

I broke down the user problems into two key objectives and began working on them in parallel. These "how might we" questions drove my propositions to solve the problem and design explorations.

1. How might we prevent drop-outs for users when looking for the endpoint they really need for their business?

2. How might we help general non-developer users navigate the portal successfully?

Propositions to solve the user problems

For the business
Reduce potential drop-offs of visitors who are interested in partnering with Developer Studio.

For the user
Reduce friction of the overall user experience of Developer Studio by providing helpful guides and ways to reach out to the Developer Studio Team on a redesigned Support Page.

Success metrics

Considering I am an intern working on this project, I won’t be able to analyze the long-term success metrics of this project, but I can still measure based on usability testing.

Usability results

User test results show guide is helpful; feedback recommends glossary and FAQ

3/3 tasks were completed with a 100% success rate
Testers thought the guide was extremely helpful. The testers suggested a glossary as there were a lot of terms they pointed out that were confusing and a FAQ to answer common questions.

Additional feedback recommends to create multiple pages for ease of information digestion

I received additional feedback from my design and developer team about the guide. Originally the guide was a one-pager but it was getting too long and information began to take its own shape where it required its own page so now there are seven pages total:

Five pages dedicated to the user flow of finding the right endpoint
One page dedicated to FAQ
One page dedicated to a Glossary

I knew I wanted to provide a guide for users to refer to when going through Developer Studio. The guide would focus on the user who is looking for the endpoint they need for their business. I would then provide additional information that would help non-developers understand developer-related and Developer Studio-exclusive terms. The guide would then live on the Support Page.
Since we didn’t have any existing guide or a UX writer, I wrote the first draft for Developer Studio based on the user who is looking for the endpoint they need for their business on a Word document. I recruited 5 non-developer testers to ensure this guide would be helpful for them. In addition, I recruited 3 developers.
Objectives:
1. Determine how useful is the guide
2. Collect other insights that will improve the guide
Subject: The Developer Studio website
Participants: 5 non-developer testers and 3 developers
Methodology: Moderated via UserZoom
Tasks:
Task 1 - Review the portal for 5 minutes
Task 2 - Review the guide for 2 minutes
Task 3 - Navigate the portal using the guide as a reference

UX and UI iterations

Updating the guide to align with Developer Studio’s documentation format

Based on user test results and feedback from my team mates, I updated my document to align with Developer Studio’s style guide.

Reformatting the importance of information on the Support Page

On the current design for the Support Page, there are seven cards.

5/7 cards are dedicated to Github
1 card leads to Youtube
1 card leads to Slack

After reviewing the hyperlinks, 2/5 Github cards take the user to the same location. There were no videos about APIs on Fiserv’s official account that would help users understand the developer experience.

For the redesign of the Support Page, I increased it to nine cards. From the user test, the majority of my testers had the most questions about the Product Area, Product, and where to find the API sandbox so I placed them at the top of the page. For the second section, I dedicated to users who want to “learn”, such as finding a quick answer from the FAQ, clarifying confusing terms, or engaging in community posts. Lastly, users can reach out via Github.

Although we highlighted some of the pages to the guide, the user has full access to the guide by using the left menu.

Following Developer Studio’s UI style guide

At this point, we had an established style guide that met the requirements of Fiserv’s Global Strategy team. I followed their guidelines by updating the logo and the banner image.

Final solution

Redesign of the Support Page with guide, glossary, and FAQ

Itererated the page to align with Fiserv’s approved UI style guide
Created a 7-page guide to help visiters understand how the portal works, answer general questions, and clarify terminologies

Project outcome

Although my designs are not implemented yet, I received positive feedback from management and are amazed by my user-centered approach.

Testers who are developers and non-developers thought the guide was extremely helpful in understanding the developer portal

Redesign of Support Page highlights information addressing user pain points, making it easy to find various solutions

Reflection

Takeaways from this case study

Working with a design team and engineering team in an-agile setting for the first time gave me a peek into how designs get implemented and shipped in a fast-paced environment.
I gained a lot of confidence as a designer, as it was my first opportunity owning an end-to-end feature within Developer Studio.
There is a balance to design that meets the needs of the business, stakeholders, and users—which I’m still learning.