10 little things we made better in the new UnderstandBetter!

Over the past few months, we looked at UnderstandBetter’s usage among their customers and made lots of changes to the User Interface and User Experience. We took most of the criticism from the old version of the product and addressed it head on to make it more usable. And we also some areas which we thought needs a makeover. So with all that in mind and thinking about our customers’ needs, we started working on the new version of UnderstandBetter.

Here is the list of everything we changed, added or removed. Let’s just jump into it from the cosmetic and shiny changes first.

1. The journey from the Material to Bootstrap

On the first version of the product, we assumed Material Design would be good because of its popularity with google users. But we soon realized that there are not that much customization and power available in any of the frameworks that give us what we want. Building custom components were always a hassle and it was time-consuming to follow certain Material guidelines. So we decided to ditch it and move to a custom bootstrap build.

The number one concern was to not make it similar to hundreds of other bootstrap dashboards that are available. We started with plain old bootstrap sass, updated its core variables to our designer’s vision and customized further from that. Here is the login screen design from material to bootstrap build.

We were incredibly happy with our results and we fell in love with bootstrap ever since. We might even propose to it soon.

2. We don’t leave the fonts behind

Typography is very important to us at UnderstandBetter, we fawn over good fonts and actively gush over how we could implement it on our products to better increase readability.

On UnderstandBetter we used to have Roboto, an amazing sans serif font. It’s good looking and went well with material design. But it didn’t go well with our charts and numbers very well. And as we were moving on from material design, it was time to move on from this as well. So we scoured over the internet for something that looks sexy and is very easily readable.

And then we landed upon IBM Plex Sans, it was developed by IBM with slab serif fonts in mind and it had some distinctive features that we liked. Here is a comparison of what both look like side by side.

3. What’s in a color?

We can control the mood of our customers by using colors, that’s special to us. Everyone liked the blue that we used in the old UnderstandBetter, but it felt a little light especially in our analytics page. A splash of darker blue seems to do the trick of retaining good readability and fun put together. Take a look at the old color palette and new color palette side by side for a better understanding:

And while we are at it we made all the colors extra darker for more accessibility for our users. Now no color would be too dim to read properly and every color has a specific function or message to say throughout the platform.

4. Icons for your Soul

Recognizable icons are very important throughout the platform, as we were moving on from material design, it was time to move on from material icons as well. We searched far and wide for the perfect icon pack that will be distinct, playful and informative at the same time.

Soon we landed upon Feather Icons, it had loads of unique looking icons that we liked instantly and all of them were rounded enough to be soothing to look at. But there was only one problem, all the icons were outlined only, and we quite like the filled-in look of the material icons.

In the end, we compromised by taking the feather icons and made a subtle filled in look to it which we very much liked.

5. Super Modals

Modals are the dialog boxes that open up in the same page itself to perform a singular action regarding something. Our old modal boxes were needlessly clunky and large so we gave it a diet and made it smaller and sexier to look at.

The most impressive thing about the new modals is that it is fully accessible by voice-over technology and would focus properly on the right elements when it is opened. We also made sure it didn’t disrupt the visual flow of reading, so we left-aligned most of the readable and interactive elements for proper hierarchical flow. No modals were harmed during this redesign.

6. Helpers at your doorstep

Most of our users have pointed out that some of UnderstandBetter’s words can be confusing, we get that. We already had explained most of the jargon in our helper site but we thought it would be better to show at least a one-line explanation on the page itself.

So we used the help of tooltips to explain stuff that is frequently confused by and asked by our customers. This also made us identify overly complex words throughout the platform and reword everything to be easily understandable at a single glance. The tooltips would open up if you hover over the question mark icon everywhere in the platform and if you click on it, it would take you to the full explanation of it.

7. What makes the Button click?

While redesigning we thought long and hard about how all the buttons on the platform should look like, previously we had a colorful array of buttons that were available for specific purposes but most of them were distracting and we felt that some actions shouldn’t be that prominent on the platform.

So made the buttons smaller and much more action-oriented (only one primary button for a page/action). This made sure we don’t lead astray users, the users should definitely know what they clicked and which action would occur.

To make sure everything registers on the users more, we added an icon most of the buttons to signify the actions that are going to occur. The result was a beautiful set of usable buttons that made you click on them.

8. Less Space, More Answers

Another common feedback about the product was that all of the fonts were too big and everyone needed to scroll through the screen to read more. Well, we heard you loud and clear so we grouped together items, reduced the font size just a little bit.

Now lots of answers and other content can be easily scannable in a single view which greatly reduced the need to scroll through on all the screens. We made this not only on the answers page but throughout the platform so now all the tables are also smaller for better readability. But don’t worry the font sizes are still big enough that you can read comfortably.

9. Better Emails

We redesigned the emails too with better clarity on the actionable and important items. Now emails are more focused and easily scannable every time.

And to make things even better, we made significant performance improvements to the emails so that it will load even faster than before.

10. SOS Alerts

We have lots of alert boxes in the product which are there to give a little bit of friction for important actions. Now, these alert boxes appear in a modal which gives much more descriptive alerts and makes you think about the actions that you are gonna take.

And there you have it, these are some of the things we made better in the new UnderstandBetter. We didn’t even mention the technical side of everything we did from page load performance, font and icons performance, lots of new features such as breadcrumbs and Charts.

We’ll see you next time. Adios.