
HandsOnPC
UI/UX Design

HandsOnPC
UX/UI Design
To empower and educate users by delivering a customizable PC experience
HandsOnPC was created to guide beginners through the process of building a gaming PC by providing custom part recommendations and a step-by-step assembly guide. This app aims to be a one-stop-shop for all things related to custom PCs - making it easy for users to access up-to-date information and community support.
This project is fictional and was created for my senior project at Centennial College.
Role:
Product Designer
UX/UI Designer
UX Researcher
Team:
Shobhith Sridhar
FangChia Ho
conception
Gaming PCs allow users to customize and upgrade parts in their computers, allowing them to constantly stay on top of video game technology. Building your own PC allows you to control the final outcome and is a lot more cost efficient.
The concept came from my own personal struggles with a DIY PC. Around a year ago, I decided to build a gaming PC. While I managed to walk out relatively unscathed with a working unit, it was not an easy task with months of research and planning. With this in mind, I planned to explore a way to simplify that process and help others feel confident with their decisions.
Problem 1:
For beginners, researching and building PCs is time consuming.
While there are resources available tor DIY PCs, they cater towards experienced users After speaking to a few individuals, many voiced that they were overwhelmed with the information available and were confused about where to start.
Problem 2:
DIY PC resources that exist are not catered towards beginners. Many are unsure on how and where to start the process.
the design process

research
Primary research was conducted to identify user pain points and gain insight into their current process and experience with it.
individual interviews
We conducted three interviews with participants who have undergone the process of building a gaming PC or are currently interested in the process. Open-ended questions were used to get a better view of the user, and participants were asked to outline their current processes to help identify pain points.
The results of user processes were documented in a user journey map to help illustrate where pain points occur at which stage.

Secondary research was initially conducted to gather insight on the current PC market to help validate the need for the application and narrow down target users.
public statistics
Market data was found on Statista and helps give an overview of current trends and consumer behaviours.
online articles/forums
Articles and forums were from popular sources (as outlined in user interviews and Statista) for gaming and technology.
user profiles & personas
Based off research and user interviews, we identified the following users:

Based off our user profiles, following personas were created. Each represent one type of user and helps us identify goals and pain points to be solved.


Information Architecture
Before beginning wireframes, we mapped out a user’s overall experience based off our research. The flow chart helps visualize the overall structure of the application.

wireframes
Once the user flow was finalized, I created digital wireframes. The wireframes underwent regular testing with users and colleagues.

visual design
The following style guide was created with the character/logo being the central focus. The goal was to achieve a dynamic and exciting appearance, while maintaining a friendly and approachable tone.


the solution
questionnaire
With so many PC parts and specs to choose from, users often get overwhelmed making decisions. To solve this issue, a questionnaire was created to identify what exactly users need.

custom parts list
Upon answering the questionnaire, users will be provided a recommended parts list based off their budget and use.
Users have the option to learn about specific parts. This feature is helpful for those who wish to better understand what is being recommended and may help with upgrades and troubleshooting down the road.

assembly list
Users will be guided through the building phase with step-by-step instructions and images. To provide freedom and control, users have the option to navigate through stages via a drop-down menu. In addition, instructions are collapsible so users can better track which step they are on and/or control what they see.
