Mobile App for Streamlined PC building

Imagine Ikea for PCs but all you do is pick out the parts

What a concept, the power of a Swedish furniture Megacorporation but built for PCs, right in the palm of your hands.

The Problem:

Unless you’re some sort of a carpenter, building your dream piece of furniture with no instructions is unlikely to happen without sacrificing blood, sweat, and tears. Why then, would you expect any different when building your dream PC? Users could spend weeks researching on what parts they want or need for their PC build. Finding the best deals on the parts would then be the next hurdle before finally needing to assemble the entire PC on their own. A costly and time-consuming process.

The Objective:

As the aspiring UI/UX researcher & designer behind the project, my role was to conduct research to best design an app that streamlines the process of building a PC by consolidating the learning, shopping, and assembling of PC builds onto a single mobile app (PCsmith).

Research:

First would be to understand the user base and defining their needs, then learning the market and understanding potential competitors in order to learn and figure out how to exceed their strengths and dominate in areas where they fall short. The main competitors would be Microcenter, Newegg, and Khan Academy.

Defining User Needs:

  • PC building has a strict learning curve and options for learning are sparse and time consuming

  • Figuring out which computer parts are best for their needs is disorienting and certain parts are rare and become expensive due to scalping (individuals buying out rare parts and reselling for profit)

  • Users often getting discouraged and either paying someone else to build for them or buying a prebuilt, which are both expensive options.

Competitor’s Strengths & Weaknesses:

(Strengths)

  • Fairly simple for experienced users.

  • The main page lists every major part with options to choose between.

  • User control & freedom though is exceptional. *

(Weaknesses)

  • Inexperienced users won’t know where to start.

  • Error prevention is barebones.

  • Strengths become weaknesses for new users. *

(Strengths)

  • Trades a minimalistic design for a cluttered one. *

(Weaknesses)

  • Aside from those differences, the two sites approach heuristics for user interface design roughly the same. *

(Strengths)

  • Educational virtual brochure on computer parts and how to put them all together for your computer build.

  • Visibility Of System Status is superb.

  • Even if the material on the site is too difficult for a new user to digest there is a chat system in place for the user to ask questions or to look to see if anyone else had a similar issue.

  • Users can freely browse at their own pace and backtrack, if need be, giving the user much flow and freedom.

(Weaknesses)

  • Abundance of information does not directly translate to practicality.

  • Consumes time to learn.

  • No shop in place so users have to visit another source to find parts.

Design Process:

Sketches:

Very rough first sketch of what I wanted my app to look like, just to help me visualize something to get me started.

Brand Personality:

  • PCsmith has an inspiring purpose that goes beyond financial transactions and makes a real difference in people’s lives.

  • Rationale: I chose this personality because it is important that the brand have a genuine impact on the lives of customers. PCsmith is not just focused on the bottom line — this company cares about people.

Brand Attributes:

  • Exciting, sincere, trustworthy, effortless, caring

  • When a product is exciting, it has a higher rate of return users. When a product conveys a sense of sincerity, care, and trust people are more likely to manage their money with it. PC building can overwhelm and scare customers so the product experience must be effortless.

Alpha Prototype:

This is my first Figma draft for the app that I built. At this stage in my designs, I was trying my best to cater to a female audience but wasn’t sure how to make that happen.

Lo-fi Wireframing:

After finally talking to my mentor about my designs, he suggested that I rethink my design before asking me whether or not I could actually see myself using an app that looked like my prototype. My answer to his question, clearly from this Lo-fi wireframing redesign, was no.

Hi-fidelity Prototyping:

While still a minimum deliverable product, this is the final(?) product for the app before engineering would get involved.

(?)= A truly great app is never finished as it would continue to learn and adapt from the shifting needs of its user base.

Pilot User Study:

I conducted a commentary study with potential users with one of the versions of the High-Fidelity Prototype following with a posttest interview.

  • Test prep: I prepared tasks for users to conduct with the app prototype and follow up questions to help me answer the hypothesis I had for each feature.

  • Commentary testing: I suggested my users to complete the tasks I had laid out for them while giving commentary to their thought process as they browsed the app, writing down their observations.

  • Interview: I laid out the questions I had prepared for the users after their testing to gauge their understanding of the app from their test run and how the overall experience felt to them.

Results and Data Analysis:

After giving some users the chance to test out the app, they found that the app worked exactly the way it was intended despite only being a minimum deliverable product.

All participants felt

  • App would be useful if they desired to not only build a PC but would have fun browsing the app and connect with its potential community.

  • The interface was easy to use and understand.

  • Motivated to test the app and find out all its potential features.

After getting feedback on the prototype, I made small quality of life changes to the prototype. Users asked for quantity for parts in the shopping cart so user wouldn’t have to manually add items in one by one and differentiating between PC builds a profile has actually purchased V.S. the ones that were only concepts.

Reflection:

With the conclusion of this project, I feel like I finally have gotten a good sense of what UI/UX designing really entails. I understand now how important research really is and what it means to create a product that thinks of its users. Designing felt like such a daunting task when I first began, but now I understand the process as I have experienced firsthand the beginning to end process of designing.

Despite not being able to turn this app into a real functioning product with all of its features turned into reality through engineering, I am extremely satisfied with the work I have been able to accomplish.


Test The High-Fidelity Prototype Yourself!