HP, Inc's Developer Portal

HP's Portal puts the newest HP tools and technologies in developer's hands.


Lead Designer | Spring 2017 to present

Tools page (left), landing page (center), business unit page (right)

Problem

HP's Developer Portal is a centralized hub for all external and internal APIs, SDKs, and developer-related programs. After launch, the site analytics showed users becoming caught in a loop between the home page and tools page, unable to find how to access the individual products. The Dev Portal team had two goals. First, enable users to quickly and easily find and access portal products. Second, increase awareness and adoption of the portal by HP internal business groups.

User research, cardsorting

Wireframe sketches and information architecture

Process

As the lead UX/UI designer for HP's Developer Portal, I led the end-to-end research and design process, which included conducting research, leading ideation, performing user research and feedback sessions, and creating low to high fidelity prototypes. This effort was in close collaboration with the development team. I also coded front-end design changes in the Drupal enviorment.

  • Competitive Analysis

    Reviewed similiar websites with a developer, including Microsoft, Google, Apple, and Amazon's developer portals, to understand the different experiences and what users currently expect. The findings were discussed with the team.

  • Information Architecture

    I ran a card sorting exercise with users to understand their mental models and expectations. This information was used to create low-resolution sketches of the structure of the site redesign.

  • Design Pairing

    Working with my main developer, I went through several iterations of designs based on the paper prototypes. This ensured that designs are feasible within the confines of the HP Dev Portal Drupal environment.

  • User Feedback: Pivot

    Low fidelity prototype were shown to 3 users. The design was was not working, so the team regrouped. Using feedback from the users and from HP business groups, major changes were made to the design.

  • Prototyping

    I created a highly interactive prototype in Axure based on the changes made to the sketches after the user feedback.

  • User Feedback

    Prototype was tested with 6 users in remotely moderated sessions. Users were given specific tasks that were based on the issues that were found in the site analytics that prompted the redesign.

  • Analytics & Iterations

    After launching v1, I began the process to work on v2, which will feature more filtering options and addtional content pages. Specific analytics were flagged to watch to measure impact.

Digital sketches and wireframes

User research data compilation

Solution

To better serve users, a clear Call-to-Action was implemented on the home page to lead users to the Tools page, the first stop for the majority of visiting developers. A search functionality was given major prominence in the header imagery to encourage search behavior. On the Tools page, the different tools were designated with imagery, large names, and API/SDK tags to facilitate scanning behaviors that are common amongst developers. The search functionality was again given prominence on the page. The Search functionality was also redesigned to allow users to quickly sort through the results to find the page they are looking for.

Original design: landing page (left), search results page (center), tools page (right)

Redesign: landing page (left), search results page (center), tools page (right)

Impact

Because of the changes made to HP's Developer Portal, the site analytics showed a 75% decrease in users becoming stuck in the loop. Individual product pages showed a substantial increase in users, and the search functionality became the most used feature of the site. Seeing the numbers rise of products on the portal, other teams became interested in having their products on the page. Within 6 months, an additional 15 HP products were onboarded to the portal.



Have a project in mind or want to know more? Contact me