What Hardware

Overview

What hardware is a website I ideated, designed, and coded form start to production. This site was created to help both novice and experienced computer users make informed purchasing decisions when it comes to choosing the ideal PC hardware based on their specific needs.

What Hardware aggregates hardware data metrics such as specifications, performance benchmarks, and up-to-date price information to help users easily find the Ideal PC components. Users can parse through our extensive PC hardware data via the filter functionality to the components that meet their requirements.

Duration

Nov 2022 - On going

Role

UX researcher, UX designer, UX writer, Project manager, Developer, and Server Administrator

Problem

Figure out how to design a web app that helps users identify and purchase the ideal computer hardware for their needs in a rapid, easy, and intuitive manor.

Solution

Design a web app that utilizes a large database of various PC hardware data metrics to generate and automate accurate informative content that can easily be maintained on the backend while users can easily find the ideal hardware via an intuitive yet elegant frontend.

Step 1: Empathize

The first step in the design process was to empathize and better understand the user requirements of What Hardware. Therefore, I conducted initial base research in addition to acquiring both quantitively and qualitive data relevant to PC hardware.

I also conducted competitor analysis to better understand and compare their strengths and weaknesses. This allowed me to understand what new features could be implemented to give this product a competitive edge as well as key product features from those competitor that needed to be incorporated with What Hardware.

Step 2: Define

The second step in the design process was to synthesize the data and insights gathered from the empathize phase. I first determined the priority of which PC hardware section would be implemented first. I concluded that the CPU hardware section would be designed first, followed by the GPU and motherboard sections later.

I determined what datasets were needed to be included in the database to ultimately allow the frontend to function smoothly and present all the CPU information required to make an informed purchasing decision. I also identified the key feature sets to be implemented and constructed a sitemap to define the initial categories and pages of What Hardware.

Sitemap

Step 3: Conceptualize

The third step in the design process was to start conceptualizing the overall functionality of What Hardware. I drew insights from the previously collected data, sitemap, and initial sketches to determine how the CPU data would be utilized and presented to the end user on the frontend in an effective manor that aims to accomplish the app’s goal. Below are the final wireframes I created as a result of this process.

Wireframes

CPU Wireframes

Step 4: Prototype

The fourth step in the design process was to start prototyping. This step was fairly straightforward as I already had several elegant and professional yet highly functional design ideas to implement.

Lo-Fi Prototype

For the lo-fi prototype, I chose a sleek and professional font called Source Sans Pro that seem to fit the overall design layout. Considering the core user objective of easily finding the ideal hardware (in this case CPU), I ensured that users could accomplish this task seamlessly via the use case and filter sections. The results of their filter inputs when submitted would then be updated and seen below the filters.

Additionally, I designed the CPU detail page, to allow users to further gain a deeper understand of the specific CPU they are interested in purchasing. I also gave users a visual representation of the specific CPU’s specs, performance, benchmarks, pricing information (historical and present), and other pertinent information. Lastly, I made sure other aspects off the design such as navigation was intuitive and also included tool tips to better guide users through the process of finding their Ideal CPU.

CPU Lo-Fi Prototype

Hi-Fi Prototype

After final testing of the lo-fi porotype, I then moved forward with creating the high fidelity prototype. The visual design I decided to implement is one that is beautiful, elegant, yet more importantly intuitive and functional.

CPU Hi-Fi Prototype

CPU Hi-Fi Prototype Dark Mode

Step 5: Test and Iterate

The final step of the design process was to continually test and iterate on the hi-fi prototype till it was optimal for development and eventually production. Feedback obtained from the usability tests was taken into account when iterating on the final design to ensure that users have a smooth and excellent experience with no pain points when navigating What Hardware. The live site can be viewed below.

View Live Website

Final Thoughts

Ideating, designing, coding, and pushing this project to production by myself from scratch was slightly challenging yet quite rewarding. Specifically during the design phase, I learned to be flexible in finding different ways of solving problems and potential user pain points. Prioritization of the key features and functionalities was also essential. Once the emphasize and define steps of the design process where completed, conceptualizing and prototyping where fairly straightforward.

Moreover, I learned a lot from the developer’s point of view when coding this project. In terms of understanding how a design will translate into code and the nuances of doing so properly. Overall, this project taught me a lot about not just the design aspect, but also the role of everyone involved in the process of developing a digital product from ideation to production.