1
11 Comments

UX Designers - How do I prettify this modal?

START SUMMARY (if you need more detail read below):

  • I need Product Performance (more specifically the orders lines and growth rate) to stand out and look appetizing
  • I'm happy with inspiration designs, screenshots, or just ideas - anything will help!

I am close to releasing my MVP tool, and decided to take on some early testers for some feedback. The tool works great, and I couldn't be happier with the efficiency and structure of the backend, but my designing skills could use some work.

I'm say it briefly: I'm done very little UX design. Testers are happy with my main dashboard design and landing page, but one area of improvement mentioned a couple times was the modal/detailed product view.

I would love people to just collect and post examples/inspirations/screenshots or even wireframes of how I could improve or good designs they know of. I'm happy to write the code required to create those designs, no matter how complex, just coming up with them and the layout is a struggle.

I've attached a screenshot of the detailed product view. I've done some upgrades to the "Estimated Data", so unless you don't like that section, I'm happy with it. Main thing I want is to make the "Product Performance" section stand out and spice it up.

Thanks guys!

  1. 2

    Hey @JLenny 👋

    Here are a few thoughts I had.

    • I don't think a modal is the right design pattern here. There's a lot of information which feels cramped. As a result, it feels overwhelming and that everything is fighting for my attention. A page may be a better format here.
    • The estimated data looks like a list of buttons - although I'm not sure that it is?
    • It's not clear what action to take next, as there is no call-to-action.
    1. 1

      (Nice to see a fellow indie hacker from Manchester too)

    2. 1

      Thanks for your quick feedback! Perhaps a bigger modal would help, and I see your point of view with the Estimated data looking like buttons, I think I'll look to change that.

      A bit of context might help explain why I'm using a modal and what its for. My page/dashboard displays hundreds of products in card/tile format giving you the ability to quickly compare different products against each other - the modal is what appears when you click on one of these cards for a detailed view - I use a modal so you're able to easily close and switch/view another product without any reloading etc if that makes sense. As you'll notice by this cards screenshot, the information on the modal is much less cramped than on the product tile. Now I'm just looking for what order/style I could display them.
      Thanks a lot with the feedback - I will make sure to make some notes and look into it :)

  2. 1

    Hey @JLenny, UX designer here :)

    I think the way you approach this whole thing is not right. Prettify is too abstract. What pretty design even means?

    What I mean is that you need to write down a clear problem statement of "Users struggle with X,Y,Z when using this modal" from the user testing sessions you did.
    Then each problem can be addressed uniquely and find the right solution for it.

    Do you have a list of problems you would like to solve?

    More than happy to help you on that!

    1. 1

      Hey, thanks a lot for taking some time to help me out! Yeah, I apologise that the title isn't an accurate depiction of what I'm trying to achieve; nowadays on Indie Hackers I've noticed a catchy title is needed to get some attention.

      Quick Summary (I realised I wrote a lot of detail below, thought this would help):

      1. Testers said Detailed product view was too bland as shown here: https://i.gyazo.com/603f3d6cdd10db943f253fbc3278a7a5.png, which had a side-effect of making estimated data less trustworthy (I guess from the perspective the modal doesn't look like we put much work into it).

      2. The modal change I made in the post was liked more by testers, but it was still missing something. It also meant that Product Performance was no longer the main focus point of the modal (I want Product Performance and the actual order data to be the most important part of the modal, then the estimated data as a cherry on top to help users with cost/profit estimations at a glance).

      This is the most recent iteration of working on the modal:
      https://i.gyazo.com/03ce4ca7783e0ae60b37b262978afc9f.png

      I made this post since I sometimes you need a fresh pair of eyes to look at the problem, and someone with more expertise to hopefully see how I could improve this thing!

      I'm happy to just talk on here, or if you want we could get into a discord call or private message on something, I really appreciate any help.

      IN DETAIL:

      Our service focuses on doing product research for e-commerce sellers, letting them find trending and promising products through us. We do this by collecting data such as order data, competition, reviews and more on products, then presenting it to the user in a simple product tile/card based design to quickly filter through and find good products.

      This modal is what appears when you click on one of the product tiles - its an expanded, in-detail view of order data, estimated data and other relevant information.

      Our testers really liked the product tile design, but they felt that the detailed product view (the modal) was a bit bland and they didn't know what data was important for them to focus on. Here is a screenshot of the modal that the testers seen (I apologise for bad quality, this is a screenshot taken from a gif - the top of modal where it says "Detailed Product View" is present but cut off in the screenshot): https://i.gyazo.com/603f3d6cdd10db943f253fbc3278a7a5.png

      Another comment was that due to the simplicity of the estimated data format (how it was just a list), they didn't find it trust-worthy enough. They wanted it to excite them to sell that product, but instead it gave them doubts. That's the reason I made the changes to the modal shown in this post to the estimated data section. They liked this much more (you can also hover on each of those boxes to get detailed explanations in tooltips), but there was still something off for some of them.

      Another problem that occurred from my change is that now the estimated data is the first thing that draws attention. I would want the order data to be the most important part of the modal; the Yesterday, Week and Month alongside the graph and growth rate should be the focal points of the modal since that's real data that will reinforce your decision making.

      1. 1

        Hey! Thank you a lot for clarifying all these and sorry for the late reply, let's jump on a call sometime in the next weeks to help you on this :) Could you maybe DM me on Twitter or e-mail?

  3. 1

    You could do some basic things around layout. Making things aligned would be a start. 17499 reviews, 542, 4116, etc should all be left aligned so they look like they're in a column. And probably Phones and Telecommunications as well. The question mark before Growth I would either remove, or if it's clickable then move it after the word Rate so that all of the orders text looks like a left aligned column

    It's also not clear what the call to action is for this page. Is it just informational or is the user supposed to do something? What are you trying to draw the users eye towards?

    For the Estimated Data piece, I know you say you're happy with it, but FWIW, there's a lot of different colours used here. Why is gross profit a green border with white background, but net profit is the opposite? Along a similar vein, why are half the boxes white background with coloured text and half the other way around? And what do all the different colours signify? Appreciate this might be out of date now, but I would make them all the same colour and style, or at least standardise your use of colours (green for good / red for bad, etc)

    Finally I'd have a look at the date format for the graph. Your prices are in dollars but that looks like a UK date format

    Good luck

    1. 1

      Thanks for taking a look - really appreciate the feedback!

  4. 1

    Consider using tabs, and don't repeat yourself too much.

    Instead of "Orders yesterday", "Orders this week", "Orders this month", group them together like:

    Orders
    -------------
    Day: 23
    Week: 493
    Month: 3122

    With that said, here's how we do it at gonimble.net: https://i.imgur.com/2miImZ0.png

    1. 1

      Thanks a lot, that's a change I've been making yesterday so good to hear that it's probably for the better. Thanks for the feedback!

  5. 1

    Worth mentioning - the brand colours/house style of the whole page is:
    #343A40,
    #07A3F0,
    #009DB7

Trending on Indie Hackers
My year-long passion project is live on Product Hunt! Coffee Chats is like if Calendly and Carrd had a baby. 24 comments Micro-Communities | and why you should start one too 16 comments 👋 I just got my first 💸 Customer 11 comments 🧐 HELP! Where do Marketers and SMM hang out? 11 comments I've built Billflow to $27k MRR in 18 months. AMA 10 comments Combine multiple newsletter into one email? 2 comments