Redesigning our existing website

This is the third blog in our series of blog posts where we are talking about upgrades and redesign process of our website. As I mentioned before, this is not an entirely new Kontra website. It’s more like an upgrade of the existing one to improve the overall design and, of course, to improve the features, reorganize the information structure, and to make it more interesting for the visitors. So basically all our design elements stayed the same, such as the color shame, typography, or branding elements.

In this blog post, I am going to take you through the process of redesigning our website home page and opening animation. This one really needed refreshment because it was outdated in so many ways. The biggest problem was the content and the information that we provided. With a new approach to the outside, the first impression was the key, so we hope that accomplished that.

Intro animation

Like all modern websites, we needed the intro animations, so the welcoming suits our goals. The intro animation is pretty simple and straightforward. It’s made of a loader and the most basic information like our company logo and a quick preview of what we are “Full-service digital agency”. The introduction ends with the loader becoming to stretch from the right side of the screen to the left side. This is an homage to the menu animation, and you can read more about that here.

Kontra’s home page – first slider

Homepage layout

The homepage design is divided into three different sliders. Each slider provides different sets of information about our agency, but some elements stay the same on every slide. Elements that stay the same are the company logo and the menu button. Here are also calls to actions for “contact” and “our work” page and the company email. We wanted to highlight those things and present them on every slide so that we could show results from heat-map analytics. We concluded that our email contact, page, and or work cases are most wanted things that are visitors search for, so we needed to done something. The other sets of elements on the homepage design are the pagination bar and the numbers which represent the slide you are on.

Another thing we need to talk about is sliders. Our goals were to present ourselves and gave quick intro and descriptions about our values, services, and specialties. We decided to go with the sliders because we wanted to keep the format of a static home page design, which means that scrolling would not be an option for a case like this. The first idea behind this approach was to present our self through three different animations. After a while, we’ve come to the conclusion that this may be just too abstract for the visitors and for us. After some brainstorming, we decided to go just with the texts. Every slide has one big title, a short description, and several highlighted points. We wanted to keep the homepage design simple with basic rules of white space, visual hierarchy and by that be consistent on every slide.

Kontra’s website home page – mobile

The main title of every slide communicating one of our statements, and those are “Full service-digital agency”, “Turning things around” and “First class experience”. Those titles are appearing with some smooth animations to make the hole homepage design more interesting. Also, the texts and highlighted points are coming with some different animations styles. The whole thing was a plan to be a quick presentation of ourselves with some interesting transitions to keep a visitor hooked in a small fraction of time.

Conclusion

You can never be one hundred percent satisfied with your website and with your presentation to the outside, but with this redesign, we made a step forward. As a small agency, we know our strengths, and we think we communicated it with this new homepage design in the right way. This was really important for us, and we think that we gave our visitors a quick quality presentation of our selves and all call to action on the one place for easier usability.