Enhancing UI – Sofology

Like so many company websites out there, the Sofology one isn’t the worst on first impression. Aesthetically pleasing images are used throughout. Relatively clear signposting supports the text. Menu items are on the whole pretty clear.

However, like many sites out there, there is room for refinement of various UI elements of the site. I’ve chosen to focus on one element for this article.

The humble Sofology product card

Whilst taking a look earlier in the week, I found myself frustrated with the layout of the sofology product card. Specifically, the way that the information to the user. I found it somewhat confusing, with elements misleading the user.

Rather than ramble on, I’ve annotated a diagram below.

I felt that the elements included on the card could be presented in a more engaging, useful manner to the user. I’d guess that the current iteration has had various elements added to it over the years. As such, it feels fragmented.

By making a few subtle changes to how the information is presented, I think that the card UI could be enhanced. Again, see the visual below for reference.

When all of these items are presented together, the resulting grid feels tidier with the information being presented more clearly to the user.

Further exploration

There are a few aspects that would be worth exploring in more depth to further refine the card. These include:

  • Does the monthly payment figure have enough prominence? The overall price may prove scary for some users
  • In reality, how useful are the colour and size amounts on the card. There’s not a lot of context here. Can this be improved?
  • I’ve removed it, but it’d be interesting to see how much engagement the share icon currently receives

Overall, I hope that the changes made are an improvement.

Thanks for reading 🙂