It's no question that the UI needs a lot of work. When I started working on this service, it was only for my own use, so I didn't feel the need to work on the UI/UX at all. But this is how it looks at the moment.

Before we continue working on more functionalities, I think it's best to try to improve the existing user experience, so today will be only about UI/UX improvements.

Choice of UI framework

I have used a combination of ReactJS and Material UI for many of my projects, and it has always been awesome in every way. At the beginning of today, I was thinking about moving from pugjs to React for this project as well and make use of all the amazing tools written for it.

Here's a list of pros and cons React has, I still haven't decided to switch to React, for now pugjs seems to be sufficient.

Reason React Wins?
Lots of ready to use components (Material UI), State managers 👍
Adds extra complexity to the app, there is just so much boilerplate 👎
It does not integrate well with NodeJS, not without adding a lot of code 👎
It is easy to extend, this is really valuable because of composability 👍
It is easy to apply designs to, CSS in JS is just not my cup of tea 👎
It decreases maintainability for such a small app, the overhead is high 👎
Total 2 x 👎

Mockup

There is a lot of room for improvement in the UI/UX, but it is not a good idea to touch any code unless there is tangible evidence that it is improving.

I have tried many design apps, and so far my favorite is Adobe XD, the problem with that is that it is a tad bit slow for my not so high-end laptop, I think I will spend some time finding other tools that might be able to help me come up with a better wireframe/mockup.

After I have completed the design and I have played around with it enough to be confident about its usability, only then I will start with the implementation.

Adobe XD

I have used Adobe XD to create mockups before, and it's one of my favorites, pretty amazing toolbox and great interactions. My favorite feature is to turn objects into HTML elements and the ability to share an interactive mockup with people.

The only problem is, it is too heavy to run on my old (2015 is old?) laptop. To be fair this laptop is not designed to be for designers (no puns intended).

So naturally, I had to search around a bit, and finally decided to give Balsamiq a shot. They have a 30 days trial on their app, and their price seems reasonable.

When I tweeted about that, Adobe Care asked for my feedback which was nice of them. I hope the feature versions are going to be more lightweight, but that's not likely to happen.

Balsamiq

It was a fairly smooth experience with Balsamiq, despite a few crashes which is not unexpected, and some small learning curve, I managed to create a wireframe for all pages of the app.

The great thing about Balsamiq was the vast number of templates and symbols available, which allowed me to do the design using a couple of copy-pastes.

But it doesn't go any further than a wireframe. I wish there was a way to export that wireframe to Adobe XD to add interactions etc.

Final result

Finally, I have a wireframe that I'm fairly happy about. I know that design is not my strong suit, but I'm happy with the result for now.

The landing page looks very empty, but that's great, there's plenty of room to add useful stuff when there are some. I don't like filling space with junk, makes it harder for me to find things.

This is a wireframe, don't expect it to be pretty, I will probably use the Material Design Lite components to reap the benefits of what Google has already designed for me. For the time being, that's more than enough.

User paths

There are 4 main pages:

  • Landing page: This is where you land at first whether you are logged in or not
  • Create: After you have logged in you can access this page to create a new email
  • Stats: You can see the statistics of your emails, or a group of them on this page
  • Logout: You will receive a friendly farewell plus an email to send your feedbacks

Conclusion

I'm still yet to find a good solution for creating mockups fast and at an affordable price.