I love PCPartPicker, but it can be better. So I redesigned it. (2024)

I built my first PC 5 years ago.

Wait, hol’ up. For those who don’t know, enthusiasts and nerds like myself actually build our own computers. And when we say “build a PC” we typically mean purchase a bunch of components and assemble them to make a functioning computer. We aren’t buying individual transistors and soldering on every little piece. If you are, well damn, good for you!

Typically, builders put together a list of necessary components such as a processor, motherboard, power supply, graphics card, memory, and assemble it all at home with basic hand tools. It’s pretty cool, right?

You see it all the time in the videogame community and other industries that require a lot of computing power.

Why do we do this? Well, it’s actually really fun! And for the most part, you can always get way more computing power per dollar if you build something yourself vs. a “prebuilt.”

You should also know that building your own PC is incredibly complicated, especially for a first-time builder. There are quite literally thousands of components, each with their own power needs, compatibility, pros, cons, and unique performance metrics. You can’t just mix and match random things and make it work.

Building a PC requires a lot of research, planning, and understanding of a bazillion abbreviations and terms.

I won’t go into those details. There are lots of great posts and incredible YouTube Creators that fill that need.

This article is about one website, and probably the most influential website in the PC community: PCPartPicker.com.

PCPartPicker is an immensely valuable resource when assembling your own computer. Their team catalogs thousands of products with all of their unique specifications, photos, compatibility to other parts, pricing, and more.

To get started you can start a build from scratch, pick your individual components as you see fit, put them all together into a list, and order them from the cheapest retailer.

Or you can look at somebody else’s build. The PC community LOVES sharing their builds with other members. The new builders love to show off their accomplishments and see the performance benchmarks they can hit. The professionals build custom water cooling systems, custom cable sleeves, and color-coordinate it all together. Others show off the beauty (or distaste) of colorful LED components that change colors, patterns, or styles beyond belief.

PCPartPicker has been around for a long time, and personally, it’s starting to show. The core of the website is really great! I will be the first to admit it. But there is so much opportunity for growth, new ideas, revenue streams, and just a general visual update to go along.

I am a UX designer at my full-time job, and I am always looking for new opportunities and projects to work on to hone my skills. The best way to do this and stay motivated is to chase projects you're passionate about. Especially if you’re doing this as a concept and not actually paid work.

Before we get started, a few disclaimers.

A huge part of redesigning a website or application is user research, analytics, and feedback. You should never under any circ*mstance begin working on a new product or feature without talking to and chatting with the people who actually use it every day.

Every single user experiences a website differently than you. It’s your job as a designer to make sure you gather as much feedback as you can to shape and mold your thoughts.

With that said, this is a concept project I am doing for free. If this was a paid project, I would ask for Google Analytics permissions, conduct surveys, email campaigns for feedback, gather reviews, show mockups and wireframes to stakeholders, and more. But this project is much more narrow in scope.

I try my best to be WCAG2.1 compliant. A lot of that comes down to the dev team, writing alt tags, using descriptions correctly, etc. Most of the influence I have as the designer, for now, is visual compliance. If you don’t know what this means, it basically means that we (designers and developers) need to be creating tools that everybody has access to. No matter how abled you are as an individual, the internet is a fantastic tool and you should be able to use it without hindrance.

I am using Adobe XD for most of this. I know there are other great apps. Figma is definitely also one of my favorites. I’ve been using XD for about 3 years and love how far it has come. I will do my best to share the artboards throughout for you all to see for yourself.

Share your feedback! There are so many incredibly talented designers and developers out there that have really interesting tips, ideas, best practices, and skills. The community grows stronger when we debate, argue, and express opinions in a cohesive manner.

So let’s get started assessing the website as it is currently.

I started this entire project by exploring and analyzing the most essential functions of the platform. The parts that users interact with over and over again, the pages they visit, and the tools that make the platform as influential as it is.

Here’s a screenshot of the homepage as-is.

PCPartPicker’s core functionality really comes down to 4 elements (which it already does a great job putting right in the primary nav):

1. Systems builder — a step-by-step parts chooser where you can build your PC from scratch. One of my favorite features of this is that your build gets a unique URL to share your build with a friend. It also has a parts history so you can go back and quickly swap out parts if you’re debating between a few options.
2. Build Guides — Community-made systems that where experts (typically staff) create concepts for other builders. They normally have a creative name and a budget recommendation. This is an awesome tool for newcomers.
3. Completed Builds — A fun showcase for users to take photos and write about their completed builds. Some people brag about benchmarks or thermal performance, others just want to show off RGB beauty. Comments and upvotes allow for a ranking system and kind of establish a quirky community.
4. Individual Component Browsing — You can navigate to a certain type of part, browse and filter, and compare certain components to each other. This is a great way for people who already have a completed build to plan expansions or upgrades as necessary.

There are also several minor side functionalities or pages we need to consider.

1. Forums
2. Blogs
3. Price Trends
4. Price Drops
5. Log In & Register Accounts
6. About

Whenever you’re considering redesign a product, it’s always a good idea to be in conversations with your product managers (of course, they are probably the ones leading the project anyway) and look at the long-term vision of the platform. What are the new opportunities that we need to cater to while we can? Since we are making so much change, we need to ensure that our change is scalable and can smoothly evolve with the direction of the product.

I am adding two major concepts to this redesign.

1. Promoted Products

Let’s imagine that the exec team is putting pressure on us to build further revenue streams. Currently, all of the products and builds on the platform are organically generated. But that’s kind of the hardest part. When there is no money or advertising involved, users have more confidence and respect that a tool doesn’t feel compromised by third-party interests.

But on the flip side, PCPartPicker gets a ton of web traffic. And it’s one of the most direct-to-purchase platforms in the industry. That is a huge opportunity that any computer brand would be eager to engage with.

So here’s the challenge: can we integrate a promoted products platform that is not intrusive to the user experience and keep the community confident and trusting of the platform?

2. Beginners Guides

When I built my very first PC, it was extremely difficult for me to really understand what I was doing. Within the PC building universe, there is so much jargon, technical terminology. Pair that with a million different opinions on what you should do, it becomes really difficult to get a grasp on how it all works.

I honestly spent around 3–4 months researching before I purchased anything, and I got kind of lucky. My PC is very well built and my friends think I did a fantastic job.

On the other hand, I have also seen a lot of first time builds that are really, really rough. Anything from poor compatibility, to balancing CPU to GPU performance.

Fortunately, there are a lot of great content producers on YouTube to help. But if PCPartPicker is the home to actually purchasing parts, they should most certainly be a great resource to help you figure out what to buy.

With that said, I am adding an additional section that expands on various topics that beginners struggle with. PCPartPicker already has a blog, and I think that it is perfectly ok for that to continue to focus on company development and news. The “Parts Explainers” will be more in-depth pieces of content that discuss and cover industry updates, new parts releases and details, common mistakes, best practices, and topics of the sort.

Currently, their website is definitely more function than form. And that’s ok! For how long it’s been since the last overhaul that I am aware of, the website has aged pretty nicely.

Because of this, most of what I am going to focus on in this redesign is visual styling updates. Maybe further down the road, I’ll do this again with a different website that really needs a complete change.

We’re going to dramatically change the colors, create new icons, typography, style, and more.

I’m pretty minimalist, myself. And I like websites to have very clear and intentional space between sections. I am a big fan of massive amounts of margin and having each screen be very clear in what its function is supposed to be. I’ll probably round out a lot of edges (trendy, I know).

Getting that “gaming” or “techie” feel is a fine line. So many brands do full 8-bit styling commitments, and honestly, it’s way overdone. We need to relate to that gamer and tech-oriented audience without being too obvious.

To start, new colors are added. I took the purple and goldenrod that site currently uses, spiced them up a bit, and added a new coral color for vibrancy. Additionally, I planned on broadening the use of color throughout the website with various shades and options depending on its purpose.

To stylize the brand slightly more, I added a consistent guide with shadows and buttons that give a slight videogame feel without being too obtrusive.

Instead of traditional blur shadows that default to so many websites, I reduced the drop shadow blur to 0px and offset the X and Y together. Doing so mimics a 3D looking button with a bit of character to it.

Then you can then animate it accordingly to look like you are pushing a physical button.

Next, I created new icons and formed the rest of the text around Roboto.

The Homepage

Creating a good homepage can be really challenging. There’s a lot of debate on what the purpose of a home page should really be. Personally, I’ve always believed that a good homepage showcases the absolute best of a product and give users a clear direction to your most important pages or pieces of content.

The current homepage is quite dull. With only 3 sections, there is no support for any deeper content or further engagement. I would guess that almost all users immediately navigate to a different page within 5 seconds of landing.

This isn’t necessarily a big issue, but we want the brand to be more engaging and cultivate a more involved userbase. We need more appealing and interesting content right from the get-go.

Here’s the wireframe I am proposing.

The key points are a more interesting header, more bold styling for featured builds and guides, new sections for social media engagement, and some other tidying.

The Instagram page for PCPartPicker is in desperate need of updating and refreshing. With so much community content, you would think that it would be a plethora of great build photos, fun tips, custom cable sleeves, and product specials. Yet, their page seems to be completely dead. Even users are commenting and saying that “this page is dead.”

So I’m going to pretend that more energy is getting put behind it and that Instagram traffic is a vital part of building an online community.

Because of this, I added a basic Instagram feed and a call to action to follow PCPartPicker. More could be developed on this later. But I felt that it was necessary to point it out in the short-term.

With the final mockup, the goal was to cohesively tie the design elements together to create a more engaging space for content. That meant redesigning and restructuring some legacy sections, but also adding entirely new functionality throughout.

After I finished the original wireframe, I realized there was a tremendous opportunity to add a section for promoted or trending products. A promoted product could be on a cost-per-click basis and drive additional revenue for both parties. Or trending products could showcase the most popular products for the current week. So I dropped in a short “Hot Products” section just after the featured builds.

Navigation

I actually quite like the current nav. The biggest changes I made here were steering away from photos and shifting to vector illustrations to match the rest of the styling.

What was also completely missing was clear Log In and Create Account functions in the primary nav. They both exist, but are just basic links and don’t really draw any attention.

Getting customers to create accounts is proven to dramatically increase engagement and use across the board. The sooner you can get somebody to create an account, the more likely they are to come back. Registered users also have a significantly higher engagement rate through reviews, comments, and votes. We really need to emphasize this more! Instead of a simple link to Log In, both functions have solid buttons to drive more engagement.

Below is the updated navigation.

The Build Card

The build card is probably one of the most core components of the entire website. You see this used over and over again to represent links and summaries of various builds and guides.

Here is the current styling of the build cards.

The updated version of these will account for a few things:

1. Vertical styling for better mobile useability.
2. Portrait hero photo. A vast majority of hero shots for custom builds are of the computer’s case (more commonly known as the tower), and most cases are tall. Even though by default, the build card’s photo is landscape, a ton of users still take portrait photos and upload them as the hero shot. This is an example of users naturally steering in a different direction even though we try to persuade them otherwise. Instead, let’s just cater the design to their preference. The hero photos are a 3:4 ratio, similar to most iPhone and Android phones’ camera ratio.
3. CPU and GPU tags, the two most common highlights of any PC. And coincidentally, each brand has very distinct colors they prefer. So all Intel builds have a blue tag, AMD have red. This subtle change makes it super easy to sort through a massive list and see which processors they used without much effort or any filtering.

Here are the original wireframes and a few variations.

Product Browsing

This is where we get to the concept of Promoted Products. What I opted for here was a simple highlight color and an icon representing a promoted product.

By doing this, we can establish which products are promoted while still showing transparency with comparative pricing. Getting something like this up and running could be a huge revenue stream that is missing in the platform.

Product Filtering

Easily the most frustrating interface of the entire website as-is.

If you want to browse through products, there are dozens of filters that navigate the entire length of a page. It makes it incredibly frustrating to find the filter you want. When browsing motherboards, for example, you have to scroll almost 5 viewports deep to filter a motherboard to “include WiFi.”

This is now updated to a modal. And before you start raging at me with “you’re adding another click,” a modal also creates the opportunity for a brand new functionality that will dramatically help users and their product filters.

Below is the original wireframe.

With a modal, the filtering options can dynamically change depending on the filtering options available for the part. Additionally, it leaves a lot of room for instances where there are a few dozen filtering options.

Introducing Saved Filters

With the new filters modal, visitors can instantly see which filter they have active, quickly toggle between filter sets, and even save them to their account for future use.

For example, if you know that you want to build a Mini ITX Ryzen computer in the near future, you can create a set of filters that cater to all products to what you’re looking for with a single click.

If you’re a power user, you can even have multiple filters saved for the various types of builds you might be working on.

This new system also reduces page scrolling to virtually none.

Lastly, the modal will give you a preview of how many compatible products are estimated based on your filters. That way you don’t create a filter, save it, and then realize there are literally no products available with your filter.

Full Pages

The last big chunk of it all was making sure that full pages come together nicely. I updated or added new headers to various pages, updated the comment styling, shopping tables, and other common sections throughout.

There is also lots of room for a better hierarchy of information relevant to the various pages. For example, why not highlight some CPU and GPU specs to the completed builds? Or quick and simple metrics to individual components.

There’s a lot more that I would like to dive into. PC Part Picker is quite an in-depth website, and there are a lot of nooks and crannies that need to be addressed.

These static mockups are only a fraction of the entire process. From here, I would next use a tool like Framer or Adobe After Effects to model and prototype animations and transitions, put together workflows and processes to show how it all connects. So there’s a lot that still would need to be done.

For me personally, I find it really fun to take tools I admire and tinker around with making them better. It expands my ability, grows my understanding, and introduces me to lots of new people and ideas around the world of UX and design.

Speaking of which, please comment with your thoughts and feedback.

If you’re ever interested in building a computer for yourself, I can not express enough how helpful PC Part Picker has been for me. I already have plans for a new, more powerful, PC this holiday season as things go on sale.

Lastly, almost every single photo on this was free to use from Unsplash. Thanks to, Artiom, Shimray, Constant, Bantersnaps, and Hoovr for all the photos, and for making them free to use!