Unplugg : New Identity Design

The New Miss Unplugg

Creating a brand identity is never an easy task, and if you are doing a rebranding it can become even harder; you have to make a new identity different from the previous, and preferably better.

Unplugg is a service created almost three years ago. Having been still for a little while, it was in desperate need for a re-branding. Times change and so do the needs of the market, therefore Unplugg itself was needing a shift in purpose. Instead of being a B2C product, the new Unplugg (to be thought as a female character) was going to be offered as a Machine Learning-as-a-Service - a B2B product. This meant that there was going to be a major shift on the target market group. This affected the business side of the project, but also the re-design - it needed to be business-grade.

The Logo that got stuck

The word unplugg already has a subliminal relation with energy, however the new identity needed to reinforce that. The keywords that I was given were somewhat vague and broad but they made sense because they were just right to explain the core ideas that had to be conveyed in the logo. Energy, Intelligence, Comfort, Efficiency and Automation; how can someone make a logo that represents all that?

I immediately started sketching, the first logos I drew tried to emphasise the “un” since it represents the action of an opposite force, in this case, saving energy by disconnecting all the plugs, not manually, but automatically. The concept of cutting or stripping, and the idea of before and after also came to my mind as a way to show the benefit of applying Unplugg to an energy service. After experimenting with different font faces, I realised I needed to create a custom one for the logo. The typography created blends lower-case letters with upper-case, different x-height letters and baselines to communicate the idea of a line graph. I was careful to design the letters according to typography rules, the letters with round corners have to be slightly taller and have to be placed lower on the baseline and the kerning of the letters had to be a little tweaked (since there was no kerning table, of course). The logo conveys a sense of dynamics similar to what you see on energy graphs, and this is one of the reasons why I started experimenting with adding motion to it.

After converting all the letters to bezier lines, I was able to animate an SVG with CSS, creating a similar animation to the one on the final version of the website. In fact, during one of my experiences the animation of the logo got stuck when filling the stroke and the letters were a bit incomplete. This gave me an idea; why not create a typography where not one letter had a stroke touching another — where every letter had to be unplugged. That was the beginning of the process of fine tuning the logo to the version you can see currently on the Unplugg website.

Where have I seen that Symbol before?

Initially, my idea was to make the symbol part of the logo, meaning the symbol would be un and the logo would be the whole unplugg. That quickly became apparent to be an unfit choice.

In order to reinforce the connection with electric systems, I thought a good source of inspiration would be the electric symbols used on electronic schematics. After combining different symbols and simplifying others, I came up with the symbol for Unplugg; it is based on the symbol for a multi-cell battery with different alignments of the strokes and more simplified. Also, you can almost see an u and a n, ok maybe that’s just me…

A whole new Website

The old website was comprised of three sections: home, explanation, and call to action. This basic structure was maintained for the new version but the contents of each section suffered some changes. The copy of the whole website was replaced with up-to-date information and new features. A new half section was added between the home and the explanation to quickly present what Unplugg is.

When the user first enters the new website he’s greeted by the new logo and background image, scrolling down reveals the animation of the logo disappearing and turning into the symbol on the top left corner of the page. All the illustrations on the website are revealed with a similar animation as the logo since they are all SVG drawings they all have a CSS animation applied to them to change the stroke-dashoffset. This animation works by setting the dash array of the stroke to a length that covers all the drawing with one dash (meaning that next to that dash there is a space with the same length); next using the stroke-dashoffset property one can animate the position where the stroke starts creating the illusion of an image being drawn.

Data Viz

On the first section of the previous website, there was a live graph that showed how the data from your house was received in Unplugg. The new website had to have a similar graph but emphasizing the new features available. One of the most interesting features is disaggregation, this means that it would be possible to identify which devices are spending more energy with just one sensor at the entrance of your house. Also, the concepts of history, real-time and estimates were very central to Unplugg since the recorded history was used to identify and create patterns, the live measurements were used to take actions in the present and the estimates were used to suggest and automate energy saving actions. After searching many types of data visualisation systems, I settled on a polar graph with two overlaying live feeds: the data of a house that is not using Unplugg and the data from the same house but with Unplugg powered on.

Using a polar chart allowed me to show the disaggregation of many household appliances at the same time without increasing the complexity of the graph exponentially (as it would have happened with a 2 axis line chart). The first version of the graph had the names of the appliances written around the graph, but that quickly became apparent to be a bad choice because the font would be too small on mobile devices. In order to easily replace the words with symbols, I created an icon font on this amazing website called Fontastic. By creating a font with the symbols, I was able to insert the images by assigning letters to each one, and changing the labels on the graph to that font. One of the difficult parts of creating the graph was having two layers of interaction overlapping: the animated graph on the background with hover animations for each value and the handle on top that allowed the user to change the view setting to history, live or estimate. The handle part was particularly complicated as the way I first programmed it didn’t work on some browsers, especially some versions of Firefox for Linux systems. Even the current version still has some problems on older versions of Firefox, but it works on the latest version of every browser.

WHOAA it moves…

Since the copy of the website changed the illustrations had to change as well. The first section contained the graph explained above therefore there was no need for an extra illustration. The second section has the title Em-better your clients’ experience, the idea was to show how Unplugg could improve the current situation of energy metering, which in most cases was non-existent. The illustration shows a series of lines (representing information) all tangled up, that come out of the Unplugg brain all organised, meaning Unplugg simplifies the mess of data analysis. Once again the animation is accomplished using the attributes of stroke-dasharray and stroke-dashoffset, however with a different purpose. Firstly, I set the dash array to a large dash length and a small space length, then I used SASS random() function to assign a different dash offset animation to each stroke so that each one had a different spacing. The third section is about the integration of different sensors into the service, so the illustration shows a simplified version of different energy meters connected to Unplugg.

Horizontal craziness

Having designed the desktop version of the website it was time to think about all the changes required to adapt it to be viewed on mobile and tablet. Some sections needed to have a different layout, depending on the width and height of the device some parts remained the same while others had to change. One of the biggest challenges was to display fullscreen sections, that were coded in CSS with vh units, on small devices, especially bellow 600px tall, not to mention horizontally. To solve this crazy situation I decided to limit a min-height to all the sections of 600px, so even on small devices the sections are not fullscreen but they fit the content and are easily read. The problem with changing from vh to pixels was that all elements needed to be repositioned using fixed units, otherwise they would all get crammed on top, especially on iPhones (4 to 5s) in landscape mode. Then, came the browser compatibility madness, for some reason Firefox doesn’t like when you set clip-paths in percentages… After fixing all that mess, I ended up with seven media queries: mobile, mobile-landscape, mobile-landscape-large (for those huge phones that look like ironing boards), tablets, small laptops (below 11 inches), average laptops (11 to 14 inches) and huge screens (Full HD and over). The default size would be 15 inches (the size of my laptop). I believe I reached a state of almost perfect graceful degradation, meaning even if the website is not perfect it is not completely broken, if you find a device where it is broken please let me know (appreciated).

Conclusion

I would like to take some time to thank the awesome help of Renato and José. Renato helped me fix some major misconceptions relating CSS and speed up my workflow with a basic gulpfile that allowed me to have html partials, extended layouts, asset minification, SCSS compilation, browser sync and deploy at the run of a simple command. José was a great pal always keeping tabs on me, and was especially great at helping me improve the algorithm that rules the animation of the logo turning into the symbol. It is not perfect yet, but it is much better than the version I had before. Also, the rest of the team at Whitesmith were all great always ready to help me, and continuously improve, version after version, the Unplugg website. I’m quite happy with the result of this redesign, of course, there is always room for improvement (nothing is ever a perfectly finished work for a designer…). I would also like to refer that every bit of this project was done with 100% open source software, from Inkscape to Gimp, Atom and GitHub, Gulp automation and HighCharts graphs. This only proves it is possible to create a shiny new identity without expensive software. Big thanks to all the people that give away their time to contribute to open source projects like these. Ladies and Gentlemen, please welcome the new Unplugg: