I'm designing a 'build your own product' interface which allows a user to upgrade a base product. Currently I'm unable to get feedback from our users, but I did share the design internally.

For security purposes I've had to replace the actual content with filler text.

enter image description here

One of pieces of feedback I received was that the base product column and performance upgrade column felt disconnected. I tried adding a plus sign icon between them, but it looked silly.

Any suggestions about how to remedy this issue or suggestions how to improve this design would be greatly appreciated.


Very good work from what I can see. Here are three suggestions with examples (examples are not 100% to the point)

Suggestion 1: Instead of connecting the two separate the other third There are 3 steps now (and generally 3 is a good number) but you could translate that into 2 steps + summary. In that way, you could either change the colour of the card slightly or (even better) add slight background colour on column three or divide them with a line. enter image description here

Suggestion 2: A mobile-first approach might give you more options Consider instead of having a horizontal process to have a vertical one. Working on a mobile version of this will lead you to this direction as well. There you can have a more natural flow of 1 + 2 = 3

In that case, you can also make use of accordions or expanded cards to show your message.

enter image description here

Suggestion 3 Make the 2 first steps vertical and keep the 3rd one on the right.

enter image description here

  • 1
    Thanks for the detailed response, Mike. +1 – tbonejenkins May 14 '20 at 13:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.