Turning unusual vision into a novel map-based web product
Challenge
The challenge laid down in transforming a mind map with cases into a novel map-based website with convenient and intuitive navigation.
CyberQuantic has decided to take a non-standard approach, with its website focusing on what clients are searching for, rather than on the company and its specialties. The goal is for the client to feel like the main actor on the website, and to find solutions for their needs, whether it be to improve business efficiency, enhance their processes, or advance their knowledge in artificial intelligence.
Not only did we have to implement an intuitively understandable design, but to integrate with CyberQuantic's knowledge base while maintaining a high level of website performance without skyrocketing costs.
Elsane Guglielmino
CEO Quotium Technologies/CyberQuantic - Business Angel
Implex's remarkable dedication and proficiency in problem-solving stood out in our collaboration. Their expertise shone through not only in their stellar design and user experience proposals but also in their highly professional project management skills. Implex ensured transparency and control over the project's progression by utilizing weekly deliverables and meetings effectively. Their punctual communication style complemented their overall professional competence, making the entire collaboration smooth and successful
Solution
Since the main idea was to make mental maps the primary content and navigation method for the website, we started our work with CyberQuantic from the ideation stage, during which we focused on mental maps. The design uses hexagons to efficiently navigate concepts and use cases to present information and data structures in an easy-to-read and understandable way.
UI/UX Design
The concept for the website design was based on using hexagons to represent a huge scope of information efficiently. The website's main idea is that a user can navigate between concepts, and by selecting one, they can be redirected to a list of use cases with short descriptions that have been implemented on the chosen topic. Additionally, by selecting a specific user case, they can access a page with a detailed case description. If necessary, the user can submit a request for feedback to estimate a similar case.
The hexagons were developed manually without using third-party libraries in order to ensure maximum productivity while working with them.
Technical Solution
To ensure high website performance, the decision was made to use Next.js — a framework based on React that allows the creation of web applications with improved performance and user experience through additional features of pre-rendering, such as full server-side rendering (SSR) and static page generation (SSG).
To smoothly integrate with current CyberQuantic’s business processes, we integrated the site with their Airtable DB and used its API for searching and reading data. The solution allows potential customers and partners to conveniently leave context-dependent requests to CyberQuantic, implementing an effective lead generation machine defended by react-google-Recaptcha.
The tools and technologies we used were:
Results
Thanks to the cohesive work of our team, the use of technological solutions, and extensive experience in developing web applications, we have created an innovative website with an intuitively understandable design.
We are most proud of the following achievements:
- Intuitive and simple design, nevertheless the site provides information about a list of over 600 companies in Europe that are working in the field of artificial intelligence, as well as a list of over 200 open APIs
- Excellent ratings of 90-100 on Google PageSpeed Insights for both desktop and mobile devices
The website is supported in two languages (UI and data): English and French. It also has an adaptive design for mobile and tablet devices and supports the most popular web browsers.