Redesigning the world’s largest JavaScript repository
In a three-year overhaul, we completely revamped the Node Package Manager website. By adding and upgrading essential features, we made a huge difference in how web developers work. This boost in UX directly translated to growth in revenue, thanks to increased sales of npm Orgs and npm Enterprise. Plus, giving users control over their own accounts helped us lighten the load on our customer support team, saving us money.
Primary role
|
Discipline
|
Time frame
|
Sector
Website |
npm is Lego bricks for web development
JavaScript is the backbone of the web. npm packages are modular building blocks of code that perform specific tasks. They're distributed and installed via the npm CLI (command line interface). To add the “React” package to your project, simply use npm install reactin your project’s directory. Authors can describe their package by writing a package.json file, and then sharing it to npm’s global registry with npm publish.
Millions of developers rely on npm's massive registry to discover and utilize these modular packages. But npm’s website complements the CLI by providing a centralized hub for package information, account management, and features specifically designed for teams and organizations.
npm package page on mobile, viewing download stats, and more.Collaborating with engineering, design, and product
The team, comprised of a designer, senior developers, engineering leads, and an engineering manager, reported directly to the head of product. To guide development, the head of product created product requirement documents outlining features and milestones aligned with business objectives.
The web team specialized in design and implementation, using GitHub Issues for task tracking. Design and development activities were closely linked to code commits, pull requests, and releases. All product documentation and specifications were centralized, ensuring transparency across the team.
Immersive user-centered design
Traditional user-centered design research is usually necessary, but my unique situation allowed for a more direct approach. Working alongside colleagues who were both npm's developers and end-users provided me with a deep understanding of their needs and behaviors. Ethnography after all is also user research.
This immersion eliminated the need for extensive up-front design, as I could observe firsthand how users interacted with the tool in their daily workflows. These were after all, authors and installers of npm packages. This direct engagement ensured that npm's features and design aligned closely with the real-world needs of its users. By maintaining a tight feedback loop between design and development, I was able to iterate rapidly on design concepts, ensuring that the product evolved in response to user feedback. This approach, combined with a deep understanding of the npm ecosystem and the practice of dogfooding, led to a speedy and effective design process.
The web team specialized in design and implementation, using GitHub Issues for task tracking. Design and development activities were closely linked to code commits, pull requests, and releases. All product documentation and specifications were centralized, ensuring transparency across the team.
Immersive user-centered design
Traditional user-centered design research is usually necessary, but my unique situation allowed for a more direct approach. Working alongside colleagues who were both npm's developers and end-users provided me with a deep understanding of their needs and behaviors. Ethnography after all is also user research.
This immersion eliminated the need for extensive up-front design, as I could observe firsthand how users interacted with the tool in their daily workflows. These were after all, authors and installers of npm packages. This direct engagement ensured that npm's features and design aligned closely with the real-world needs of its users. By maintaining a tight feedback loop between design and development, I was able to iterate rapidly on design concepts, ensuring that the product evolved in response to user feedback. This approach, combined with a deep understanding of the npm ecosystem and the practice of dogfooding, led to a speedy and effective design process.
Building a better platform for JavaScript developers
Over three years, our directive was to create a user-friendly platform for web developers that enhances their productivity and streamlines common tasks. With each push, I incorporated design improvements, gradually enhancing npm's overall aesthetic and user experience.
Quality of life improvements
Security and account features
npm Organizations
![]()
Login, New Org, Homepage, Search, Package Page
Responsive website for mobile web
npm's mobile-first design prioritizes our most-used features, package search, and package pages. By tailoring the interaction design to accommodate various screen sizes, we ensured a consistent experience across all devices. While these remain the most popular features, we adapted the layout and navigation of most pages to optimize usability on different screens. While most features were designed for mobile, exceptions were made for features like billing, which are primarily used on desktop.
![]()
Quality of life improvements
- Redesigned package page + Interactive analytics
- Typeahead Search
- Improved Search Results & Filtering
Security and account features
-
Adding and removing maintainers
- Two-factor Authentication
- Webhooks
- Login, Signup, Forgot Password
npm Organizations
- Create a Team/Organization
- Member Management
- New Billing Platform
Login, New Org, Homepage, Search, Package PageResponsive website for mobile web
npm's mobile-first design prioritizes our most-used features, package search, and package pages. By tailoring the interaction design to accommodate various screen sizes, we ensured a consistent experience across all devices. While these remain the most popular features, we adapted the layout and navigation of most pages to optimize usability on different screens. While most features were designed for mobile, exceptions were made for features like billing, which are primarily used on desktop.
In 2019, the Enterprise web team was able to reuse npm’s website for a self-hosted, carbon copy of npm, which could be sold to large organizations as their very own private, on-site registry
Launching the new website
The launch of the redesigned npm website was met with resounding enthusiasm from our user community. We were inundated with positive feedback, from hundreds of tweets to glowing comments in support tickets. Users were particularly vocal about the enhancements to the package page, which now offered a more intuitive and informative experience.
This kind of positive reception validated our design decisions and reinforced the importance of prioritizing user needs throughout the redesign process. The overwhelming support from our community served as a powerful reminder of the impact that a well-designed product can have on its users.
