Product Design Case Study - Overclocking (HP OMEN)

Project Summary

Client: HP, Inc.

Project Completion Date: 2018

Role: Product Designer

Problem: Overclocking computer hardware is a complicated task is typically a turn off for casual desktop/laptop users. It’s only appealing to a narrow audience.

Goal: HMW make overclocking approachable and less daunting for casual gaming laptop/desktop users.

Intended Users: Casual and hardcore PC gamers

HP OMEN is a suite of devices that are marketed to casual and hardcore gamers. I was one of two Product Designers on the OMEN Command Center product. This is an application pre-installed on all OMEN desktops and laptops that manages computer settings, such as monitoring system vitals and RGB lighting. Some of the products that launched with the first version of OMEN Command Center were also HP’s first products capable of overclocking.

Overclocking is only performed by advanced desktop and laptop users. It allows users to boost computer processing power above the factory default, at the cost of hardware stability. HP is marketing these products to gamers who want a way to improve the processing performance of their games.

Overclocking features are quite standard across the industry, so my task as product designer was to build a design for our unique user while solving the problem of making the process over-complicated.

Research and Sketches

From my competitive research, I learned that there is a subculture of Internet overclockers that show off their high-performing computer processors. To me, this reinforced the gamer-mindset of those users, which guided me on OMEN’s design direction to be appealing to gamers.

In earlier sketches, I received internal feedback that it was hard to understand which steps to take to overclock. In order to achieve the golden UX path, I separated the page into three horizontal sections: Benchmark Action Bar, Graph, and Overclocking Functions (with a primary action bar at the bottom of the page). This was still difficult for users to understand, especially those that have never overclocked before. The PM and I agreed on the Tutorial route, which received positive feedback and a higher success rate in the user testing stage.

How much is too much hand-holding?

In my experience, full-page modals and heavy use of disabled states can disrupt the user’s flow. Over-usage of tooltips and coachmarks can not only be distracting but can make the user feel like they’re being talked-down to. The big reason why we went with a heavy hand-holding tutorial is because there is an element of danger with this product feature. One wrong step can cause the user to physically damage their computer. In the end, the heavier tutorial was favored over a light tutorial in A/B testing.

Final Walkthrough

Impact and Learnings

This project was completed in 2018. Looking back on it, there are some definite UI and UX improvements I would make as a senior designer today. Some users thought the empty state in the graph section was actual data, since it appeared to them that the graph was filled in. I would improve this by hiding the “fake” data points after the first benchmark is run. I would also improve on visual hierarchy, since the alternating horizontal blocks of grey didn’t properly inform the user which tasks should be done in which order. Finally, I would have followed up more on user-testing post launch, to see how this design could be improved on if there were a v2. In conclusion, this design allowed users novice and expert alike to learn a new technology.