DailyUI 033 – Customize Product

The Street Fighter hype continues. A common thing for competitive fighting game players is to customise their arcade sticks to make it their own. These are expensive pieces of hardware, so they’re going to stick around for a while. So why not make it look like you want? Most options are very much manual, you need to buy the pieces and put it back together yourself. There are some services that do it for you, but none of the manufacturers themselves offer a service like this to my knowledge. But what if they did? Let’s take a look…

Here we have the Madcatz Tournament Edition S+ arcade stick in the Street Fighter 5 flavour. It’s a fairly slick design, simple and clean. But here I’ve put out 5 possible parts for customising; colour palette, cover design, button colours, joystick colour and the plastic trim. On the right side you have expandable menus with the different colour palettes. To keep it simple, the colour options are two toned like how the base one is. So I added the base palette, a gold & white and 3 based on Street Fighter characters.

On the left side you have the image of the stick itself, this would be dynamically updated. Covering the image are 5 dots that indicate the parts that are customisable and which one you’re changing at the moment, giving you a pop-up of the style you’ve chosen to make it easier to see. Beneath the image there are zoom buttons to take a closer look, and of course an add to cart button for check out. I also noticed the plus in the second zoom button is slightly off-center. Bah.

In between the two segments there’s a favourite button, to let the user save the design they’ve made for later use, just in case they’re not ready to check out just yet. The pricing is also not reflecting what the actual price is of the stick, but I figured since it’s customised it would be slightly more expensive.

Colour choices are red from the Madcatz logo and a bright yellow. The yellow was at first the gold from the image of the stick, but I felt it was too dark so I brightened it up. Fonts are Avenir Condensed in different flavours.