Kagesoft has been developing software in the US market since 2012. During this time, the company significantly expanded the list of services and received an updated logo with corporate identity at the end of 2018.
At that time, the company’s website was already too outdated and required redesign according to the new style. Also, it was necessary to expand the list of services and add a new section «Portfolio» with a description of completed projects.
Solutions and goals
Therefore, colleagues from Kagesoft asked me to create a modern website design using a new corporate identity.
The new version should be attracting potential partners and customers.
My responsibility was to create information architecture and navigation, website design and HTML/CSS/JS development with the requirements of WCAG 2.0 and W3C standards.
I’ve done a completely new site from scratch, which received the maximum score in the Google PageSpeed Insights test — 100 points.
Long story short
At first, I conducted a small review: I evaluated the new corporate identity and the current company’s site then received the client’s wishes for the new site and conducted a quick analysis of competitor sites.
After this research, I decided that I could really realize all the client’s tasks. Therefore, our further work went through the following stages:
- Initial client survey (list of competitors, references, description of the target audience, list of KPI). Analysis of competitor sites. Drawing up technical specifications for the development of a new site.
- Creating information architecture and navigation. Preparing content for the site. Sketching and prototyping. Design a website’s homepage and presentation of a new concept. After that starting HTML/CSS/JS development only for the homepage.
- Design of all pages of the website. HTML/CSS/JS development of all these pages. Testing, verification of texts. And finally launching the new website.
- The project was completed and launched 2019, May 21 in the public domain kagesoft.com.
After we rebranded the company identity, we turned to Artem to design and develop our new website. This was our first project with Artem, so before signing the contract, we spent considerable time discussing our requirements and project plan.
In the process of development, Artem openly accepted feedback, answered questions, proposed new solutions.
A huge amount of time it took us to agree on design elements, especially photos (because this is a very subjective aspect), and Artem very patiently worked with us to find options that suit us.
In general, we were satisfied results and recommend Artem as a good professional!
Before drawing up detailed technical requirements it was necessary to analyze the sites of competitors. So seven competitor’s sites were selected for research by search query «Custom Software Solutions» in Google.
I made a comparison table according to the main criteria: a structure of the main menu, a «Contact Us» button in the header of the site, a large photo/video on the first screen, what a block on the second screen, a list of services, a list of client logos, a block with projects in the portfolio, a text about the company, a contact form before a webpage footer section. In addition, I calculated the total number of blocks on the main page of each site and the number of user screens that it occupies.
In the last column of this document, I added a new Kagesoft’s website and together with the client, we approved a list of what needs to be added to the new site.
Thus, at this stage, my client and I have a clear understanding of what the new version of the site will be and what emphasis we will make on the new main page.
The new information architecture of the website was compiled after analyzing the sites of competitors. A document with a list of all categories and pages on the website has also been developed. For each page, the most basic fields (name, url, title) were filled, and a little later, other fields (description, keywords).
The main navigation will be located in the website header to the right of the logo. Therefore, links to the main categories (Services / Portfolio / Company) will be placed there with a drop-down list of internal pages for each category. This solution is familiar and easy to use for users, and its implementation will not take much time, which was important for the client.
Also, apart from the main navigation, I designed the navigation menu in the footer of the page. I decided to show here all links to categories and subpages of the website because there are not so many of them.
The final version of the user journey on the website looks like this:
I want to note such features here:
- Pages about services are additionally linked by links in the text.
- Pages with descriptions of completed projects are linked with pages of used services in this project. Conversely, on the pages of services are links to projects in the portfolio.
- A feedback form is located on each page and encourages the website visitor to send a request for project development and become a client of Kagesoft.
Paper sketches and low-fi wireframes
At this point, I clearly understood the structure of the website and user scenarios. So I started drawing the first sketches just on paper. After several iterations, I managed to come up with a better version of the blocks’ location and its sequence.
Then, based on these sketches, I created several versions of the homepage prototype for screens of different widths (1400 px, 1000 px, 320 px).
I used only shades of gray in the prototype, without any bright accents, to concentrate on the content as much as possible.
In my opinion, the order of blocks on the homepage is very important when you first visit the site and affect the formation of the first impression of the company. For example, such a scenario: when a visitor (this is a future client or partner) views and reads the homepage, he learns the history of the company, sees its advantages and list of services, and then goes to the next pages with a description of services and completed projects with customer reviews. The purpose of the script is a completed application for a new project.
Three design principles that are implemented in the project:
Each page begins with a unique photo metaphor, which is related in meaning to the text on the page. All descriptions of services and projects are supplemented by diagrams and graphs. And also they made in the same style to maintain a common visual code on the site.
Each block and diagram on the site is responsive and adapts both to a mobile screen and a large desktop monitor. Texts and images on each page have large margins and indents; they can be easily compressed or expanded to look harmoniously on the screen of any device.
Each page of the site consists of separate independent blocks in which you can add new units of content. In the future, it will be easy to add new pages of services or new projects. The site can be rapidly scaled by following the guideline of styles, which also has been created.
Crafting Design Process
1/ Personal photo for each page of the site
A carousel with links to service pages is located on the first screen of the home page. To make the site more memorable, I decided to create a personal visual solution for each service, based on photos from the real world. For example, for the Web Application Development page, I selected a photograph of a manufacturing process at a factory that displays a lot of sparks and industrial equipment. Because the development of any software product combines a lot of sparks from managers and customers. For example, the Enterprise Integration page received a photo with a view of the skyscrapers to visually convey the atmosphere of the industry for which this service is intended.
This approach with photos from the real world is much better perceived instead of regular stock photos, for example, by searching for «Software development» on Shutterstock. Compare yourself two variants:
After approving this concept with the client, I decided to use photo metaphors on the services’ pages as a background image under the page title. Thus, the visitor is formed a sense of integrity of the design of all pages of the site.
For the remaining pages, I also selected background images and photographs to follow the accepted concept.
As a result, to display all the necessary graphics, it was necessary to review, probably, a thousand photographs and about 200 of them I tried to use in the design of the site. This stage took almost a third of the total project work time. It was a real challenge!
2/ Responsive schemes
In the prepared text for the website, there were graphs and diagrams for almost every page. Some of them could be made using sequential cards in the format «Icon + title + text». But for a few pages, I designed completely new options.
I made each circuit readable and understandable on a small mobile screen (only 320 pixels wide).
3/ The concept of sequential text descriptions
The idea of the concept of interconnected text blocks on the page was born in the process of preparing content for the site.
Processes or methodologies for the work of development teams are very often described as successive steps. And here we get a dry plain text — paragraph by paragraph.
My goal was to supplement the description with icons or visuals and to show the semantic connection between paragraphs of text. And besides this, I made these blocks responsive and not losing their meaning even on mobile screens.
For example, the Build vs Buy block on the Custom software solutions page.
For example, an ADA compliance page is all made up of consecutive blocks with large graphic elements.
For example, the Company page and the block with the description of Engagement and Support Models.
4/ Accent blocks
The use of bright background images in the design of the blocks is a technique that adds a cheerful mood to each website page. Such blocks are located at the bottom of the page and focus on the important text or draw attention to other sections of the site.
When creating the first two or three pages, the idea was born to use wildlife photos in these blocks: green plants and leaves. In my opinion, it turned out very interesting and bright, especially for the corporate website of a software developer company.
After the design of the main page was ready, I made a website style guide (fonts, colors, headers, icons, blocks), which is extremely important for development (HTML/CSS/JS).
In this document, I have collected all the interactive elements such as links, buttons, form elements. Also, I designed them in different states (hover/active/focus).
It was especially important to design all the menu states in the header of the site:
- Two backgrounds: a transparent background (at the top of the page) and a white background (at the moment when the page is slightly scrolled down).
- Два вида адаптивного меню:
- Screens with a width of 320 pixels to 767 pixels — the menu is hidden under the hamburger icon and is shown on white background only by clicking on the icon.
- Screens with a width of 768 pixels or more — the menu is completely shown in the header, and the hamburger icon is hidden.
- Design drop-down menus for sections Services, Portfolio, Compliance.
- Highlighting active menu items so that the user can easily determine which page he is currently on.
1/ General website assembly diagram
Automatic site assembly was implemented using the Gulp task manager according to the following scheme:
- All separate svg icons are automatically collected in a single sprite.svg file (and sprite.png for older browsers).
- Styles from Sass files are generated and minified into a single CSS file.
- A file with critical CSS styles is created for each page of the site.
- The Mozilla Nunjucks framework generates HTML files with all critical CSS styles and JS code.
- All other graphics (jpg/png files) are optimized before publication.
2/ Bootstrap + JQuery
At the request of the client, the site layout used the Bootstrap 4.0 library with jQuery. This solution even reduced development time, because I took the blank from the site getbootstrap.com.
Since this is a completely static site, Github statistic shows 70% of the HTML code. The entire site takes up 18.5 MB of server space (of which 14 MB are images).
3/ Web page loading in 0.5 seconds
All external CSS/JS files and images don’t block the rendering of the web page, because I’m used the lazy load method. And also this positively affects the rendering time of the first content and the page load index.
4/ Custom font
I should also say about the font. According to the company’s corporate identity, it is necessary to use the custom Lato font on the site. It is linked on each webpage without blocking the display of content and it’s applied only after full downloading the document (FOUT method, read more on css-tricks.com).
5/ How to upload a large background image to the first screen in 0 seconds
I want to tell how was resolved the issue by loading large images on the first screen of each page. The usual lazy load method didn’t work for the images in the first slide on the homepage and the first screen on the internal pages. Because the web page with built-in critical styles was loaded and displayed in the browser almost instantly, but the loading of the main picture lasted a couple of seconds. Because of this, in the first two to three seconds, the page looked blank and not beautiful.
The solution was not difficult at all. In the «src» attribute for these images, I put base64-code, which was generated from the reduced JPG-version of each picture with a quality indicator «0». Thus, it was possible to achieve small sizes of base64 code on each page (about 20-40 KB) and images were shown immediately after loading the webpage.
I wrote a special algorithm for pre-loading photos for neighboring slides in the carousel on the main page. These slides are not yet displayed on the screen, but after loading the webpage they are ready to appear either automatically or by a user click on the link arrow.
All HTML/CSS code was successfully validated at the W3C World Consortium website.
WCAG 2.0 Compatibility
WCAG is a document with recommendations and guidelines for making website content more accessible to users with disabilities.
The new Kagesoft website follows all the requirements of the second version of this document and passes the tests without errors.
The most interesting point, which I would like to talk about in more detail, was in the implementation of the carousel with slides on the homepage according to the requirements of WCAG.
The fact is that following these requirements, the visitor should be able to control the movement of the website content from the keyboard, for example, using the Tab key.
Bugs out of the box on the Bootstrap
And it turned out that the standard carousel in Bootstrap/JQuery cannot correctly provide slide navigation using the keyboard. What I mean:
- When the focus falls on one of the elements of the carousel, the automatic slide change should stop. But this doesn’t happen.
- The focus moves to the content inside the first slide (for example, a button or link), and then to the arrows (carousel controls). Clicking on the arrow changes the slide inside the carousel, but there is no way with the Tab button to focus on the content in the opened slide. It remains possible only to flip slides back and forth, or to bring out the focus from the carousel.
- The back arrow always comes first in focus. This contradicts the usual direction of changing slides in the carousel (from right to left). It’s more correct to make the «Forward» arrow the first to receive focus because the visitor expects to see the next slide, not the previous one.
Errors in the carousel on the W3C website
Unfortunately, an example is shown on the W3C website that has the same problems. And one more thing — there is no way to quickly skip the carousel and go to the next block, setting focus on it.
If you imagine a situation where there are more than 10 slides in the carousel, then this will be a real UX-hell for the user to «jump» through the carousel to the next content.
Solution for kagesoft.com
I analyzed all the nuances of the carousel in different user scenarios (using the Tab button). As a result, I concluded that a site visitor should be able to:
- Put the focus on the first slide of the carousel and it will stop automatically scrolling slides.
- There is no need to set focus on the arrows that control the carousel with the mouse. So, in this case, there is no way to set the focus back from the arrow to the content in the slide (because a next slide appeared on the screen, and the previous one disappeared).
- When you move the focus from the content of the slide, it sequentially gets to the «Next slide» and «Previous slide» buttons. Pressing any of these buttons changes the slide in the desired direction and immediately puts focus on the content of the appeared slide.
- If the visitor does not select any of these navigation buttons in the carousel, the focus will go to the next element on the page. This behavior for the user is much simpler and more convenient in comparison with other implementations, which I talked about above.
This is how I made a carousel on the homepage so that it would be simple and convenient to use using the Tab button.
Google PageSpeed Insights: 100 points
I pay maximum attention to the quality result of my work. I believe that the site should be not only convenient and beautiful, but it must be fast. I create sites that get a score of 100 points in the Google PageSpeed Insights test.
Do you agree with me that you are also pleased to visit sites where pages are loaded and displayed on the screen in less than 1 second?
Thanks for reading!