LinkByCar — adaptable design for AI-driven vehicle operation startup

time icon
2024
2022
arrow scroll icon
scroll

The top player in the French transportation market owing to the power of vehicle-generated open data.

LinkByCar is a SaaS startup that created a tool to collect, process, and aggregate data from vehicles. With the use of AI technology, it can predict the behavior of any vehicle — all to ensure you safely get to your destination.

The company cooperates with popular car manufacturers, including Stellantis, Mercedes, and BMW. With an extensive network already in a place, they have serious potential to expand across all of Europe.

The top player in the French transportation market owing to the power of vehicle-generated open data.

LinkByCar is a SaaS startup that created a tool to collect, process, and aggregate data from vehicles. With the use of AI technology, it can predict the behavior of any vehicle — all to ensure you safely get to your destination.

The company cooperates with popular car manufacturers, including Stellantis, Mercedes, and BMW. With an extensive network already in a place, they have serious potential to expand across all of Europe.

Industry
Other industries
Link to Industry
Transportation & Logistics
Link to Industry
Services
UX/UI design
Link to Service
Web design
Link to Service
Web development
Link to Service
Timeline
3,5 months
  • 48,000+
    vehicles LinkByCar gathers data from
  • 75+
    types of data collected by vehicles
  • 18
    car brands they collaborate with
  • 48,000+
    vehicles LinkByCar gathers data from
  • 75+
    types of data collected by vehicles
  • 18
    car brands they collaborate with
challenge

Insurance company managers and automotive corporations typically face challenges with complex software. That’s why the process of collecting data from vehicles can be a bit of a headache.

Real-time vehicle tracking, predicting potential problems, and accident reconstruction — all of these had to be considered in the product design. A perfect software offers everything in one place, simplifying things for those who aren’t fluent in the language of technology.

Challenge

Insurance company managers and automotive corporations typically face challenges with complex software. That’s why the process of collecting data from vehicles can be a bit of a headache.

Real-time vehicle tracking, predicting potential problems, and accident reconstruction — all of these had to be considered in the product design. A perfect software offers everything in one place, simplifying things for those who aren’t fluent in the language of technology.

It was a fully fresh perspective in every sense.

The research showed that competitors’ websites somewhat lagged behind the latest trends, which didn’t align with the technological and innovative nature of this business.

Hence, we aimed to convey the client’s digital orientation through a practical and rigorous branding approach, complemented by bright accents.

15 logo sketches
2 days spent on research
  1. Discovery. A user comes across a link or post in Discord.
  2. Saving to profile. The user can save these links/posts to their profile.
  3. Organizing content. They can create new collections or use existing ones to organize these links or posts.
  4. Easy retrieval. Later on, users easily find a specific link or post, either through a search, within a specific collection, or in their profile.
  5. Sharing. If they want to, users can share links, posts, or collections with others.
  6. Collaboration and discussion. Everyone can engage in discussions about what’s shared and even add new links to collections if they have access.
sdfsdfds
For a brand to speak with one voice, it needs a brand book to set the tone.

It was a fully fresh perspective in every sense.

The research showed that competitors’ websites somewhat lagged behind the latest trends, which didn’t align with the technological and innovative nature of this business.

Hence, we aimed to convey the client’s digital orientation through a practical and rigorous branding approach, complemented by bright accents.

15 logo sketches
2 days spent on research

Every innovation is built upon a solid concept.

Drawing inspiration from the essence of motion that defines a car’s journey, our strategy centered around the concept of a smooth line. Like the unbroken trajectory of a vehicle gliding along the road, this element represents our brand’s dynamic forward momentum.

When crafting ideas, we’ve embraced simplicity not as a limitation but as a powerful tool for communication. This approach allowed us to convey the core values and vision of movement and progress in a way that’s immediately accessible and resonant.

A golden mean between readability and symbolism.

We explored various wordmark options and, after a few rounds of tweaking, landed on the idea of using the infinity symbol. Then, our designers simplified the wordmark, making it even more clean and easy to understand.

To add a unique touch, we created a separate symbol inspired by the infinity sign, which can be used all on its own. This ensures the logo’s adaptability while maintaining its distinctive identity.

A clear understanding of the client’s business needs encourages our designers to experiment and deliver remarkable logo proposals.
{{valentine-boyev}}

“Less is more” endures as a timeless aesthetic.

We used linear shapes with various twists and illumination as the brand’s primary identifiers — these shapes serve as metaphors for roads. The main color theme is dark, which creates a striking contrast and gives the impression that all the elements are radiating against dark backgrounds.

In a nutshell, we strived for sleek and practical design solutions, which delivers that 'wow' effect when mixed with unique shapes and lively bursts of color. It draws inspiration from the metaphor of roads and connections, all executed in a minimalist futuristic style.

For a brand to speak with one voice, it needs a brand book to set the tone.
{{mais-t}}

French market as the main focus of our research.

Our team divided competitors’ sites by geolocation into US/UK and France audiences. As per research, we identified some cons of similar platforms: excess of accents, little air between blocks, too many stock photos, and non-consistent hierarchy of fonts.

Considering this, we proposed the client to emphasize accessibility and a modern approach. For this, our designers used live photos and videos, non-standard graphic elements, readable fonts, and a calm palette with extra accents.

9 competitors evaluated from A to Z
3 days dedicated to analysis

Spotlighting the dynamic nature of LinkByCar.

Concept 1: Road & movement

In the first concept, our team focused on movement and energy, evoking the idea of roads and travel. On top of that, we incorporated contrasting cards overlaid on the graphics, creating additional contrast with the main content.

Concept 2: Minimalist dynamism

The second concept incorporates dynamism primarily through gradient icons and unconventional header placement with shifts. It leans towards conservatism with a focus on text, complemented but not accentuated by graphics and photos.

{{slider-2}}

Platform that stands out in every aspect.

Given the common tendency among competitors to present information quite monotonously, we decided to chart a different course. Our goal was to show that even a “serious” platform loaded with vast data could be modern and accessible for users of all technological backgrounds.

Leveraging research insights, we mapped out a user flow to catch the product’s logic. We drew inspiration from modern dashboards and integrated this data into our project. Later on, our team worked on wireframes to achieve the desired functionality.

4 competitors evaluated
3 days devoted to a detailed study

{{cta}}

Customer-oriented features for long-term success.

Data filtering system for various indicators

To efficiently manage a large volume of data, we organized it into categories and introduced user-friendly filters on each platform page. We added an option to filter cars by model, year, service date, and distance and provided a function to view data for individual cars or as aggregate statistics for selected vehicles.

Custom dashboard with a full-screen map

Custom dashboard played a key role in creating a personalized experience. Here, we showed a full-screen map, allowing users to see numerous cars and their locations at a glance. Our designers streamlined this process by presenting a list with statistics when users chose one or more cars, allowing them to stay focused on the map and car selection.

Flexible layout to show the essentials only

Flexible layout aimed to display only the elements that suit users’ convenience. To help them focus on the task at hand, it features an option to hide unused elements and, as a result, reduce visual clutter. This allows users to adjust the interface to their current task, context, or personal preferences.

{{slider-3}}

This was a complex yet very interesting project, as our client sought not just design but a complete product creation from the ground up.
{{valentine-boyev}}

Making things simple and smooth for every user

Our team wanted to make sure that using the site and platform was a breeze for drivers all over France. So, we put heads together to create additional features that make every trip smoother and hassle-free.

Keeping this approach in mind, Halo Lab specialists built things intuitively so that users can just jump in and get going without any fuss. This way, we enhanced the customer’s experience every step of the way.

We’ve thought through each feature to make users drive smoother, not more complicated.
{{valentine-boyev}}

Shaping the front-end tech stack.

The client had a clear vision about their tech stack — they wanted the front-end built using React and Next.js. This was a great starting point, as core tools were already in place. Due to the project’s extensive scope, we needed to handle data from the server.

For this reason, we decided on a state management technology. But that’s not all — the project also required dynamic chart and graph visualizations, prompting us to enrich our tech stack with one more tool, Chart.js.

3 key technologies used
2 days set aside for exploration
For efficient data storage and synchronization with the server, we utilized Redux — a popular tool for handling extensive information.
{{sergey-diniovskiy}}

Client-side development process.

Next.js

In response to the client’s request, we chose Next.js, as it provided a robust framework for building dynamic, server-rendered React applications. This was instrumental in enhancing the overall performance and responsiveness of the platform — a key requirement for our project’s success.

Redux

For state management, we used Redux, a decision rooted in the project’s size and complexity. This tool excels in handling and organizing data, making it an ideal choice for projects of considerable scale. With Redux, we could efficiently store and access all vital information related to vehicles, ensuring seamless interactions throughout the application.

Chart.js

To enhance data visualization, we harnessed the power of Chart.js. This versatile library enabled us to create a variety of charts, each uniquely customized to meet our project’s distinct goals. Whether it was pie charts, bar graphs, or other data visualizations, Chart.js offered the necessary flexibility and functionality.

We needed a solution that allowed for versatile data visualization with extensive customization options, and Chart.js perfectly met these requirements.
{{sergey-diniovskiy}}
Concept 01
Concept 02
No items found.
Concept 01
Concept 02
No items found.
Data filtering system
Custom dashboard
Flexible layout
No items found.

Halo Lab provided brand analysis services that helped us with better understanding our market type, niche, customers, and competitors. They designed our whole SaaS platform, leveraging both UI and UX expertise. Furthermore, they used React to help us build a customer-facing dashboard that connects to our existing backends.

Halo Lab provided brand analysis services that helped us with better understanding our market type, niche, customers, and competitors. They designed our whole SaaS platform, leveraging both UI and UX expertise. Furthermore, they used React to help us build a customer-facing dashboard that connects to our existing backends.

Have a similar project or idea? Let's discuss the details.
Get expert estimation
Get expert estimation
expert postexpert photo

Ready to discuss
your project with us?

Please, enter a valid email
By sending this form I confirm that I have read and accept the Privacy Policy

Thank you!
We will contact you ASAP!

error imageclose icon
Hmm...something went wrong. Please try again 🙏
SEND AGAIN
SEND AGAIN
error icon
clutch icon

Our clients say

The site developed by Halo Lab projected a very premium experience, successfully delivering the client’s messaging to customers. Despite external challenges, the team’s performance was exceptional.
Aaron Nwabuoku avatar
Aaron Nwabuoku
Founder, ChatKitty
Thanks to Halo Lab's work, the client scored 95 points on the PageSpeed insights test and increased their CR by 7.5%. They frequently communicated via Slack and Google Meet, ensuring an effective workflow.
Viktor Rovkach avatar
Viktor Rovkach
Brand Manager at felyx
The client is thrilled with the new site and excited to deploy it soon. Halo Lab manages tasks well and communicates regularly to ensure both sides are always on the same page and all of the client’s needs are addressed promptly.
Rahil Sachak Patwa avatar
Rahil Sachak Patwa
Founder, TutorChase

Logo creation

Sketches

A truly iconic logo is a trail of drafts

We explored different sketches during the design process. Initially, our designers considered wordmarks that convey a sense of technology, innovation, or modernity. We also experimented with minimalist symbols to accompany the wordmark. Ultimately, our team chose a wordmark featuring the infinity symbol and a symbol formed from C and A, creating an infinity loop.

Sketches

A truly iconic logo is a trail of drafts

We explored different sketches during the design process. Initially, our designers considered wordmarks that convey a sense of technology, innovation, or modernity. We also experimented with minimalist symbols to accompany the wordmark. Ultimately, our team chose a wordmark featuring the infinity symbol and a symbol formed from C and A, creating an infinity loop.

Being a data scientist, our client had written Python code to perform mathematical calculations. So, one of our key goals was to leverage the right technologies to correctly integrate this code into the platform.
{{margarita-d}}

Logo creation

Logo creation

Sketches

A truly iconic logo is a trail of drafts

We explored different sketches during the design process. Initially, our designers considered wordmarks that convey a sense of technology, innovation, or modernity. We also experimented with minimalist symbols to accompany the wordmark. Ultimately, our team chose a wordmark featuring the infinity symbol and a symbol formed from C and A, creating an infinity loop.

Logo do’s

Creativity and consistency as top priorities

Afterward, we perfected the shape of the chosen sketch and presented darker and lighter versions of the logo palette. To convey a futuristic and technological vibe for the brand, we used gradients. It highlights the word 'CAR' in the company’s name, accentuating the linearity of the logo along with distinctive linear elements.

Logo don’ts

Every logo should be properly presented

Our designers emphasized the importance of proper logo usage to the client by illustrating several “bad” examples, as misuse or misrepresentation can significantly damage a brand’s reputation and affect how users perceive a company.

Logo creation

Visual storytelling and brand book time

Color palette

High-energetic colors emphasize the urge to travel

We introduced gradients by mixing the core color with deeper shades, evoking a sense of adventure and exploration. Additionally, our designers provided detailed visual guides for each gradient and color with the code numbers.

Logo colors

Playing with contrasts leaves a lasting impression

For the logo color scheme, we chose 3 types of display: gradient, flat, and monochrome, with the latter reserved exclusively for bright colors to add visual contrast. The brand book provides detailed visuals illustrating the logo color options and usage guidelines.

Typography

Aeonik’s curvy, flowing shapes add even more depth

Aeonik, a Neo-Grotesk with Modernist roots and mechanical references, finds a versatile balance in its wider-than-usual proportions, making it suitable for both display and text use.

Graphic materials

Interactive elements that depict vehicles’ features

We focused specifically on electric cars and related attributes, as well as photos of people in an urban environment and driving vehicles. Also, our team gave recommendations for icon styles and construction rules, resulting in a list of the brand’s graphic elements for clear visual communication.

Logo creation

Additional features and functionality

Report export with custom period selection

Personalized report export with the option to choose the preferred time period for analysis. This helps in scheduling vehicles, reducing idle time, and ensuring that cars are in use when needed.

Animation of vehicle movement playback

Animation that allows for replaying vehicle movements helps to gain insights about vehicles’ location and spot areas for improvement.

Location tracking

Location tracking to keep real-time tabs on the current location of vehicles or assets. In case of emergencies, accidents, or theft, it can be extremely useful to ensure security of personnel and property.

Tracking of route history

Tracking of route history to access historical data, review, and analyze past routes and movements. This leads to cost savings through reduced fuel consumption, shorter travel times, and improved resource allocation.