Research helps to determine the project basis & meet your highest expectations and needs.

To make a fast and beautiful website and not get away from the concept

Author

Maria Nikolava

Category

Development

Date

Feb 16, 2020

Digital studios develop websites from scratch or redesign projects for their customers, but when it comes to their own corporate site, several problems arise. We will tell you how to overcome them by our example. 

Why we decided to redesign our website

First, we wanted to realize our potentials in design and development. Our competencies are growing, and we must demonstrate it to the audience. Secondly, we decided to replace Wordpress, on which the old website was developed, with the latest technologies. Thirdly, our company is growing and changing, so it was necessary to update the content. And finally, we wanted to express our design philosophy through the updated site.

This was our previous website

Big idea

So, we have three competencies: web, mobile, and design. We wanted to convey to the audience that our work combines manufacturability and creativity while maintaining the ideas of ​​the customers. Our main message is following the dream.

Design

Version 1: Space

We wanted to show that we were able to realize any idea of ​​the client, and we were very attracted by the metaphor of making wishes. In this step, we used colors for each direction in our branding: yellow for design, blue for web development, and red for mobile development. 

What did we do wrong?

We carried away the details and forgot about the structure of the website.

Trying to create an idea, we lost it. This would prevent us from standing out among other agencies because we did not have a clear concept.

Version 2: Black & White

We postponed the main page and returned to the development of wireframes for the other pages. We tried to understand what content to publish because we did not want to overload the site with information. At this stage, we have developed an approximate structure of the website, which preserved until the final version.

What did we do wrong?

We used ill-conceived solutions that complicate development. For example, the grid did not allow us to make an adaptive interface: we had to adjust the grid and elements for each resolution.

When we finished the inner pages, it was hard to fit into them the concept of space and dreams, which we wanted to return to.

We could not decide what to use — photos or illustrations. As a result, the content was inconsistent. 

Version 3: Modify the Created Concept

We tried to get away from the black & white minimalistic version and make options in a different color. 

What did we do wrong?

We were fixated on the current idea and were afraid to try something else. 

Version 4: Redo Everything

Given the experience of past mistakes, we decided to arrange a design brainstorm to get completely new ideas and concepts. We started from the first screen to lay another idea in the design of the site. We wanted our website to show our level of creativity and be user-friendly.

What did we do wrong?

This version had navigation and sectional scroll, which complicated the life of the clients.

We worked alone without asking for the opinions of colleagues.

And finally, we settled on the last option.

Final version

We made a challenge to draw the MVP design in 2 days and immediately transfer it to development. As a basis, we took the content that we already had. 

We emphasized our works, interactive elements, and a well-developed promotional screen, leaving everything else minimalistic. While the developers were implementing the website, designers all gathered at the brainstorm with the entire design team and made the concepts for the new promo screen.

Development

We left Wordpress and developed a new site using the Nuxt.js framework, a collection of the Vue.js library, with an SSR mechanism. This made our website 100% SEO-friendly and gave us freedom in terms of design and reduced the page loading speed.

Our project is located on Amazon S3 file hosting. It offers flexible infrastructure that scales according to our needs. This ensures the smooth operation of the site both during the recession or peak traffic. You can use any platform with it, and it also provides SDKs for Java, Ruby, PHP, Node.js, .Net, etc. 

For the fastest delivery of content to the end-user, we chose the Amazon CloudFront service. It allows you to receive files from anywhere in the world at the same speed. 

For the backend development, we chose the Contentful CMS platform. It works on the principle of CND (Content Delivery Network), which means that receiving data is very fast. The stability of the system was critical to us, which made it stand out among other solutions. We also liked the intuitive interface for creating models and editing data, which allows a person who does not have programming experience to edit and add content. 

In total, according to Google PageSpeed ​​Insights, we were able to reduce the page loading speed on the site from 3.5 to 0.7 seconds. Google PageSpeed ​​Insight rated it 99 points.

Competitions

We decided to take part in the design and digital competitions. Our website already received "Special Kudos" at the CSS Design Awards and "Honorable Mention" at Awwwards. These awards indicate that judges and users rated us highly for usability, creativity, content, and design. We also managed to take the "Mobile Excellence" Award for an adaptive version of the website. Now we are waiting for the rest of the results.

Conclusion

  1. Work as a team. Feedback from colleagues and a fresh look at the project is necessary.
  2. Be aware of the goals of the project you are creating.
  3. Do not be afraid to start all over again if the idea is a failure.
  4. Do not be afraid to release a version that is not ideal in terms of design and to use an iterative approach in development. Some errors are visible only on the working product.

Have a Question?

Write to us to get a free consultation with our experts.

Speak to the expert