HP's Developer Portal

Make something real with HP Developer​ tools: the developer portal opened HP's garage and released APIs from some of HP's most innovative technologies to the dev community.

Goals

Following the initial launch of HP Developers, analytics revealed a behavior pattern in which visitors became trapped in a navigational loop between the homepage and the tools page, struggling to locate and access individual product pages. The redesign had two objectives: streamline product discovery and access for users and drive greater awareness and adoption of the portal across internal HP business groups.

Impact

  • 74% decrease user abadonment on the homepage
  • Individual product pages showed substantial increases in visitors
  • Search functionality became the most used feature of the site
  • Additional 15 HP products were onboarded to the portal
  • Influenced stakeholders to invest more in the portal with API Credential Management

Role

As the Lead UX/UI Designer for HP’s Developer Portal, I was responsible for driving the end-to-end research and design process. This included conducting user research, facilitating ideation sessions, gathering feedback through testing, and developing low- to high-fidelity prototypes. I worked in close collaboration with the development team in Lean UX cycles to ensure alignment between design and implementation, and I also contributed front-end code changes within the Drupal environment to support the design vision.

Lean UX cycle used for this project

Research

I initiated the redesign process with a thorough review of the portal’s two primary pages: the home page and the tools list. This evaluation highlighted key pain points and opportunities for improvement. To further inform our approach, I conducted a comprehensive benchmarking analysis of leading developer portals from Microsoft, Google, Apple, and Amazon, in collaboration with a developer, to assess user experience best practices and evolving user expectations.

The insights gathered were synthesized and shared with the team to guide strategic design decisions. To better understand users’ mental models and content priorities, I facilitated a card sorting exercise, the results of which directly influenced the creation of low-fidelity wireframes outlining a revised site structure.

Using this data-driven foundation, I worked closely with the lead developer to explore and iterate on multiple design solutions. Initial paper prototypes evolved through collaboration, ensuring that all proposed designs were aligned with both user needs and the technical constraints of the HP Developer Portal’s Drupal environment.

Home design review

Tools list design review

User research: cardsorting for information architecture

Digital sketches and wireframes

User research data compilation

Wireframe sketches and information architecture

Testing Round 1

Low-fidelity prototypes were developed to conduct usability testing, with the initial plan to engage ten users. However, after completing only three sessions, the remaining tests were canceled due to consistently negative feedback. The prototypes failed to effectively address user needs and, in some cases, introduced additional confusion within key task flows. Participants found the experience overly complex, with too many elements competing for attention.

Key feedback highlighted the need to elevate the visibility of the search functionality and provide clearer indicators of the types of resources HP offers on the Home page. Additionally, users expressed a strong preference for the ability to browse the full list of available products on the Tools page, enabling a more comprehensive view of HP's offerings. While I was disappointed about the failure of the design, these insights early in the process prompted a critical reassessment of the design direction to better align with user expectations and improve overall usability.

Initial redesign of the Home and Tools pages: "failed" design

Revision

Informed by feedback from both users and HP business stakeholders, I implemented substantial revisions to enhance the overall design and usability (and fix the issues from the initial redesign). Users expressed a strong preference for quickly locating specific solutions rather than browsing through a full list of resources. In response, the search functionality was prominently repositioned at the top of the page to encourage search-driven navigation. To further improve user engagement and content discoverability, a carousel was introduced to feature new or highlighted resources, showcasing key offerings available to developers. Additionally, a personalized section was added to display shortcuts to tools and services that were either favorited or frequently accessed by the signed-in user. Beneath these primary content areas, supplementary tools and links provided easy access to the broader Tools page for more options.

On the Tools page, each tool was presented with clear titles and concise descriptions to align with developers’ natural scanning behaviors. To assist users who may be uncertain about which solution best meets their needs, straightforward filtering options were introduced, allowing them to narrow down the available tools effectively. Additionally, the search experience was redesigned to enhance visibility and usability. The improved interface enables quicker filtering and greater discoverability, ultimately allowing users to identify relevant resources more efficiently.

The same test plan was run on this improved design to directly compare the results from the previous "failed" iteration and yeilded positive results, encouraging us to proceed with implementation

Re-redesigned Home page (scroll to see more)

Re-redesigned Tools page with filtering

Results

As a result of the enhancements implemented on HP’s Developer Portal, site analytics revealed a 74% decrease in users experiencing the homepage-to-tools-page navigation loop. Engagement with individual product pages saw a substantial increase, and the search functionality became the most frequently used feature on the site. The improved visibility and usability of portal-hosted products also generated interest from additional internal teams, resulting in the onboarding of 15 new HP products within six months. The successful outcomes of the redesign prompted stakeholders to initiate the development of a new feature: API Credential Management.

API Credential Management

The process of designing the API Credential Management user experience began with a deep dive into user needs and security requirements, followed by close collaboration with a developer to ensure usability, technical feasibility, and that it would be accomplishing the Jobs-to-be-Done. We started by mapping out typical user journeys including generating new credentials, managing existing keys, and revoking access to identify pain points and streamline interactions. I created wireframes and low-fidelity sketches to visualize each step. This collaboration helped ensure that the interface not only aligned with best practices for UX but also met developer expectations for API management systems.

Throughout the development process, my developer and I maintained continuous communication to refine the design based on real-time feedback and implementation insights. As the front-end evolved, we tested the interface, focusing on clear messaging, error handling, and user guidance to reduce confusion and minimize the risk of mistakes during sensitive actions like key regeneration or revocation. Our teamwork enabled a balance between robust security features and a clean, intuitive experience for developers. The end result was a user-friendly credential management interface that met technical requirements without compromising usability.

API Credential Management flow