Minor Setbacks

I’m happy with the new UI updates, although they took longer to finalize than I had hoped. Luckily this week’s focus was light on purpose, as it’s really just an extension of the cart/order architecture, so I should be able to do pull them together at the same time.

Last night I also made the decision to only do a soft launch (no advertising) at the end of the project, as I won’t have enough back stock to fulfill a sudden surge of orders. I also may need to build an automated build time estimate for blasters as I can only wire and assemble them so quickly. I don’t anticipate a ton of orders day 1 but, I’d rather be prepared, and it’ll help in the long run as well.

Regular Products Exist In addition to the customizable blasters, I now have components and structures for regular products and their variants. Still fleshing out the detail pages for them, but I’ve been having fun playing with the positioning/colors of them so far.

They use a smaller version of the customizer component that renders one frame and stops to alleviate GPU pressure, and then once the details are expanded I can re-enable their rendering so that I can have them change colors and such as needed.

Derailment

I’m not happy with the overall layout of the shop, I think that hiding products behind arrows with no sense of what’s next or how many exist is not great, and downplays the products I’m trying to feature.

I’m going to take a few more days to experiment on the UI, I’m not particularly concerned with the effort required for the actual shop logic, and the UI is the largest portion of the experience anyways.

A Path Forward

I fleshed out the new UI elements once customization starts. My goal was to make it easy to jump around to the different options without being stuck in a one directional flow, and without cluttering the page.

I’m happy with it so far, and I build a component that renders the 3D models as a 2D white image in order to show part previews and selections in a more visual way. I’m struggling a bit laying out the action panels for each step, but I’m getting there.

I also added an animation where the navigation and previous copy fade out and blur instead of whooing away, which is less jarring.

I spent some time experimenting with a few layouts for the navigation in the customizer. I originally had a wizard-like approach where you went step by step until the end… but I wanted to make it clear how many steps there were, and make it easier to jump around.

I think the best route is something similar to a gun customization screen in a modern FPS, where you can see all selected parts at the root level, and drill down into the UI by selecting one. My struggle is then with the overall style, as the current UI is very minimal and “floaty”, but it feels like I need to compartmentalize things in boxes in order to make them more clear.

Unsure! I have a concept in my mind and I’ll hash it out later this evening. For now here’s one of the “Failed” concepts I was messing with:

It begins.

First UI pass that I’ve sort of settle on, nailing the overall minimal-yet-textured look I want.