HP Developer Experience

HP's internal development resource center is an internal service that connects employees to peers and tools that will help them more effciently and effectively complete their work.

Goals

HP's Internal Portal was concepted as a centralized hub for all tools, services, software, and resources available to employees. It's main goal was to facilitate peer connection and provide access to the resources that help employees complete their work efficiently and reduce rework across teams. Begun in 2019, it has grown to a company-wide initiative to better connect employees with the tools to help them succeed in their roles.

Impact

  • Grew a user base to over 10,000
  • Over 400 APIs available, half of which at Gold status (fully usable without contacting the owner)
  • 8% decrease in onboarding time for newly hired developers
  • 5% decrease in development time reported by software devs

Process

As the lead UX/CX designer for HP DevEx, I designed the end-to-end experience with the user as the primary focus. This includes conducting research, leading ideation, performing user research and feedback sessions, and creating low to high fidelity mocks and prototypes. For the project, I successfully advocated for the implementation of HP Veneer, a design system that empowers designers and developers to create unified digital products and services.The portal design work is structured in an iterative process, and we utilize multiple methods to gather qualitative and quantitative data to guide our next design.

HP Developer Experience is continuously in the process of gathering user feedback on implemented experiences, creating new iterations, and testing those iterations to ensure a positive single experience and to create lasting positive associations with our product so the user returns for their next search.

Planning




This project was developed using a Design Thinking methodology to understand the users of our product and their needs. Extensive background research was done internally to understand employee pain points, requests, and requirements to create achievable and measureable goals. I hosted multiple workshops with users and stakeholders to learn, ideate, and refine ideas. We defined goals and created "Dave Developer" as our persona, and he was divided into two sub-personas: the Consumer (content user) and the Publisher (content creator). Then I outlined a site map based on all the compiled research and brainstorming to begin prototyping.

Landing Page

Evolution of landing page from MVP with basic information through to information feed.

The design for the Landing page provided all the top level content that the portal offered so users could easily be directed to the solution they were looking for. The MVP design feature a simple list of resources and categories to get users on the site and gather data. The second iteration featured a more personalized experience with a left hand navigation that included information relevant to that user's profile as well as a more prominent view of the asset categories from the catalog, which was the most userd feature on the site by far. We tracked feedback and analytics to design the third iteration, which included a personalized homepage experience. The upgrade from the static display to a feed that pulls content relevant to that employee's role and peers made the site more important than just a place to go to find a tool. It became a hub for employees to learn about resources within the company that they might not know are available. With this change there was marked rise in homepage visits from both unique and repeat users.

Search Results

Search: MVP (left) and iterated design (right)

The MVP Search functionality was a bare-bones relevance list with the ability to filter by category and type. The initial user interviews requested a simple scrollable list with basic data and preview information to glance through. However, after implmentation the user behavior revealed deeper insights that we could integrate into the experience. The Search experience was redesigned to include the most frequently used filtering options as top level suggestions, while the ability to expand and collapse preview data kept the interface from being too cluttered. With this change, the Search analytics reported an increase in usage, a decrease in filtering, and a decrease in time spent on the search results before navigating away. These data points indicate that users are able to more quickly and easily find the result they are looking for, accomplishing their goal and getting back to their task.

Asset Catalog

Asset Catalog: MVP (left) and iterated design (right)

The goal for the Asset Catalog was to enable users to search the extensive catalog of tools and services that are internal to HP, learn about tools that may solve a problem within their current project, and implement that solution. We began with a basic list of assets with the ability to filter by asset type. We used this MVP to track users' behaviors and interview "power users" to understand what their expectations were from the Catalog and how we could meet their needs. After The discovery exists in three phases: card preview, sidebar, and full view. The information that appears at each phase was tested with users to help them skim through and quickly discover the tool they are looking for without getting derailed by unnecessary information if the asset was not their solution. Each type of asset (API, pipeline, etc.) has specific filtering and sorting rules relevant to that asset type.



Workflow compiled from user interviews

Full asset discovery from card (left), sidebar (middle), to full page (right)

API Upload

Initial brainstorming and understanding user pain points through interviews


Card sorting exercise example

The most anticipated feature of the hp.dev portal was the ability for developers to share internally developed APIs to reduce rework within HP. Often multiple teams within the organization would develop APIs that functioned similarly, and had they known the API already existed they could have implemented it into their own code. In order to achieve this, an API owner would need to fill out numerous data fields for users to learn about their API, an extremely complex and time consuming endeavor. This experience went through multiple iterations through testing, where we learned how to optimize and organize the pages and reduce the cognitive load for the user. For example, initially I began with a sinlge page that contained all the data input fields, with the thought that a single page would feel less taxing. However, the feedback was it was too overwhelming, and so I did user research with a card sorting exercise through Miro to understand what their mental models of API information were and how more intuitively break up the requirements into more bite-sized chunks. A gamification element of API status was also included to incentivize API owners to fill out all the input fields for a more complete API entry, which would create more value for users searching the asset Catalog. Future plans for the API upload experience include batch API upload and AI assisted API upload/creation.

End-to-end API Publishing flow in Figma. The prototype is live and allowed for user testing simulating an implemented experience.

Iterative Design

The portal is an ongoing initiative and continuously in the process of tracking feedback and conducting user testing and empathy interviews to create a better overall user experience. The ultimate goal is to create a portal where technical roles within HP will be able to connect with peers around the world and trade expertise to improve business processes and share knowledge.