Reboot: The Shtab Project Management Service Website
Updating the main page, adding pages about the mobile app and the boxed version, redesigning outdated blocks – we tell you how we redesigned the Shtab service website.
When working on a developing product, in which the capabilities are chinese overseas australia data regularly updated and supplemented, there is a need to periodically update the site. In this case, we will tell you how we updated the site of the project management service , maintaining the continuity of the design, but making it more modern and understandable.
Tasks
Before redesigning and updating the site, we set the following tasks:
- “refresh” the design of the main page, make the site a you can turn those relationships into sal more modern, without deviating too much from what it was;
- update content;
- optimize large amounts of text in some blocks;
- develop a new block for the main page Aero Leads with an illustration in the form of the headquarters;
- create new pages: mobile applications, boxed version.
Solution
As part of the project we:
- We completely redesigned the first screen of the main page: from the message to the visual component;
- added a block with dynamic data on service user statistics;
- reworked the block with the main software features, making it in slider format;
- developed a new information block comparing the service with the headquarters;
- updated the block with articles from the blog;
- added links to explainer videos from the YouTube channel;
- updated the block with downloading mobile applications;
- developed new pages.
More rigor, but airiness in design
We started the redesign by reworking the first screen of the main page of the site. We reduced the number of gradient colors to one shade, replaced faceless icons with service interface elements, and added a dynamic header with a change in USP. These solutions helped make the first screen more presentable.
Was:
Became:
The block about the main functions of Shtab with a large amount of text was designed as a slider with convenient switching between slides.
Was
Became:
How to build the right associations
When Shtab was conceived, at the naming stage, an association with the headquarters of a large corporation was laid down. According to the idea, Shtab is the first step and assistant for companies that dream of the highest peaks. The service helps organize the work of different teams and businesses, regardless of the direction and scale.
To emphasize this association, we developed a schematic image of a large headquarters, around which we placed small blocks with hints on how the service helps each of the areas. We also added the ability to go to a section with all the capabilities of Shtab.
Read, watch, get inspired: we made catchy content blocks
We have reworked the block with articles, which was previously presented with titles and a short description. We have added covers to the materials, as well as photos of the authors, to show that these are not faceless texts, but articles written by real people.
In addition, we added new blocks with YouTube videos (and then RuTube), where Shtab specialists talk about the capabilities of the service and share useful life hacks for work.
Now on Android
By the time the site was updated, Shtab had released a native Android app, so we added Google Play and RuStore buttons to the download block.
For the desktop version, we also added QR codes that allow you to immediately go to the required app store on your smartphone and install Shtab.
At the same time, we have developed a separate page for mobile applications. On it, in separate visual blocks, we:
- emphasized the advantages and possibilities of working in the service from a smartphone;
- demonstrated interfaces on iOS and Android;
- added links to app stores.
Boxed version with cost calculator
Shtab launched an on-premise version of the service this year (installation on your own server), so we developedor this event . On it, we reflected the advantages of the software and what software it replaces:
Reflected technical requirements:
But the most interesting thing on this page from the development point of view is the cost calculator. In it, the user can select the period and number of employees, mark whether he will need technical support, after which he will immediately have access to the final cost and the opportunity to leave a request.
Result
We have maintained the continuity of design, while breathing new life into the site, filling it with additional pages, and making the main page more understandable, structured and presentable.