High Drive is an online electric vehicle advisor. It tells its customers whether it makes sense or not to buy an electric point of view (from a lifestyle and economic point of view). It also recommends some relevant vehicles that its customers can buy, thus redirecting to a commercial partner for the rest of the flow.
High Drive came to me because they wanted to refresh the user interface and user experience of their online questionnaires. Their questionnaires were built with Bubble, the no-code tool to build advanced web applications. The forms were already generating interesting results but they were lacking a professional and modern touch. We agreed on 2 main deliverables: (1) a revamp of their UI kit and (2) two prototypes reflecting their new "Savings" and "Compatibility" tests.
I first started by designing the mobile experience. High Drive already had a light brand identity, with green and blue tones that remind of the electric vehicle look and feel. So I started with these colors and built the components accordingly. I tried to give the interfaces a fresh and modern style; it needed to remain serious and not too playful. Here's a sneak peek into some screens I explored during this first step.
After agreeing on the overall UI (look and feel; brand, fonts and icons, but also the resulting components) with High Drive, I then applied this UI to the entire mobile flows. Here are the screens of the "Autonomy" flow, that enables High Drive visitors to calculate how many kilometers they need to travel on a daily basis, where is the nearest charging station, and whether they would be able to use an electric vehicle or not according to their conditions.
Here's a preview of the second flow, the "Savings" flow, where High Drive visitors can assess whether an electric vehicle makes sense for them from an economical point of view.
After validating the mobile experiences, I needed to work on the desktop part. This brought new challenges in terms of layout; as the desktop offers more space, there can be more elements shown than on mobile; the steps of the flow for instance. Below is one first layout I tested, with the stepper on the left part, while the right part of the screen was dedicated to some "tips" given by a High Drive advisor, to help the user complete the form seamlessly.
But this left sidebar wasn't a very scalable solution in the case where there would be way more steps in the flow, so I needed to think about something different. That's why I moved back to the "progress bar" solution, similar to the one picked for mobile. Having the main content on a white background and the tip on a light blue background enabled to mark a clear visual distinction between both parts of the page, while enabling some contrast so that the tips could stand out.
Here's an other exploration on desktop, this time showing the last step of the "Savings" flow, where the user can change the "ownership duration of the vehicle" on the left part of the screen, which dynamically changes the numbers on the right part of the screen.
Finally, here's the "Vehicles catalog" screen, where the user can select a vehicle and request a quote from one of High Drive's partners.