Background
Note: I highly recommend reading about the previous version of this application here.
NZXT is a PC hardware company that makes computer cases, cooling components, and power supplies, among other things. They wanted to expand beyond just hardware, and decided to branch into software by releasing CAM in Spring 2014, a PC hardware monitoring application that would display your PC's vitals, such as video card temperatures and CPU loads.
After the release of CAM v2.0 in Spring 2015 (which I helped with the requirements and designed fully from UX to art direction), we felt that we could push the boundaries and visual representations of CAM even further. The stakeholders wanted something that would wow people; something that was extremely visually pleasing and made people feel like they were using a web app for monitoring their PC.
After the release of CAM v2.0 in Spring 2015 (which I helped with the requirements and designed fully from UX to art direction), we felt that we could push the boundaries and visual representations of CAM even further. The stakeholders wanted something that would wow people; something that was extremely visually pleasing and made people feel like they were using a web app for monitoring their PC.
I set to work on this. We gathered feedback from our user base to figure out why they weren't coming back to CAM, or what they loved/hated about it. From there, we assessed what we could use for the new platform, and what changes needed to be made.
Sketches
I spent some time sketching out possible directions for this redesign. I wanted to make sure the information layout made sense to our users; that it was solving a problem that they currently had (not being able to view enough at a time), while pleasing the stakeholders in their visual wishlist (wanting the app to look more modern and clean).
I used markers, tracing paper and gridline paper to sketch and make iterations.
Wireframes
After sketches came the wireframes. I translated the sketch into wireframes for the entire app, in Illustrator. In the example below, I used the old design as a way to compare and contrast the size and the layout of the information.
Final Interface Design
This was the design I ended up with. A brand designer rebranded the app and now the colors and logo are different, but the user interface remains exactly the same.
HUE+ Lighting Control
In addition to monitoring your PC's hardware, CAM also served a function as a software controller for NZXT components. The example below is for their custom RGB LED lighting kit called HUE+. Users can program each LED to behave differently, or can sync the LED colors with interesting visual effects.
GPU Overclock
I also designed the UI that would control a lot of the hardware NZXT makes, including KRAKEN and GRID+, both a form of fan control. In the example below, I designed the interface for overclocking a graphics card from CAM.
CAM Tutorial
As part of improving the user experience for CAM and making sure we can onboard as many users as possible, we incorporated a first-time walkthrough for new users.
UI Patterns
Conclusion
CAM 3.0 was launched in January 2016 at CES. The response has been overwhelmingly positive, even more so than CAM 2.0's reception. Our active accounts are at an all-time high. We increased user accounts and activity by a magnitude with this redesign. It even recently made the front page of Reddit's PCMasterRace, hailed as one of the best PC monitoring apps the user had ever used.
