I'd like to improve upon my store user interface

[optimizedcoder]

Heya!

I’m experimenting with the user interface components on roblox and have decided to create a “store” in the process.

I’d like some honest feedback as it doesn’t function and look the greatest. Primarily, I’d like to focus on the icons and overall design. I’d like to keep the white, slick and simple design because it translates well to what I’m developing.

As I mentioned in the second paragraph, it doesn’t look the greatest. What do I mean by this? Well the icons are quite “lifeless” and aren’t really nice to look at. Here’s a video of me using the user interface for a better look at things:

For some additional information; the icons have been made in Blender (rendered) and the texture was made via a photo editing software.

A problem which I’m also tackling is how I can improve these icons. I don’t understand how people are able to make icons such as this:

(From google)

I’ve really envious of these designs and would like to create something similar, however I have no idea where to design such icons.

Any help is greatly appreciated, thank you!

[fearFaerie]

This probably isn’t the answer you want… but your money icons themselves look great they seem fun and pleasing to me. You could possibly play around with the lighting in blender since the ones from google look more shiny / glossy with yellowish lighting. However I do not expect the average person to make something that detailed.

If you want yours to pop out a little more you could start by…
(in photo editor) adding a couple layers of varying shadow underneath each icon, which adds more of a dimension [or maybe even a black outline to match the buttons]

I personally would start focusing on the background (I know you said you wanted it simple) play around and maybe try outlines in other places (like around the X button and around the whole base Ui could be nice) which may look good with the black purchase buttons. Or maybe you could play around and change the proportions and sizes of the icons, text color and position. I like how the icons aren’t all the same size.

I just feel like you are focusing on a specific element that already looks nice! Keep up the good work

[optimizedcoder]

Apologies for the extremely late reply; I got caught up in some things outside of the internet.

Thank you for the reply! I’ve been playing around in Blender thinking about how to render the icons. And after a few tedious hours, I found a nice way to render them. I’ve taken your “yellow” lighting idea and found something which suited the icons.

In addition, via the photo editing software I use, I was able to add a nice drop shadow to each icon. I really wanted to give each icon a black outline, however I was struggling to find a good way on how to achieve that.

I’ve taken your idea for strokes; such as the background frame and product frame(s). I messed around with a few combinations for each element and found something that worked for me. Unfortunately I couldn’t find a good way to implement the stroke for the close button. But maybe you have something in mind

You’re probably wondering about how the user interface currently looks. So here’s a video I just took:

Personally, I think it looks better. But for some reason, something still seems off to me. I’m hoping that you may see an underlying issue that I’m completely missing.

That aside, thank you for the kind words, they mean a lot

[ChiruDonut (Vilu)]

I think what I’ve been able to conclude is that your UI is missing visual hierarchy. What do I mean by this? There’s no point of focus for me as a player that catches my attention and drives it towards a certain element. The title text is not big and imposing enough to make me think it’s the center of attention, but the deals also don’t guide me anywhere.
If you want to improve the visual hierarchy, I’d recommend you add cues and elements to attract the player’s attention to where you want it: a “best deal!” text, outer glow, sparkles, different background colors, graphic icons, are some ideas at the top of my head. Here are some examples:

(Notice how the bigger the deal gets, the more colors and elements get added to each icon? you start off with a few diamonds/bucks, then progressively add stuff such as boxes, bags, chests, etc.)
These are just a few ideas of mine, but hopefully they can help you in someway!

[optimizedcoder]

Thank you for the reply! I’ve taken your suggestions into consideration and my store is genuinely taking a turn for the better. There are a few attributes which I’d like to alter, however I’m not quite sure how to go about editing them.

Firstly, I’ve took some major interest in what you call ‘visual hierarchy’ and have denoted the past few hours to analysing some strategies which best fit my need. I changed around some colours, words, icons, etc… And as I’ve stated above, it’s looking genuinely better.

Now, before I elaborate further, I’ll show you a quick video of the user interface (similar to the original video)

The first change which you’ve probably noticed is the header text being lengthened. I lengthened it because the top bar seemed quite empty. Indeed, I could display the current amount of cash the user has, however, I think a ‘money label’ within one of the corners of the screen would best suited as the store’s responsibility is to sell you something, not impose information which is unnecessary.

While I’m at it though; you could argue that displaying the cash could have some sort of ‘psychological’ benefit because of how our human minds interpret things. I do study psychology, but I’ve never dwelled in the ‘money manipulation’ kind of stuff (Such as the difference between $10 and $9.99) If you have some kind of information in terms of this, I’d love to hear it.

The second change is the gradient for each product cell. You’ll notice that in cell one, the background gradient is faded, however, in the fifth cell, the background gradient is a lot more saturated and open. I feel like the increase of saturation may make users tailor their eyes towards the more pricey products due to the colour shift.

It’s a little tricky to spot, but if you look in the fifth cell, you’ll see the gradient rotationally transition between 0 and 180 degrees.

The third change is the “GREAT DEAL!” and “BEST DEAL!” icons within the fourth and fifth cells, respectively. I’ve obviously taken the idea via the images you provided. I believe this is a nice addition, as those cells are a lot more outstanding. You may notice that the “GREAT DEAL!” icon is slightly smaller than the “BEST DEAL!” icon. The reason being that I want the user to focus on the priciest product before the others. Of course, I may just be silly and have no idea what I’m talking about.

The fourth change is the shine in the fifth cell. I wrote a small module to render them, and they turned out okay. They do have a slight dark-grey outline, but I can fix that some other day. I think the shine will entice users to look more towards the fifth product. But again, maybe I’m being silly.

The fifth and final change are the amount labels (save bonus(es)). I added a ‘+x’ to the end as a way to project the amount they’re saving by purchasing the larger products. I may change the label as it looks as if you’re purchasing ‘x + amount’, however I’d like to hear your thoughts first.

In addition to the ‘save bonus(es)’ I’ve refactored the amount of cash you receive per robux spent. Here are the conversion rates:

I forgot to mention, the actual cash amounts haven’t changed, only the prices have changed. As well as that, the video doesn’t display the new prices because I was changing the rates during this reply.

Conversation rates:

• $800: R$49 ~= 1.6326… cash per robux.
• $1,600 : R$89 ~= 1.7977… cash per robux.
• $4,800 : R$249 ~= 1.9277… cash per robux.
• $15,000 : R$749 ~= 2.0026… cash per robux.
• $31,500 : R$1,399 ~= 2.2516… cash per robux.

As seen in the table, the rates grow non-linearly, and rather in a more specific pattern, as seen in the plot graph below:

(The fractional numbers are just the Cash Per Robux (CPR) / 10)

I sort of like how the first four products grow semi-exponentially, while the last product discontinues the pattern.

Even though I’m partially okay with these rates, they can still certainly be improved. I’d like to hear your thoughts first though.

I was thinking of implementing a ‘next purchase bonus’. What do I mean by this? Well, depending on the product you purchase, the next purchase will grant you x% extra on your next purchase. Let’s take the fourth product. If a player purchased the product, upon their next purchase, they’d receive 12.5% extra. Here are some arbitrary examples:

Product Percentage Bonus Examples:

• Bought: First Product. Next product bonus: 5%.
• Bought: Second Product. Next product bonus: 7.5%.
• Bought: Third Product. Next product bonus: 12.5%.
• Bought: Fourth Product. Next product bonus: 19.5%.
• Bought: Fifth Product. Next product bonus: 27.5%.

If a player bought two products, the percentages would NOT stack; the last product purchased would be the bonus percentage.

Keep in mind that the percentages are really arbitrary and should for sure be changed.

Some disclaimers are that the percentage bonuses save after the player has left the game. However I did have the idea of making the bonus disappear after 20-30 minutes to encourage purchasing more products before the buff is gone.

In addition, I’d like each product cell to display the percentage buff, respectively. So if the player had a 10% bonus, the user interface would somewhat emit these labels within each cell:

If you have any other ideas which may look more outstanding, or which could project the percentage bonus better, I’d love to hear it!

I believe this is all I have to say about the percentage bonuses, so I’ll move on.

I’ve been looking at my store, and I’ve realized that the first three products are really bland, and don’t contain anything interest; such as shine, “DEAL” icons, etc… But I’m not sure if I dislike this.

A store exists to deliver a successful product to the recipient. But the more important motive is the money it makes. I believe that the three products at the top exist as a means of ‘just need a bit more to buy this item’, while the two at the bottom are ‘I want to progress quickly within the game’ type purchases.

I’m not sure if this ideology is something to sustain, but it sounds interesting to me. But beg to differ if you have an opposing view!

But I believe this is all there is to the new design. Honest feedback and constructive criticism would be greatly appreciated. Thanks again for the reply