Introduction
NZXT is a PC hardware company that makes computer cases, cooling components, and power supplies, among other things. Beyond being just a PC hardware company though, NZXT really cares about their PC-loving user base and is always thinking of ways to help make the lives of PC users easier.
In Spring 2014, NZXT released a proof of concept: a more simplified PC hardware monitoring application called CAM. Current software in the same market was often cumbersome to use, and/or overwhelmed less experienced users with its abundance of information, often times turning them away from truly caring about their PC's health. CAM sought to provide a more aesthetically-pleasing alternative, while being extremely easy to use.
A SWOT analysis was performed to determine how to improve upon the first version of CAM.
Defining The Problem
The first version had positive response, but it was also designed without a proper UX process in place. Although it was simple in the sense that it displayed your GPU and CPU's temperatures and load, it was still very cumbersome to navigate and find things. Certain sections were squeezed in not because it made sense to, but because of the lack of space.
I was then brought on to spearhead an effort to re-assess, redesign, and relaunch a second version of CAM--this time with some well thought-out UX processes in place. I was solely responsible, from concept to final designs, for the entire design of CAM v. 2.0.
UX Process
Even though I come specifically from a web background, and even though this product was a desktop software for windows, I felt that I could apply a lot of the same processes that go into web design, into the UI design for this software.
First, we needed to understand who we were targeting. We spent a little bit of time hashing out very high level, very basic proto-personas of the types of users we were targeting.
Below, you can see our whiteboarding session, as well as the notes I later transcribed into my notebook for posterity (that whiteboard marker really needed to be replaced!).
The next step was to assess the content of our product. CAM's information is quite complicated and is is not for the faint of heart PC user. I wanted to get opinions from different types of PC users on how they felt the information should be organized, via card sorting. I surveyed users of varying degrees of PC expertise, ranging from level 1 ("I know that CPU and GPU are important, but that's about it") to level 10 ("I mod my PC and am a veteran in water cooling").
A total of 35 users ended up participating in this exercise.
After analyzing the results, I was able to figure out what the information architecture might look like, and created a sitemap. The sitemap can be seen in the photo below (I unfortunately lost the digital copy of this artifact).
I used the product manager's biblical-like PRD and my freshly created sitemap to help inform my sketches.
I spent a few months on the wire-framing process, from sketch to Balsamiq. I had a few concepts that I started off with for the wireframes, and would frequently consult with the product manager and the CEO on which direction we would use.
After presenting a number of sketches with different directions, the team agreed upon a specific direction, and from there I translated the sketches into wireframes in Balsamiq.
Visual Design Phase
We wanted to truly make CAM feel like it belonged to the user, so I needed to account for areas of customization. We also wanted to make sure that this software was beginner friendly but had enough of a bite for an advance user to stick around. The art direction I went with was a more clean, modern look that was modular in nature and had a lot of white space to give the numbers more emphasis.
A select few designs are shown below, but I designed every single aspect of this app, including the liquid states of the application (e.g. when the user resizes the software window).
The Basic view of CAM. Displays only the important information that a novice PC user would need to know. The screenshot includes support for NZXT's components, KRAKEN and GRID+.
The Advanced view expanded. This section includes more stats about the PC's components, including real time and historical data.
The Specification section of CAM. This is where users can see their PC's components in great detail. The Advanced section shows even more specifications about the user's components.
Click to view a larger version. I made sure the design could be responsive, depending on how the users resized the application. I provided the breakpoints to the developers so they could incorporate it in the final implementation of the design.
Users can customize the interface's header image and accent color, truly making the software their own.
Conclusion
We launched CAM v 2.0 in April 2015 to overwhelmingly positive feedback. Many users liked the new CAM, and felt that UI/UX direction made CAM even better for them than before. We are also seeing beginner-level users using CAM because of Basic's simplicity.