/ Updates

Redesigning the widget

elevio has seen some really great growth over the past six months, and as more and more users have come onboard we decided that we needed to review, modify, and roll out a new and improved version of the widget.

Before we started, we identified a few key features that we wanted to maintain and implement, which served as our guidelines as we were making the updates. The last thing we wanted was to go overboard with tweaks and changes, to end up with an unrecognizable app!

Here are the five things we kept in mind while making the updates, to make sure that we stayed on track.

all-modules

Consistency

The goal is to always be consistent across all the Modules that elevio supports. When creating the new style guide for the widget we made sure we followed these guidelines for every Module that is used.

Identifiability

We also wanted to ensure that the widget stayed familiar to the users who have used it before. The widget in its closed state, in particular, had to remain the same so it didn’t confuse our client’s users.

Unobtrusiveness

The widget must always blend into an existing site and not be disjointed or conspicuous. We’d decided from the start that its design should be neutral and content-focused. The goal is to make the widget appear not as a 3rd party plugin, but as part of the site’s existing user interface.

Compatibility

We kept in mind that the updates must not break or introduce styling or layout issues with sites that have already heavily customised the widget. We wanted fallback to be as graceful as possible.

Simplicity

Finally, we asked ourselves of each improvement, “Are the changes being made able to reduce the interface to its simplest form without being too obscure?” What we wanted most to achieve out of this round of updates was aesthetic simplicity.

All the updates were made with the objective of cleaning up the widget’s interface. This meant removing unnecessary elements in favour of a more clean and refined design. At the same time, though, we didn’t want the changes to be too small, as we wanted the improvement to be noticeable.

So, I guess we could call the update a refresher more than a total redesign. The mechanics of the widget remain the same, but are now more intuitive and obvious.

The biggest challenge was creating a foundation that remains consistent across all Modules with content coming from multiple providers and services.

And now, the fun part! Here’s a quick lowdown on the changes we’ve made.

Color

colours

All content is now a consistent color that will be used across all Modules, and is more neutral. We’ve removed the alternate color for headings and made the hover for links utilise the color that was chosen by the site owner.

Title

The header of the widget is now also consistent across all Modules. By compacting the header and simplifying the icons we now have a nice, slimmer header. The header is now also sticky, so users can close / refresh or Go Back easily, even with content that has lots of vertical scrolling.

We’ve also added the title of the Module to the centre of the Module header, which was not in the original design when viewing a specific article.

title-bar-comparison

style_typography_roboto1-1

Font

After much trial and error, we decided to go with the very popular Roboto by Christian Robertson. The beauty of Roboto is that it is a living font, meaning updates and tweaks are added over time. You can check out an awesome video about Roboto here: https://www.google.com/design/videos/refining-roboto/

Status Page

Utilising the new content box style, we made significant improvements to the Status Page Module. Text is now on a white background for easy reading, and important information is emphasised with labels.

status-comparison

Loading Animation

Small changes sometimes give the best result. When we first created the loader animation for the loading of any content within the widget, the idea of a big, square, flippy switch thing just sounded so cool… We’ve now grown past it, though, and it was time for something a little more refined.

LOADERS

Again, we’ve just made sure everything is simple, and a whole lot more tidy.

(We apologise for the original crazy loader!)

Article List & Article View

The Articles Module is a core component of the widget. One of the biggest issues with the original widget was the lack of margins and leading. Content was harder to read, because it was all too close together.

We made some improvements to let the content breathe which we think improves readability a whole lot. The change from Helvetica Neue to Roboto made a big difference. The body font color was also changed to be lighter than the harsher grey we were originally using.

articles-comparison

Support Module

By grouping ticket statuses together we can now better represent the state of a user’s tickets.

Carrying over the font, padding and leading makes reading the content a much more pleasing experience. Avatars and ticket requester / user requester text has also been sized to be less dominating.

support-comparison

And in keeping with the **unobtrusiveness **that****we wanted to achieve, we decided to change the default avatar from an elevio logo to a generic user avatar.

avatars

What we didn’t change

Widget Sidebar

The closed state of the widget remains the same. Changing this would go against the guideline for making sure the widget is still identifiable by visitors who are used to accessing the modules.

Inline Tips

This redesign rollout didn’t include any updates to inline tips. But we’re now hard at work making changes to improve the look and feel of inline tips, and we’ll be writing another post about the update in the very near future. Watch this space!

What this means moving forward

Now we’ve got a good, solid foundation to work from, as well as the guidelines we’d set, any future updates will be assuredly consistent.

Psst — you can see the widget running in all its shiny, new glory by heading to https://app.elev.io/preview.