close

Hit enter to search

Portstream Our partner company website

Portstream - Gallery template 1Slide 1 min Portstream - Gallery template 1Slide 2 min Portstream - Gallery template 1Slide 3 copy 2 min Portstream - Gallery template 1Slide 3 copy min Portstream - Gallery template 1Slide 3 1 min Portstream - Gallery template 1Slide 3 2 min

Portstream is our partner agency. We do a lot of digital things together. They asked us to redesign their website. Wanted something really slick and modern.

 

Portstream redesign

There are a lot of different ways in a website redesign approach. You can analyze usage data, see what works on the current state of things, push those usable things more front so the user has less work. Or, you can do a good old revamp, do things from scratch when the old site just doesn’t has its “vibe” anymore.

That last one was the case with Portstream. 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 was one page website, aka OnePager.

Organizing information to groups that belong to each other was part of the plan for a later card sorting and research. So we had to build movable modules, which resulted again in custom backend CMS awesomeness.

 

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

Designer => Developer handoff this time produced some very interesting results. The request from client was to have as much flexibility to reorganize content from the cms. Aforementioned modules and information architecture resulted in a drag & drop functionality in the backend. You think that chunk doesn’t belong there? Move it with a drag and save. You don’t like a solid color? Switch to gradient. And yes, a whole gradient functionality built in. That’s pretty awesome if you ask us.

 spie anim

 

Animations

We tried out Lottie plugin Airbnb design has built for Adobe After effects. So, we animated few thing and exported them to JSON powered SVG’s. The result was great, although we were very modest in usage. We animated only of the client logos, so we kept the load time optimized. Portstream  was a test ground for it. We used same tech on our website as you can probably notice. The main reason is that it is an SVG animation, which means it's light in kilobytes, vector based, it works on all platforms across the web landscape and it looks great.

Portstream website redesign

Year: 2017
Categories: Website

More works