If you haven't read my first post check it out here .

When someone comments my post, this is what happens... I respond!

The comment I received on my previous post was fair to ask me for a before/after pictures because even I would be curious to see the transformation too.

In short, what happened was I posted my JavaScript app, the 📝 Math Homework Generator, on Product Hunt and someone decided to give me a critique of my UI and I responded with taking his constructive criticism seriously and implementing changes to address them.

Before I start with the comparisons, I want to explain why I did a terrible job in the first place, lol.

To me, the best progression of software is to quickly get something out and get meaningful feedback. The primary feature of my product was to get randomized math worksheets. If anybody saw interest in it, I would put more effort into it. Putting too much effort into a a project before any sort of feedback is a waste of time. So it wasn't until I got some before I decided to take more action.

The old app was essentially a single page that displayed everything at once. As my critic said:

There's too much information here. I would suggest spreading it out, to help the user digest the content.

I just clumped everything there and dusted my hands and said, "Done!"

So this comment inspired me to put in the landing page. I realized the purpose of the landing page and why it was so effective is because information was spread out and people the scrolled down were rewarded with small bits of information and some imagery to go with it.

I really wanted to throw in CSS animation in a project, so I used this opportunity to create the floating icon with a shadow. It was pretty fun and the outcome was great.

The old app (left) is just a few scrolls down from the first image. Everything being on one page is certainly convenient for the dev (myself) that knows exactly what's going on, but not at all obvious to the user. Also, I forced the user to scroll all the long way down to realize there are only 4 categories and improved this by allowing the user to see all 4 categories at once.

The critic said:

How does it work? Adding a step by step can make things a lot clearer for the user

My response: a wizard UI with a breadcrumb. Once a category is selected (no change on old app image), you can realize that the breadcrumb is very useful and you can go back to the categories screen easily and not get lost.

When you select the worksheet you want, the new app prompts you for configuration options. This makes the dropdown for the number of worksheets much more obvious than in the old app. I also added the feature to not include the answer key. Something I personally felt was a needed feature since I often printed worksheets without them for math problems that were very easy.

And then the "Preview Worksheets" button was huge and clearly tells the user what they will see next. Previously when you clicked on a worksheet name, you immediately saw the printable worksheet which could leave users very confused and not realize they could choose how many worksheets to print on the previous page.

There was very little change to this screen, but it's now obvious to the user what they were looking at and what they can do from there.

Conclusion

I really enjoyed the process of getting it into a user-friendly state. Once I saw those comments, I had to admit to myself that the critique was right and then the inspiration began. The thoughts of how to implement those changes started flowing. It ended up being harder than I thought but I got it done and that's all that matters.

There are still more improvements left to be made such as the mobile experience. There are issues when viewing it on a phone but given that most people (that I know of) don't print from their phones, I left it alone; perhaps for the next update.

Thanks for reading!