Login Box Redesign

June 21, 2014

This year, we want to take our Voice Publisher cloud platform to the next level. And this means improving every detail we can to deliver a higher and constant experience to our customers. As the login page is the first contact for our customers with our product, their experience definitely starts here (and not after).

2006 vs. 2014

Below is the 2006 VoicePublisher login box. 8 years look like an hundred years for webdesign! But if we look closer, it respected the design principles of that times. Unfortunately that's not really the case today anymore. We strongly believed that a redesigned login box would deliver a better first impression in our customers' mind.

Dexem's VoicePublisher old login box

3 redesign principles

The question was quite simple: how to make new without clearing the past? How to make an evolution of what already exists instead of "hiding the past"? That was really important for us to keep a continuity between the old and the new. Here are 3 main guidelines that helped us.

Same structure

What has been great for years is the simplicity of the page. By being essential, the 2006 login box really made the job for customers that wanted to quickly log in. So I really wanted to keep that simple - but really efficient - login box structure:

  1. Company Logo = Company identity
  2. Product Name = Product identity
  3. Login & Password = User identity
  4. Button & Reset password = Actions

As we brought more and more into customer success years after years, I added a link for customers who need help to be quickly supported. This may seem little but this kind of details give you an idea of customer service level the company delivers. Not every company offers this. You should.

Colorful

Over the years, we found that the login page was too white (I would say too sad but everyone would not agree) whereas designers has brought colorful interfaces into their web & mobile apps during the last years. As a trend in Consumerized IT, colors help deliver greater and positive experiences.

So we decided to bring more contrast in the ways we use colors to energize the new login box. We wanted not to come up with a white box on a white background. We chose to go with a light grey background and a full white box that really catch attention instantly. In addition, the company logo, the button and the link bring more warm colors to the whole page.

Flat design

As trends for webdesign move from Skeuomorphism (also known as Realism) to Flat design, I decided to avoid shadows and gradients to go with a modern layout. I paid attention to border-radius on div, fields and button to be consistent. Note that I used a 2px border on fields to match with the Flat design trends.

The new one

As you see, the redesigned login box looks modern, lighten. We used a contrast with the light grey background and the full white box to put forward the login section. Thanks to this, we did not need borders nor progressive shadow. We now had a more dynamic design.

Dexem's VoicePublisher new login box

We also worked on sizes, proportions, border-radius, borders style and font-style to make the login box well-balanced. We really want that our customers feel comfortable during the first touch. When they feel comfortable, they're in a really positive mindset to explore more in the software.

 

Feel free to give a peek to some Voice Publisher's screens on Dribbble.

Enjoyed the article?

I'm sharing what I build and learn on SaaS products strategy and SaaS distribution. And I'm learning a lot, so will you! Delivered once a month for free.

I won't spam you or sell your address. Unsubscribe - of course - at any time.