Tweakers PC Builder
Helping Tweakers users pick compatible and powerful PC components for the right price within a streamlined tool.
Overview
I led the end-to-end design of a PC building tool for Tweakers, the Netherlands' largest tech community, for my capstone project, collaborating with users and stakeholders to create Figma wireframes and validate with a hand-coded prototype.
Problem
Tweakers users love building PCs, but finding the best-value components can be tricky.
What if we could help them avoid mistakes and ensure they get the most bang for their buck?
Process
Identifying PC building painpoints
To understand how Tweakers users build PCs, I reached out and interviewed five users while also inviting thousands of Tweakers visitors to complete a survey.
Interviews
Even experienced PC builders make mistakes. Each user had made a mistake at some point building their PC, and the frustrating consequences thereof, such as lengthy return processes.
“...it turned out the component was too small — it was meant for a small form factor PC.”
Surveys
I also learned a lot about what users think about when choosing components, price and performance were two key words came up a lot in the interviews, and the survey confirmed that a staggering 64.7% of Tweakers users prioritize price-performance over all else.
Analyzing other tools
In addition to user research, I analyzed other tools, I saw a great amount of inspiration, but also areas where our tool could offer a better user experience.
PCPartPicker
PCPartPicker does a great job giving feedback on user error. But the user experience was disjointed and lacked oversight, with the overview and different components spread out over multiple pages.
Newegg
On Newegg, the tool took the form of a drawer on the side, allowing the user to browse components while keeping track of their build—all in one screen.
Defining key requirements
Ensure compatibility of the eight core PC components so that users can't make any mistakes building their PC.
Inform users of key information such as price and performance, enabling users to choose parts with the best value for their needs.
Retain the overview of the PC build and provide a coherent component browsing experience for our users.
Design
Initial wireframe
First Figma iteration
Final design
Feedback and iteration
I built a prototype using HTML, CSS and Javascript and got to usability testing, quickly finding low hanging fruit to iterate on, and gauging the impressions of users.
Findings
The tool was collapsed by default, significantly hurting its discoverability; participants would not even open the tool unprompted.
The tool didn't prevent user error, but would only warn the user after making an incompatible choice.
The tool didn't provide the participants with a next step after an error was made.
Iteration
Back to the drawing board, I sketched several ways to improve feed forward and feedback in the tool, as well as provide users a clear way to remedy potential errors. For the discoverability, I changed the tool to be expanded on default, instead of collapsed.
Feedback
Checking in with stakeholders, they stressed that they always want to be able to see and pick all parts—so instead of hiding or disabling incompatible components, the users will keep full control, and they'll instead be warned in advance.
User satisfaction
The tool performed noticeable better in the follow-up test. The tool was easily discovered and users were quick to use it to assemble the PCs for their scenarios without error.
“The tool provides clear information, is easy to use, matches Tweakers' style, and worked smoothly without any clutter or distractions.”
Reflection
This was an invaluable experience as a real-world, end-to-end design project and I'm thankful to Tweakers for the opportunity. Hopefully the tool will indeed be implemented one day but I have to admit that it would require a lot of buy-in and effort to overcome technical contraints.
If time had permitted it I would've liked to dive deeper into and learn more about justifying the viability of the concept to stakeholders, especially from a business standpoint.
I also would've liked to expand the scope of the tool and explore more user journeys, for example envisioning of what comes after a user saves their component list, as that has unfortunately been left open ended.
“...Lastly, the final version of the prototype Arthur leaves us with, and the list of next steps he has devised, together represent the first major milestone towards delivering the PC Builder feature to all Tweakers users. The handover is in fact so complete, that our development team is eager to get started on implementation before our product managers have even calculated its commercial viability.”