Rebranding Revent – Part 1: Redesigning the UI

Rebranding Revent wasn’t a job that was done in a simple afternoon. The app needed to stand out more among the crowd (for the good reasons) as the original incarnations didn’t get the proper focus on branding and looks as I felt comfortable with. In this set of two short articles, I’m going to take you on the small journey that was the rebranding of Revent. The first one will be about the UI changes made and the second one is about remaking the logo.

In this article, we’ll take a look at what has changed to the UI and why.

Anyone who has used the original Revent can agree that while the UI was functional, the was something a little bit off about it. Let’s take a look at it, shall we?

Old users may have noticed the new Patreon-banner from Talkinator in here, which wasn’t present in this app before. Skip that; what is the first thing that comes to your mind when looking at the screenshot?

There is an awful lot of spacing here between the details and the arrow, isn’t it? On Mobile devices, this isn’t such a big problem. Phone screens aren’t very wide so the arrows would always be quite near the info. On PC however, the window is a lot wider so this novel little idea started to look kind of off.
The Tile idea is something I still kinda like, but it just didn’t work out as I hoped it would. The icon in there is something I still wanted to keep in there. So, time to shop around for new designs!

With pen and paper ready, I searched the land for cool new designs to influence the new UI design. In the end two designs peaked my interest to try something out; the Microsoft Health and the leaked Neon-concepts. I wanted to use the Neon-concept for the use of the fonts and used the Health idea for the appointment template-list:

I took the big tiles and icon usage from the Health-app and toyed around with it on the information currently shown to the user in Revent. Even tried to use the ‘show info beneath the tile’ idea, but quickly discarded this because the main event of tapping the template is to take the user to Outlook with the info entered on the template. Editing the template is merely a second ‘bonus’ option and not the priority of what the user normally wants to do, so shouldn’t take the spotlight like this. So I opted to keep the flow the same as it was before.

Well, why not try to create some tiles for real now? Most designers usually open Photoshop or Affinity Designer to do this, but I like to concept around in Visual Studio itself so I can try it out on a variety of devices and see how things work out. So like a truly lazy programmer I booted up Visual Studio, loaded up the Main Page and it looked something like this:

Ok, let’s be blunt and try that first one from the sketch:

All right, not too bad for a first try. Gives a nice concept of what we can do. The bigger title definitely knows to draw the attention. Let’s do something crazy; let’s make the template title even bigger and see what happens.

Whoa! This might be a little too much for its own good. The bold text already draws a lot of attention, but on this size it’s likely not working good on small phone screens. Maybe we can reduce the size by removing the boldness and make the fontweight light?

Ehm. I don’t know. This just doesn’t feel right. So hollow and uninviting in this setup. The extra padding does make this look better and makes better use of the vertical space. Why don’t we go back to the original with the coloured tile and apply some extra padding there?

Now this is more like it! This feels a lot better. Let’s make that ‘Add a template thingie’ look more like the Neon-style Hamburger menu-item;

Perfect! Let’s reduce the amount of accent colour shown on the page by removing the background of the template icons and maybe make the padding the same for the ‘add’ button as for the rest of the items;

Sexy, if I say so myself. Let’s do wonder; how will it look like with smaller icons? Like always; just give it a shot:

Hmmm. I liked the other a bit better as it aligned more with the text next to it. Looking back and comparing the older screenshots with this one makes me like the placement of the ‘add’-button better in a previous one. So let’s roll that back too;

Now this feels right on both PC as Mobile devices. Perfect!
Time for a quickie on the settings page. On the left there is the old situation, on the right the new one. See if you can spot the differences. 😉

Done, on to the last part: the dreaded Template page.

I found this to be a tough one the first time around, because how can you make a page with a lot of textboxes look at least a little bit pretty? Second, the map-option is far from what I want it to be, so let’s drop that right away. Hmmm, the current concepts don’t show anything for a lot of textboxes, so let’s look around and see what we get.

I picked up my iPod and looked at the standard calendar app on there. Hmmm, this is something I can work with; just use the lower border of the textboxes instead of all of them. I’ll give that a shot;

While I was at it, I also neutered the different heights and styles for now; the only exception being the Template name on the top to distinguish it from the rest. Also changed the colour of the icons to gray, because why not. This feels really good. Let’s toy around with the small details to get things juuuuust that little bit better;

And the final result:

Only what’s now left is some testing for accessibility, playing with filled in info and last but not least; add animations to make the experience a lot smoother. “What happened to the Patreon-banner on the Main Page?”, you might ask. I found it a better idea to put it as a link in the command-bar for this app than as a banner.

Well, this wraps up this part of the rebranding story. Please let me know what you think of it and if you like it, you can buy me a cup of tea: Until then; happy Reventing! 🙂