EZ PC Builder

A PC building simulator to empower beginners and show them the components may not be as complicated as it seems.

Overview

MY ROLE

UX/UI and Product Designer

TIMELINE

February 2020 — April 2020

PLATFORM

Wep App

EZ PC is a user-friendly and educational PC-building simulator that caters specifically to individuals with little to no knowledge of computer technology. The simulator features an intuitive interface, allowing users to click and drag components into place while providing detailed descriptions of each part's function and purpose.

With a particular focus on gaming PC building, EZ PC presents a step-by-step guide to the essential components necessary for building a high-performance machine. The goal of EZ PC is to empower individuals with no technical experience to understand the components of its system by providing a guided and easy-to-understand experience.

My Creative Process 

Research    /    Plan    /    Design    /    Iterate    /    Test

Objective

Introduce newcomers into the PC community

Through the simulation, I want to offer an approachable starting point for those new to PC building. I aim to make them feel comfortable and ensure they have the tools to start navigating this space efficiently. 

By teaching users the basics in a digestible way, we can ultimately increase their confidence and involvement in the community. With a welcoming and inclusive educational tool, it will ease the tensions of building a PC and encourage more people to pursue their interests in computer technology.

Many people who have successfully built PCs often compare them to fancy legos. Using this metaphor as a guide can help bridge the disconnect between something complex and intricate as a computer part to something as simple as a lego. 

Plan

Opportunities

With the growth of the gaming industry, more people are turning to PC gaming, creating a demand for tools that enable them to build custom gaming computers.

Budget-conscious individuals can learn to build their gaming computer and what parts to get, which is typically more cost-effective than purchasing a pre-built one. 

With technology advancing at an ever-increasing pace, it can be hard for beginners to keep up, we can help to break down complex concepts and make them more accessible.

Plan

Goals

Simplify the PC building experience with easy-to-understand instructions, user-friendly features, and digestible language that cater to beginners.

An app that serves as a reusable resource and educational tool for individuals who want to learn how to build a PC, with accessible information that can be used repeatedly.

Encourage growth and innovation within the PC gaming community, by promoting education and providing resources that allow individuals to build and experiment with their own customized PC systems.

Solution

Teaching just the essentials

I intend to provide an educational experience for beginners that focuses on learning the essential parts and components of building a PC, along with their purpose and placement within the computer. As beginners, users may not have much prior knowledge or experience with PC building. Introducing too much technical information or overwhelming them with details can be discouraging and intimidating. The experience should be an immersive experience that simplifies the components and building process. By breaking down complex concepts into digestible and easily comprehensible components, users will feel more confident and empowered to build their PC; by the end, the PC parts should look as simple as lego pieces. 

Research

Education Sources

In order to create an effective educational tool, I made sure to educate myself first. I wanted to ensure that the information I provide is not only accurate, but also easily understood by users who may not be familiar with the technical jargon. To do this, I researched extensively and gathered information from reputable sources, so that I can present it in a way that is approachable and user-friendly.

Research

Competetive Analysis

PC Building Simulator

PROS

1. Probably as close to real building as you can get with a simulation
2. It is spotless and is very informative visually and contextually
3. You get a wide selection of actual brands to try out
4. Teaches even “novices” to fully put a PC together step-by-step

CONS

1. It is still much more complex than I want mine to be
2. There are more components than just building the PC itself, like making your funds
3. It is structured towards beginners, but I also want to consider very young people as well
4. It looks very realistic and intimidating
5. You have to pay for it!

ChooseMyPC.net

PROS

1. Shows information on the products: like their specs and prices
2. Generates PC builds/list of parts based on preferences
3. It shows a breakdown of each part that you need

CONS

1. While it shows each part, it doesn’t explain it’s a base function
2. Not all parts have a description; they are put in manually
3. Is a part generator and does not show how to construct
4. Only gives a list view of components; you cannot see the parts fully

Audience

Use Cases

People who want to build a PC for the first time

Students in introductory tech classes across different grades

Those interested in learning the basic anatomy of a PC

Design

Sketches

Creating concept sketches was essential for me to visualize and plan the layout of the website's components. Through sketching, I experimented with different ideas and got a better sense of how to structure the information. The sketches were a valuable tool for me to efficiently and effectively plan the website's design.

Design Thinking

Userflows

To ensure that the website is organized and easy to navigate, it was essential to plan out the course of interactions for the user. I strived for the assembly flow itself to be straightforward so the user could digest the information as simply as possible. While the interactions are repetitive, they make it simple for the user to understand and repeat. I did not want to challenge the user with this tool, but rather create a resource they could continuously reference efficiently. 

Design

V1 Wireframes

Home Page

For the home page to be as simple as possible, it has just one call to action and a primary navigation consisting of two buttons. The main call to action will be a "Start" button to get the users into the assembly tutorial quickly. The options in the navigation will be "Assemble" and "Walkthrough," which will be two methods of teaching the same material to appeal to different ways users may digest information.

Home Page Wireframes

Assembly Page

This is where the user will click and drag the PC parts into the case and motherboard. Here users can interact with a 3D render of the part as well as learn about its function, directions of placement, and importance. 

1. Navigation
2. PC Part selection container
3. PC Part render
4. Assembly step indicator (Step 1 or 2)
5. Assembly step label
6. 360 rotation button for 3D render
7. PC Part info card
8. Next button
9. Selected part state

Home Page Wireframes

Walkthrough

The walkthrough will have content that is similar to the assembly module, except users will just go through a step-by-step interactive narrative of how to piece together the PC rather than using the building module. 

Home Page Wireframes

Design

Inspiration Boards

These inspiration boards helped me define the tone I wanted to establish with the app. From the palettes to the visual asset approach, each of these boards catered to two different emotions: comfort and excitement. I felt both methods would benefit an education tool like this, especially one we want to feel inviting and engaging. After much thought, I found that the sweet and comfortable board would be the best approach for the site to create a safe space for users to learn comfortably. 

Design

Style Board

Creating concept sketches was an essential step for me to visualize and plan the layout of the website's components. Through sketching, I was able to experiment with different ideas and get a better sense of how to structure the information. The sketches served as a valuable tool for me to efficiently and effectively plan the design of the website.

Design

3D Models

To get the design comps to a presentable stage, it was essential to have the actual PC part models ready. So over the span of a few weeks, I modeled and rendered animations of all the essential parts a motherboard and  PC would need. As you can see, my "Sweet" inspiration board heavily influenced the visual direction of these parts. I wanted them to feel approachable and straightforward. Many of these parts specifically are designed after part models I own, but I also tried to make them agnostic and not learn towards any specific brands.

Design

Design Comps

Thorough preparation and extensive research were essential in ensuring a successful design process. By gaining a deep understanding of the user needs and experience, I was able to streamline the design process, resulting in thoughtfully crafted design compositions that aligned with my initial vision. Ultimately, my preparation and research paved the way for a smooth and straightforward design process.

Design

Home Page

With my initial designs I planned on having a center-aligned landing page, to direct the users immediately to the assembly flow. But I found it important to provide some context on what the app is and how it works, so I followed an F-pattern for the content, and pushed the hero image to the right. Overall I wanted to keep the interface clean and engaging. 

Home Page

Motherboard Assembly — With card details

Design

Assemble: Motherboard

The motherboard assembles page is a pretty much a direct translation from the initial sketches and wireframes. With the assemble module particularly, I had a specific vision for how it would look and interact. Some new things I did have to consider were hover state and selected state interactions and how users could go back and forth from their selection.

Design

Part Selection

When the user selects a part, they get a detailed 3D view that can be rotated 360° in any direction. They then get a detailed summary of the part from function, and placement, to importance. When the user selects the back button, they are sent back to the main view, where they can place the part. Each component of the motherboard that can have a part placed will have hover states with correlating colors and shapes to the part. This is to hopefully include users to build a color association and quickly understand what goes where. 

Select part: CPU (First click view)

Select part: CPU (Clicked back, placement hover state)

Design

Assemble: PC Case

The PC assembly page has the same interaction and functionality as the motherboard page, it just includes different parts that are required for a computer Just like the previous module the model of the parts can be rotated, so users can see exactly where parts are being placed. 

Design

Walkthrough

The walkthrough module didn't change much from the wireframes, aside from removing the correlating icons at the bottom of the description card. I wanted to remove distractions and keep the content simple and similar to the assemble flow. This also helped establish consistency between the modules.  

Test

Protoype

It was important to get the interactions as close to my visions as possible for the prototype. So including in-depth hover states was a must. Throughout the prototype, you can get an idea of how the modules will move and the parts will be placed.

Reflection

Adapting during a difficult and unpredictable time

This project has undoubtedly been an insightful journey. At the outset, I was brimming with excitement and ambitious ideas. My initial plan involved incorporating extensive 3D modeling, which ended up being a significant time investment that left me with limited time to focus on the visual aspects of the website. Additionally, adjusting to the sudden shift from traditional to online learning due to covid was a significant challenge, and I had to make the most of my available time. Despite these hardships, I am happy with the direction of the project and the fidelity of the 3D models.

However, I do feel I missed valuable opportunities for critique and feedback on my interface. The abrupt transition to online schooling has made me aware of the importance of in-person collaboration and critique sessions, which can bring new perspectives and help identify improvement areas. I am eager to receive more feedback and critique on my design, as I believe that the input of others is crucial in refining and improving my interfaces.

Let's chat!

Rochester, NY

hochristina98@gmail.com

Resume

© Christina Ho 2023