Portstream

Portstream is our partner agency, and we do a lot of digital things together. They wanted something really slick and modern, so they asked us to redesign their website.

Portstream redesign

There are a lot of different ways to approach the redesign of a website. You can analyze the usage data, see what currently works well and put more emphasis on that, so that the user has a better experience. Or, you can have a good old revamp and do things from scratch when you feel that your old website has lost its 'vibe'.

With Portstream, we chose to do the latter. We redesigned it completely from scratch: wrote new copy, created new information architecture, new color palette - everything new.  

Information architecture

First of all, the approach we chose was to create a one-page website, aka a one-pager.

Organizing information into groups which belong to each other was the part of our plan in order to be able to do card sorting and research later on. This meant that we had to build movable modules, which resulted in custom backend CMS awesomeness.

Custom backend CMS awesomeness, color picker and drag and drop functionalities 

The Designer => Developer handoff produced some very interesting results this time. Our client's request was to have as much flexibility to reorganize content from the CMS. Hence, the aforementioned modules and information architecture resulted in a drag & drop functionality in the backend. Do you think this part doesn't belong there? They why not move it to some other place just by dragging it and saving the file. You don't like that solid color? Then switch it to gradient. And yes, the entire gradient functionality is built right in. That is pretty awesome if you ask us. 

Animations

We tried out the Lottie plugin, which Airbnb design has built for Adobe After Effects. The Portstream website was an ideal testing ground for this. We animated a few images and exported them to JSON powered SVGs. This produced great results, although we were very modest in our usage of the plugin. Specifically, we used it only for our client's logos in order to keep the page load time optimized. As you can probably notice, we used the same technology on our own website. The main reasoning behind it was that an SVG animation is light in kilobytes, vector-based, works on all platforms across the web landscape and it looks great.