Global Parts - e-commerce platform for used auto parts supplier

The project aimed to create an e-commerce platform for the existing GlobalParts store, which sells original used auto parts in the European market. The previous experience was a big help in terms of knowing the store's users, their behavior and the statistics and sales data we had. However, it was at the same time a challenge for our team to make sure that the new platform matched the quality of the client's already established reputation.

Previously, the client had run his business through e-buy and Allegro. It was a recognizable seller in its industry. The new personalized e-commerce site was created to increase sales, reduce the cost of running the store and be independent of the aforementioned marketplaces. Another important aspect for the client was to create an independent brand that provides quality and safe shopping experience for its buyers.

Discovery Phase

The first stage of work on the project was to conduct research and check the competition in terms of solutions used in stores, as well as the structure or appearance of the site. A few selected sites were subjected to a deeper analysis to determine the structure of the most important subpages and how to search for a product. The conclusions drawn from this phase of the project helped us build the most important functionalities on the site.

The next phase was to conduct a workshop with the client to increase our knowledge of what to expect from the final product, the online store. We obtained the necessary information about the users of the existing store, what changes from the previous version would be necessary for them to build trust in Global Parts. During the workshop we focused on two important aspects: getting to know the exact vision of the store and getting to know the users. The conclusions that emerged from thinking about the needs and potential problems during the shopping experience helped us to create the appropriate sections on each sub-page.

Design

After analyzing the previous phase of the project, we began designing low-detail mockups. The most important functionality was to design an intuitive search engine and to design the part selection process in such a way as to ensure that the user's parts are compatible with his car, thus minimizing the risk of confusion. The search was solved in two ways. The first is the classic scrolling through the category catalog and, at a later stage of buying a product, showing information about the need to check the compatibility of the part with the version of the car. The second solution is a search engine into which one immediately enters the details of the car and the part being searched for. A search by vehicle registration number has also been introduced for the UK market.

After the client's approval of the lo-fi mockups, we moved on to the design of high-detail mockups, where we focused on the visual aspect of the project and refined individual functionalities depending on the client's comments. The visual requirements to be met were simplicity, cleanliness and clarity. Responsiveness of the site was also important. Due to the fact that users often access the store on mobile devices, the most important elements on the site had to be properly laid out and arranged. Once the designs of the site were approved, the design team supported the work of the developers by changing and adjusting the design for the new requirements.

Programming and testing

After completing the UX/UI design process, we moved on to the programming stage, where our team began working on the application, with a primary focus on using Next.js. We focused on integration with the client's WordPress-based platform, along with WooCommerce and the client's warehouse system. The implemented technologies ensured optimal performance, as well as consistent and attractive data presentation for the user. QA testing played an important role, including unit, integration, functional, performance and mobile testing. Continuous iterative testing made it possible to quickly identify and eliminate potential bugs, ensuring a comprehensive rethinking of the product and achieving the highest quality of the final result.

Choice of technology and tools

For the GlobalParts project, we leveraged the client's existing infrastructure, which used the WordPress platform in combination with WooCommerce and, in addition, the Warehouse Management System (WMS) API. Our key task was to develop an effective and responsive frontend layer, which required close cooperation with the team responsible for the backend.

For this, we chose the Next.js framework version 14 with App Router, which allowed us to generate pages on the server side. This approach not only significantly improves the store's SEO performance, but also makes the developers' job easier due to easier implementation and code management. Thanks to this strategy, we were able to create a scalable and easy-to-maintain solution that works perfectly with our client's goals and needs.

In terms of styling, the choice was Tailwind CSS framework, which helped provide flexibility and efficiency in styling the user interface while avoiding redundant code. We also used the Headless UI library to manage interactive elements like pop-ups and comboboxes which dovetailed perfectly with Tailwind, additionally offering a wide range of customization options for the appearance, while ensuring intuitiveness and customization for users.

For form management, we implemented the React Hook Form library together with Yup for data validation, and we controlled the application's state using Zustand, which simplified global state management and information exchange between components. Integration with React Query allowed for efficient refreshing and loading of data, which positively impacted responsiveness and improved the overall user experience with the application.

Improvements for users

We have made several significant improvements to the app that significantly enhance the user experience. The implementation of login via popular services such as Google, Facebook and Apple not only simplifies the account creation process, but also increases the security and speed of access to the service. In addition, the implementation of payment through Google Pay and Apple Pay, makes the entire shopping process even faster and more convenient.

Additionally, an intuitive solution is the function we have introduced to add information about your vehicle to your user profile. Thanks to this, the system can automatically display information about parts that are compatible with your vehicle, which greatly simplifies shopping, minimizes the risk of confusion when ordering and increases trust in our platform. In this way, it not only improves the personalization of offers, but also contributes to better conversion in the purchasing process.

Apart from this, we have implemented features such as a wish list, which makes it easier to plan purchases and monitor product availability, the option to search for parts by their identification numbers, which speeds up the process of finding the components you need. Also, on one of the marketplaces, we introduced a function to add a vehicle via its license plate number, which allows easy management of vehicle information and automatic search for compatible parts.

Encountered challenges

During the programming process, we encountered various challenges that required creative approaches and effective solutions. Identifying these difficulties was an important step in improving the product. With a consistent approach, we were able to successfully address the problems encountered.

Internationalization - We were tasked with serving six different markets on separate domains with dedicated language versions, challenging us to effectively manage multilingualism and navigation.

The solution: we decided to use the i18next library, enabling flexible translations and creating separate paths for each language. With i18next, we were able to effectively optimize navigation, improve SEO for individual domains and provide users with a personalized experience according to their language preferences.

Interface Optimization - During the course of the project, a major issue arose regarding interface optimization due to the amount of data, which created a challenge in ensuring a smooth user experience throughout the application. With the large amount of information, it was necessary to find a way to make interactions fast and intuitive, regardless of the content load.

Solution: We decided to use the mechanisms available in Next.js. The use of features such as loading view, optimistic updates and intelligent loading of data before user interaction (prefetching) contributed to the fluidity of the interface. With these improvements, users were able to experience an improvement in the feel of the site's performance and responsiveness.