SOSELECTRONIC.COM CASE STUDY

Why was a new website needed?

Updating data in real time, a more user-centric orientation, responsive design, and artificial intelligence.

1. Updating data in real time

The exchange of information between the company’s enterprise system and the website worked in batches. And even though it only took a few minutes to load this sensitive information, this was not always fast enough.

The new site is based on real-time data updates, and any change in the number of items in stock will be instantly reflected on the website.

2. User-centric website orientation

We listened very closely to the website’s users, and we made the most improvements in terms of parameter handling.

Why should a user be defined, by what parameters, and what sort of orders can they view for filtering? The new solution even allows users to complete simple “drag and drop” orders and remember these details during their next visit.

We added an “autocomplete” feature to the search engine which compiles the possible results and the number of categories in an expanded window while you’re searching for the text in real time.

The system also scans the goods according to the values of their parameters. We added another useful “crunch” function to the parameter list and added “goods with similar parameters” to the details of each good.

3. Responsive design

Today, responsive design is a matter of course. The new website is fully customizable in terms of its content and the layout of the user’s display. Additionally, the control of individual site elements is customized. Which, of course, is not the same for everyone. We’ve also mastered the mobile (finger touch) and computer (mouse, keyboard) options.

4. Smart web – a website that learns from its users

Gradually, we placed elements of artificial intelligence onto the website. Today the system will remember the parts of the parametric search that want to be active and how they should be organized.

Key areas of project success

Today we’re able to evaluate what was important in order to achieve a successful project. We think that without the quality of the people involved, the right choice of technologies, and regular communication with the website users themselves, the realization of this type of project would not have been as successful.

1. Technical analysis, solution design, and team building

The complexity of the solution, the link to the company’s enterprise systems, and a monthly e-shop turnover of more than a million sales were a huge responsibility for our team. The first step was a thorough analysis of the current state and agreeing on the technology to be utilized.

Right from the start, we divided the project into two separate sections. The first part consisted of the “API,” which served as the data source and described the entire logic of the application. The second part was the “Frontend” – the user interface that site visitors encounter.

In addition to the technological advantages it offers, dividing the project this way allowed us to make more effective use of our human resources. Several people could work on the project alongside the customer as well as at our headquarters. We all acted as one team, and we shared our roles as equal colleagues.

Team composition

2. Suggest a solution for User Interface.

One of the challenges for us was to design a user interface that it is accessible and easy to use for both B2C and B2B customers.

The solution consisted of regular communication with our customer and website users and gradually adjusting the individual elements of the page until they were just right.

3. User interface speed

In order to accommodate as many customers as possible, we were regularly adding new functionalities to the website. However, these changes had a negative impact on the speed of the site, particularly noticeable on mobile devices.

The improved page load consisted of minifying and optimizing Javascript and CSS styles. Multiple smaller files now automatically merge into one larger file. We’ve simplified the HTML structure of the page, and shifting some information into asynchronous calls also had a great impact on speed. Gradually, thanks to these small steps, we managed to modify the page so that it could be loaded very quickly on mobile devices or when accessing the website through slower Internet connections.

4. Working with the product catalog, creating a RestAPI server

With such a large number of products (270,000+), the narrow mouth of the entire application is dictated by the data processing speed of the product catalog. Parametric filtering as well as full-text search are very important for customers. Most components have multiple parameters, different price levels, as well as manufacturer restrictions that determine in which countries products can/cannot be sold. The amount of conditions places increased demands on the database and prolongs the time for viewing data on the frontend.

For the entire frontend, we used the Phalcon PHP framework to handle several times more customer requirements than with the regular PHP framework. We secured a sufficient margin in case of increased website traffic. We also chose Elasticsearch as the supporting framework for the product catalog. Elasticsearch is a search engine that can handle even demanding filtering conditions significantly faster than traditional database searches. Elasticsearch generates parameter filters, category lists, tags, and product lists themselves. Deploying Elasticsearch significantly accelerated the full-text search process for website visitors.

What about the E-shop after its launch?

The launch of a new E-shop created even more requirements for incorporation. They often came from SOS electronic’s customers, as well as from businesses on behalf of their customers. This involved incorporating special requirements that are typical of the B2B segment and, in the case of businesses working on behalf of customers, of functionalities that will make their work easier and more efficient.

Special requests from SOS electronic’s customers were often a challenge to implement. We had to think here both in terms of performance and how these requests could be incorporated into the existing user interface design.

Where did errors occur and what did we learn from them?

In the period before it was finalized, the entire project struggled with the problem of inadequately analyzing the specific requirements of VIP customers. We made a strong and fast website with lots of new features. We took a lot of stock in listening to website users. However, some features were not considered important in the new solution as we replaced them with new, even better features – from our perspective. And that was a mistake. The VIP customers’ view was different when it came to these enhanced features. And we had to get rid of them and adjust, which was then reflected in the project’s budget and the deadline for its final launch.

The analysis and design of the solution ultimately covered the requirements of 90% of customers, but was not sufficient for the special 10%. However, these 10% accounted for 90% of the total order volume. And this is a significant difference in the character of the B2C vs. B2B segments.