Rediscovering established brand

Perfectial

Perfectial is a business-oriented product design and development company committed to helping businesses kickstart, develop, and succeed. Perfectial has implemented innovative ideas that allowed businesses – large and small – to scale, evolve, and prosper in a range of business domains. Perfectial’s competence in working with modern platforms and frameworks is recognized and highly valued within the U.S. and European markets.

Our role

Our primary task was to evaluate the existing site and suggest improvements for its visual promotion. Basically, we started out with an intention of a slight coverup with no radical changes. But, after the site audit, few feedback sessions, market analysis and first sketches, these slight changes have turned into a full-scale redesign and later into an adoption of a totally new design language for the Perfectial brand. We created a content-oriented modular design system and built our new site on it.

Start

Top-managers and functional offices representatives shared their feedback and stated, that the former home page failed to communicate company’s needs and offerings. The research has pointed out some new content requirements and the need to make the first screen more informative. The video, that has been embedded into the previous version of a home page became ineffective and also caused poor page performance. Additionally, the home page video didn’t align with our new requirement — to accentuate key information. Instead of facilitating the page it became a distraction and served as a poor background for messages we wanted to emphasize. For the same reason, we also rejectet heavy illustrations and icons, that served mainly as a decoration.

In search of a unique solution

After we've conducted a deep analysis of the home page it became obvious to us that minor changes will not bring a desired result. Couple of visual refreshments we planned to introduce, along with new pages and content lead to the loss of visual integrity of the website. New redesigned pages were made by different people, thus the need to unify the overall look of the site became inevitable.

Our research has also shown that architecture and visual look of the site could not be changed that often, with the new pages being added every once in a while. This is quite an issue for websites that tend to expand.

We concluded that small changes will eventually lead to a large-scale modification, and support of consistency will demand a new design system. So recognizing the fact that cosmetic cover-up will not grant us the expected result triggered us to start working on a total redesign of Perfectial’s website.

• Requirements & dependencies:

• Adapt the existing content to the new design
• Resolve previous problems with content creation
• Keep the existing website structure

After documenting all the areas, that demanded the most attention, we analyzed our competitors. First and foremost conclusion we've come to Perfectial’s website has lost its unique appearance among many other software development companies. Thus, we've decided to go went for a clear, functional and esthetic solution: each element of the website needs to have its own designated function, without any excessive decorations. This is how we understand clarity that brings functionality, and this has become our new vision that should also assure effective visual promotion.

Pages architecture

Taxonomy is one of the key instruments in information architecture. Human brain on a subconscious level tends to categorize all the input information, so it won’t get lost within its own knowledge. That is why it's easier to find a book in a library when shelves are sorted by genres. Even though we were limited with possibilities of change in site architecture, we still managed to introduce some fixes.

Design system

We created a modular design system based on the principles of atomic design, built on the single flexible template with permanent and variable modules. In other words, anyone can easily create a new page, it’s like a construction kit.

Visual solution

The previous version of the website was overloaded with visual elements, many of which failed to cover any purpose, and diverted the attention away from the content. Design was not flexible and often failed to match the content, on the contrary – the content was to be adjusted to the design. There were many illustrations that somehow were in the context, but frequently confusing, their style often immature. The overall style of the website could not catch up with the real face and spirit of the company. That’s why we've decided to go for a disciplined and functional design, leaving behind all the unnecessary things. From now on, none of the graphic elements should be used just because "it’s cute". Functional needs are at the top of our list, with aesthetics following as second.

Typography

The fundamental means of our new design system is a text and its presentation, as foremost, Perfectial’s website is an informational space in a first place. Text is the main tool of visual communication, information carrier and holds one of the strongest positions in design industry. That’s why we made new website text-oriented and comfortable for reading. The previous version of the website used three different font families, in the new version we limited it to only two. They, that suit each other really well: PT Serif is used exclusively for the body text and Roboto for all the other needs.

Fonts can be combined only if they possess minimum 2 out of 5 common parameters (structure, contrast, dynamics, weight and width) and only upon condition when there are no other conflicts, for example, associative coherence (comic sans font has been created solely for comic books). In our case, we used the method of contradiction, when there are only 2 common parameters and 3 different. If there were 3 similar parameters, then it would be a method of harmonization.

• Diverse parameters:

• Structure

  Roboto – Sans Serif, PT Serif – serif

• Contrast

  Roboto – Sans Serif, PT Serif – serif

• Dynamics

  Roboto – static, PT Serif – slight oval inclination van be seen, that indicates the font’s dynamics

• Common parameters:

• Weight – practically the same for both fonts
• Contrast – practically the same for both

Also, PT Serif is a modern antiqua font. Like Roboto, it has small difference between upper and lower case letters, which makes it easier to read in a small size.

Headlines that are being typed in a real time create the impression of a direct communication between the company and a visitor. This is a kind of a dialogue, in which a headline is the first phrase towards the user. Also, because the title is being typed in right as the page loads and all the content appears later, we form a text hierarchy.

As the new website is based on a heavy text usage, we added an element of classic styling – the initial letter. It has been used since Medieval ages and still remains quite popular.

We have cut the color pallete down to two – red and black. By using black and adding transparency to it we get shades of grey. Red color is basic and is used for interactive elements, key titles and all kinds of emphases.

The described process can’t be considered as completed, we still foresee a couple of iterations and development of the new design system.