User friendly Shopify E‑commerce of vehicle‑grade scooters

Our collaboration with Apollo Scooters came about naturally, as we’ve previously worked on their mobile app’s interface and usability. This time, the Canadian electric scooter manufacturer needed a mobile-first redesign of their E-commerce platform, which was an exciting opportunity to showcase our design and development capabilities. We worked closely with the client to understand their needs and objectives, which allowed us to create a solution that exceeded their expectations.

We broke down the project into several stages to ensure a systematic and efficient execution. Starting with the analysis of the existing website, we then proceeded to create redesign recommendations. Before diving into the UI design, we presented low-fidelity screens to the client for their valuable feedback and input.

Our scope of work encompassed a complete redesign of the website, with a strong emphasis on mobile devices. We also optimized the website for improved performance and user experience, which involved enhancing page speed, implementing new features, and ensuring compatibility across all devices and browsers.

Our team consisted of designers, developers, and project managers who worked cohesively to ensure the project's success. Throughout the entire process, we maintained open communication with the client, placing their needs and objectives at the forefront of our decision-making.

The redesigned product page aims to enhance the user experience and drive bundle sales. By incorporating different scooter types and variants, we provided users with a seamless browsing experience to help them choose the perfect scooter for their needs. We implemented a user-friendly table that presented comprehensive technical specifications for each scooter, facilitating informed decisions and easy model comparisons.

Our goal was to make scooter comparison simple and convenient for users. To achieve this, we designed an intuitive table with drop-down menus, enabling users to easily select and compare vehicles. Each scooter's specifications were presented with clear icons for quick identification. This feature empowered users to find the ideal scooter that met their specific requirements.

To assist users in finding the most suitable scooter model, we created a straightforward quiz. By answering a series of tailored questions, users received personalized results displaying a matching percentage and a suggested scooter model. This interactive quiz introduced an element of engagement to the user experience and helped users make well-informed decisions.

This user-friendly dashboard was designed for Apollo’s customers to quickly access and manage their accounts, providing a clear overview of accumulated points, which allow users to redeem rewards such as discounts or free shipping. Additionally, users were encouraged to earn more points through actions like making a purchase or following the brand on Instagram. This enhanced user account feature enriched the overall customer experience and fostered brand loyalty.

To complement the range of scooters, we designed a dedicated page to give scooter-related accessories a more significant role. The page includes convenient filters that allow users to refine their search based on compatibility, price range, and product type. By streamlining the browsing experience, users could easily find and purchase accessories that enhanced their experience with the product.

We adopted a mobile-first approach, prioritizing the mobile experience during the entirety of the design process. Our focus on intuitive and visually appealing mobile screens ensured a seamless and enjoyable user experience on all sorts of mobile devices, regardless of screen size. Thanks to this approach, we optimized the user journey and made browsing easier for the majority of site traffic.

In crafting the visual identity for the first iteration of the website, we carefully selected two typefaces that complement each other. For headlines, we went with Nimbus, a bold and heavy font that gives a strong and modern impression, capturing users' attention. For the body text, we employed Gimbus, a font whose role was to harmonize with the headlines and provide readability and balance throughout the page.

Building upon the previously chosen color palette, we extended it with additional shades to enhance the brand experience and recognizability. The strategic use of various shades of blue and brown conveyed a sense of innovation, trust, and reliability, while the vibrant orange accent color added excitement and playfulness to Apollo’s aesthetic, capturing users' attention.