Designing a webpage for cake customization

Question

I am developing the website of a bakery where the client wants to offer different customization options for the various layers of a cake, namely, frosting, filling, etc.

The design that i came up with is :

Here, the image of the cake on the left represents the flavor of the layers chosen by the user by clicking on the various options on the right.

For different combination of options on the right, one gets different combination of colors on the left:

However, the design seems very unnatural and clunky to me and I was hoping to receive some suggestions on how I can improve the design.

Answer 1

Beyond the design, which as indicated in other answers needs several adjustments, the most relevant thing I see in your design is perhaps a conceptual failure that many of us usually commit.

In my opinion, you are designing a web page, with web page features: web menu, web body, web header ... when actually what you want to make is a web application with multiple options to apply to an object. Visualizing it in this way I think it will help you to create a very good design from scratch.

To understand it better: did you think about putting a "CLEAR" button to start the cake from zero, the "UNDO" button to back steps, the "SAVE" button in case the user wants to keep the current options to continue in another time, the "SEND" button to share the selected options with another user, and the most important, the "BUY" button once the cake is ready... I know maybe this is too much for a simple site, but thinking bigger makes the smaller things better.

I recommend visiting web pages with web applications to customize objects. Here a very good example: https://www.shoesofprey.com/shoe/7Vwyhq/editor?create=1

Answer 2

I think the first thing that jumps out at me is that header. I'm not sure the dimensions and resolution of your screen, so maybe it's just an illusion, but if that were my screen it would mean that header is like 200+px tall. Header size can vary a bit, depending on several factors, but I'd keep it under 100px. GDSE (this site) is 50px tall, for some reference. I realize their logo requires a bit taller of a header, which brings me to my next point.

That logo needs a lot of work. I'm not sure if that falls into the scope of your contract with them, but that logo does not scale well and is too busy to easily read/recognize.

The cake image on the left looks too simple and too small. I'd make it bigger. You could even try it the other way around, showing a cake with a slice missing (example below). You could place the cake on a tray and add some other decorative/table items around it too.

If you really wanted to get crazy, you could use photographs of cake (assuming you have the resources to do so). If you can't get pics of their different variants, maybe you can use a photo of a vanilla cake and colorize it, based on the customer inputs.

It's hard to give too much other input, because we can only see such a small section of the design, but those are the things I immediately noticed

Answer 3

One thing I would change to make the page fuller: if possible, instead of a column on the right with all the options, put the options in a circle around the slice of cake. I would also add a picture in the background (with low opacity) to give the page more life. Either a picture of the bakery itself or of some of their cakes.

Another thing: If you're stuck on the logo, have you considered making the header smaller and having the logo push out of it? It would look something like this: