Developer Portal Redesign

The Problem

The Dwolla developer portal is a set of guides, articles and resources that allows businesses and developers to leverage the ACH API to build software on top of the U.S. banking system and move money.

It had been nearly five years since the last portal was relaunched and over that time the content drastically shifted. As new guides and articles were added, the content structure got disorganized and difficult to digest. Additional navigation elements were added over time without a clear strategy, making it less of a focused experience and more difficult for a developer to find what they need. It was time for a redesign.

I lead the UX process and worked closely with four members of the Developer Relations team over the course of about three months.

User Research

The Developer Relations team interacts with developers on the Dwolla platform on a daily basis, answering questions and gathering feedback. So there was plenty of information about what developers wanted.

A user research plan was implemented early in the process. In-person and remote interviews were conducted, which helped gain insight into the needs of developers.

Competitive Analysis

Our next piece of research was to look at best-in-class developer portals like Twilio, Pebble, and Github. We familiarized ourselves with industry standards and tried to note common design patterns that could be reused.

At the end of this research and discovery period, we sat down as a team to define what we wanted to achieve with the redesign.

The Goals

• Clearly communicate functionality and benefits
• Reduce inbound support
• Ensure the developer portal is a core part of the Dwolla experience
• Improve navigation and findability
• Provide a clean, concise, elegant reading experience
• Colors should be used in a more purposeful and meaningful way to indicate actions and alerts
• Bring it in-line with brand standards
• Reduce the “busy work” required by developers to accomplish tasks
  

Content Strategy

I worked with the Developer Relations team to come up with a new content strategy. An audit of the existing content was performed and everything was restructured more appropriately. Some guides and articles were rewritten and new content was created to help guide developers down the right path. 

Wireframes, Mockups & Prototypes

Over the ensuing months we worked together on various concepts during weekly workshops where we white boarded and brainstormed about ideas. We had daily standups to flag any potential roadblocks and to make sure we were collaborating and keeping in sync.

We developed countless wireframes and mockups in Sketch and iterated over time to make improvements. An ever-improving interactive prototype using Invision was invaluable for sharing work in progress and getting timely feedback.

Component Library

I knew it would be important to create a pattern or component library to help the website evolve in the future. That way if one component is updated then all instances of it are updated across the site, helping to iteratively refine the user experience. This modular web design approach would enable us to create a flexible system of standalone reusable components. I layed out the components in Sketch/InVision, but the plan was for the developer I was working with to leverage Storybook or Pattern Lab.

The Home Page

Significant improvements were made to the home page. It has a much better overview of the entire site and essentially serves as an index to all the content. It gives better visibility to resources like the developer community forum, API reference documentation, and SDKs.

Zoom into the screenshots below to see some of the notes on the user experience enhancements I made.

Before Redesign

After Redesign

Side Navigation

On a content heavy site with several tiers of hierarchy, it is important to get the navigation right and we wanted to make sure it was well-thought out.

We explored several different concepts and eventually came up with a few options to pick from, but ultimately we all gravitated towards the same concept that I worked up here.

A caret indicates that there is sub-navigation under the 'Guides' and 'Concept's sections. When clicking/tapping, you are focused into each section with out any distractions. The user can easily navigate back and jump into any other section as needed.

The API status bar is fixed to the bottom of the left side screen at all times making it prevalent on every page on the entire site, improving on the previous experience.

Desktop functions similarly to this mobile version

Guides & Concepts Index Pages

With the new content strategy, there would be different buckets for the content under the 'Guides' and 'Concepts' sections. Similar design patterns are followed in each section, with subtle visual indications to differentiate between guides and articles.

Tabbed navigation allows the developer to filter content based on their experience and their level of competency. 

Individiual Guides & Articles

Based on customer feedback, several UX improvements were made to individual guide and article pages in order to streamline the experience for developers.

Right Side Navigation

The left side navigation goes down two tiers, but the new right side navigation takes it another level deep and stays fixed to the screen with smooth-scrolling anchors that jump to specific parts of the page. When at the bottom of the page, a quick link back to the top is available for easy reading. Unfortunately, the prototype doesn't have the ability to do fixed positioning, but hopefully you'll get the idea.

Previous/Next Step Navigation

Buttons are placed at the bottom of each guide to jump to the previous or next step. The same steps are just as accessible through the left side navigtion, but these add an extra level of ease.

Collapsable/Expandable FAQs

New and improved FAQ components have expanding functionality, which allows developers to view and consume FAQs that are relevant to them more easily. Non-applicable questions are hidden, making it easier to scan content quickly.

Code Blocks

User feedback on the existing code blocks proved they were often times too long and resulted in excessive scrolling. The ability to scroll and expand the code blocks by dragging the bottom right corner was added to reduce page scrolling.

Other updates include a dropdown as opposed to tabs allowing the flexibility to add more languages in the future, and making it more scalable. The copy button was also moved to the top right and minimized in size to follow common industry design patterns. 

Tables

New functionality enables the expanding and collapsing portions of tables, revealing content and additional code examples, again reducing page scrolling.

Images with Captions, Lightbox, & Download Options

New functionality was added to images  to download, maximize in size and show captions, clearly improving on the previous experience.

Calls to Action

New CTA's are strategically placed throughout guides/articles that link to other relevant resources with an icon that indicates where they are being directed, creating cognitive recognition for future sessions. They are designed to subtly stand out, but not disrupt the reading experience.

SDKs & Tools

The previous experience was improved on by adding filtering that only shows content that is applicable to the developers use-case.

Selecting a specific language on the home page component or within the footer will jump to this page with the appropriate SDK pre-selected and instructions on how to get started. Easily use the tabbed navigation to jump to a different SDK if needed.

Right side navigation makes it more clear that there are additional tools and resources on the page, increasing visibility.

Changelog

Similar to the SDK page, the Changelog was streamlined to emphasize content that is most relevant to the user. Content that is less likely to be relevant is deemphasized. Tabs separate completed and upcoming changes, making content more digestible. Since upcoming changes happen only occasionally, they are placed behind a tab with a number badge indicating the number of changes. Plus, right side filtering narrows results down even further by selecting specific actions .

New pagination along the bottom of the page makes content easier to consume.

Discover Section - Post Launch

The goal of this section is to first let the user select the way their business transfers funds through the network and answer some additional questions about their customers and preferred funding source verification method. Then, based on their answers present specific guides, articles and resources that are applicable to their use case.

We knew this could be a huge enhancement on the previous experience, but for the sake of continuous deployment and iterative design/development, this section was saved for post launch. The plan was to get what we had out the door and get customer feedback while working on the Discover section to make sure we collect data that might be useful.

Discover Page - Work In Progress

Early Concept Wireframes

Final Results

The redesigned portal was launched in Q1/Q2 2020. Take a look at the live site. It's a great example of a cross department team working efficiently and iteratively over a substantial period of time. Overall, it was a great team bonding and learning experience and will be a huge win for the end-users. 

© 2024 Jeremiah Wingett