TASK
With the redesign of the site, we gave the most modern vision, preserving the distinctive signs and feelings of the brand, namely the fun approach, the modern way of presentation, and the convenience of the information. We opted for a lighter color range, as black is present in a large part of the site, as an accent color, along with red.
We have implemented key animations of some of the elements so that the fragmentation of the new design can be felt.
Structure and navigation
Many of the pages did not have a clear visual hierarchy of elements - thus users are loaded with a large number and volume of information and could hardly navigate.
The navigation did not follow the users, which created additional inconvenience. This issue prompts users to return to the top of the page if they need to go elsewhere on the site. Also, the search engine can be used much less often and is not efficient enough.
We relied on the Grid system for easy positioning of all elements. In this way, all the information follows the direction of the design and everything looks like a complete composition, with a clear purpose and structure. Large titles allow users to quickly and easily understand where the section begins and where it ends, without having to look around the screen.
We decided to make sure that the navigation always follows the users, no matter where they are on the page. This provides easy access to many other pages and the entire path. We also brought the search engine as a button in the navigation - this way, users can use the search engine optimally, and not only when they are on the home page.
📰 News and Reviews
The main pages of the website are individual articles and reviews. They seemed quite difficult to read and navigate. The Single News and Reviews did not have an added line spacing, which made it difficult to read for a long time, the headlines were lost in the text and it was possible for users to forget exactly what they had opened.
We presented all the news and reviews in clear boxes, betting that the latest news/review should be clearly displayed on the screens of users and therefore it is larger than the others in size. This will always add weight and is more likely to drive more traffic without users having to think and look at post dates.
For single news and review pages, we've made sure the headline is as big and clear as possible so that users know where they are from the beginning. We bet on large photos to clearly see the added accents to the articles/reviews. We've given more space between the lines to make it easier for users to read continuously.
📅 Calendar of events
The calendar with all the events was difficult to spot and could be easily missed by users. The information it provided, although detailed and sufficient for users, was quite small and difficult to read.
We've taken the calendar out as a separate page because we think it would help a lot for several reasons:
✅ Easier to find by website users;
✅ SEO support and external traffic management - People who are not looking for a news website, but are interested in upcoming events.
Separately, displaying the calendar on a separate page allows us to have more space to present information. So using the calendar is much more intuitive and fast. The information is easily visible on all devices (Desktop, Tablet, Phone).
📱 Responsive version
We rely on sophisticated practices, in terms of UX design. We have made the texts and photos large enough without looking disproportionate from a phone. We have significantly improved the visual readability of a quick news review; all elements are distinguishable and separated in their categories. Of course, we have maximized everything we can without too much changing the already existing responsive design's functionality.
Banner system
As Vsi4kiBri4ki also offers advertising space, our task was to make sure to provide enough options for this on the site, while maintaining its good vision and readability.
We have created a logic to consistently visualize banners in the very text of the news, taking into account its length and adhering to clarity.
For a resolution of 1366 px, space was limited for the presence of banner ads on both sides of the homepage content. Therefore, we have made sure that the banners on both sides are displayed at higher resolutions, where there is enough space for this.
Because the homepage and the news list page allow it, the banners on them follow the user, providing enough time for the ads on both sides to pay attention.
We also took into account that users may have Adblock available and adapted the site for similar situations. When Adblock is active, all banner fields are hidden without taking up unnecessary white space and this affects the good vision of the site.
Custom CMS
In addition to the functional, fast, and responsive design of the site, we have developed Custom CMS (Content Management System), thanks to which we have done everything the client needs - creating and editing news and reviews, managing inquiries and reviews, and approval of comments, information about the subscribers on the site, possibility to add new informative pages and others.
