PC Builder - Mobile App

Introduction

PC Builder is a mobile app I designed during my week at General Assembly. It lets users easily and quickly pick parts to build a PC. I've always wanted to work on a problem that related to my passion for PC gaming, and this seemed like the best idea at the time.

The Problem

I noticed that there was a high barrier to entry to PC building; there are a lot of people who enjoy playing PC games, but are not necessarily familiar or knowledgeable with PC building, and therefore end up buying very expensive prebuilt computers. This is not a small problem; in 2015, the PC gaming market reported a $32 billion revenue, an increase over the past years, surpassing the revenue of mobile ($25 billion). So, in short: There's an opportunity here.

The Interviews

To solidify my findings, I had an interview with 4 people, as well sent out a survey with 19 respondents. I asked about their PC gaming habits, and how familiar they are with PC building and part picking. After sorting through the interviews and survey responses, I was able to come up with an affinity map that identified the key pain points.

The Persona and Hero Flow

I created a persona based on the problems I found from the surveys and interviews. The persona would help me answer some key questions about the needs and goals of my user, as well as help me visualize who he is. I also created a hero flow to figure out the best way for my persona Sam to navigate through the app that I thought would help solve his needs.

First, I did some quick paper prototyping to test concepts of my app, and did hallway testing to confirm whether or not certain features and UI elements made sense. I used POP app to make an interactive prototype (which has now been acquired by Marvel).

You can view the paper prototype by clicking here.

The Wireframe Prototype

Finally, after some improvements were made to the paper prototype, I set to work on the wireframes. The goal was to establish something that had higher fidelity than the paper prototype, but not as much fidelity as a visual design. I used Balsamiq Mockups to create these wireframes.

The Final Visual Prototype

After testing the wireframe prototype and getting feedback from users, I applied the things I learned from that to the visual prototype, which was the high fidelity mockup of the app.