Ironside Computers – Work In Progress

Home / Client Spotlight / Ironside Computers – Work In Progress

Over the last few months Huemor has teamed up with Ironside Computers, a provider of some badass custom gaming PCs, to improve their online presence and the entire PC building process. We’ve been focusing on creating an aesthetic full of various textures and unique elements to help Ironside stand out in their industry.

Offering customizable pre-built PCs for the novice and ground up customization, Ironside has something for a range of gamers and everyday consumers who are looking for a powerful home or enterprise level PC. Building a custom PC can be intimidating to a novice, so let Ironside do the hard work. Pick the your parts and they will take care of the rest.

Unlike their competitors, Ironside Computers has a focused lineup with almost limitless combinations of hardware, peripherals and more. They were looking for a website that was unlike others. It shouldn’t look like a mail circular jammed into the web. It should be an immersive experience that educates the user on the product and allows them to customize, all without being overwhelmed.

Here are some bits and pieces of the project along the way.


Home Page Strategy

The home page was intended to be concise. Too many PC sites show you every machine with every spec right away. That is great for someone who knows what every term and metric means, but to the novice this can be very intimidating. We opted to include only what was necessary. At the top, a promotional banner to highlight something new, beneath that the two offerings. A user can easily identify if they want to start with Ironsides’ Signature series, that allow you to change core components or to start totally from scratch.



Vertical or Horizontal?

When determining the navigation structure, iteration was key. We went back and forth between a vertical and more traditional horizontal navigation(seen above). Ultimately we choose a horizontal navigation as it allowed us to utilize the artwork better.



An Immersive Overview

Offering a unique line of easily six customizable PCs for both novices and advanced users, we were challenged to create an immersive display that shows off illustrations for each computer, case colors available, pricing and specs that a user could easily compare. We tried out both a single column and two column layout. The single column layout created a more impactful visual by showing the custom art work associated with each computer’s hero. It also places the information in a consistent location, removing the need to scan back and forth to read information.



All the Colors

A problem we had to solve for was what colors the computers were available in. The previous site showed different cases for each tier of a specific PC. This caused confusion as users were unsure if cases were tier specific, which in turn meant they would have to shell out more money to upgrade. That assumption was wrong. To combat this, the case is treated as a slider, with clickable color swatches see the available options.



A Different Kind of Product Page

Stepping away from a traditional product page, we want to create a layout that does more than show a product, but also have a narrative. Each Ironside PC will have its own Lore, a story about a fictional hero figure which the computers are based on.
Beyond the narrative aspect, there’s also an explainer video and specs broken out (not shown in this screen).



Highlighting the Specs

Our aim is to blend an aesthetic that incorporates a heavy use of texture while also including more sleek and minimal pieces.



Button, button who’s got the button?

Not all buttons are the same, the Lore button needed to be unique from the other buttons. It’s the entry to the backstory of each PC’s hero. Using various PC games as a reference, we ended up with color buttons paired with a nice serif…though this was soon replaced with an even more unique button styling.


Button Reference Images


Quit Waiting. Use Our Project Calculator


No comments found

Leave a Reply

Your email address will not be published. Required fields are marked *