One of the UK's leading providers of electric vehicle charging infrastructure. Their goal is to democratise the electric vehicle industry and striving to create a positive global impact.
Introduction
Create a website that embodies the ambitious vision of Connected Kerb, while prioritising a smooth and intuitive customer experience, equipped with all the necessary tools to fulfil users needs.
The project presents a significant challenge due to the simultaneous massive rebranding effort undertaken by the company. Consequently, the digital aspect of the project needed close collaboration with the brand team to ensure that all digital requirements were fulfilled.
A workshop was organised to facilitate discussion and collaboration, aiming to enhance the understanding of the client. During the workshop, various topics were addressed, including market positioning, user needs, and design direction. This allowed for a comprehensive exploration and analysis.
Competitor analysis
I started by analysing key competitors websites to understand what they were doing right and where they were falling short. I looked at user experience, design, functionality, and engagement. By learning from their successes and mistakes, I aimed to create a website for Connected Kerb that stood out in the market, offering a better user experience and more innovative features.
Visual Appeal:
Many sites used clean, modern designs that were visually engaging.
Useful Features:
Features like real-time updates and interactive maps were highly valued by users.
Slow Load Times:
Several sites suffered from slow load times, negatively impacting user experience.
Lack of Mobile Optimisation:
A few sites did not perform well on mobile devices, which is crucial for today’s users.
This competitor analysis helped inform my design approach, focusing on creating a seamless, efficient user experience while optimising for performance and accessibility.
Wireframes
These simple black-and-white layouts helped me map out the structure and functionality of the website without getting distracted by design details. By focusing on the basic elements, I could ensure the site would be easy to navigate and meet user needs. Collaborating closely with the team, we iterated on the wireframes multiple times based on feedback from stakeholders. This collaborative approach allowed us to identify potential issues early and make necessary adjustments, laying a solid foundation for the visual design phase.
Design direction
Once the direction of the website was outlined and the wireframes were created, the next crucial step was to embark on the exploration of user interface design. This phase involved translating the wireframes into visually appealing representations that would effectively convey the brand identity and engage users.
In response to the client's request for a balanced integration of their neon green colour on the website, an interactive cursor was designed to appear exclusively during drag actions. This approach ensured that the neon green element was incorporated without overwhelming the overall visual experience.
Collaboration
While working on the website, I needed to collaborate with an external agency responsible for developing the mobile application. It was crucial to co-ordinate with the agency as both the website and app required an identical map feature. The main focus areas for map development included the overall design and functionality.
One of the client's crucial requirements was to enable users to request new charging stations. We explored various entry points and flows to determine the most effective approach. To provide the client with an informed validation process for these requests, we developed a dedicated form. This form allowed users to submit their requests and helped ensure that only valid and relevant requests were considered.
Collaborating with an external agency presented its own set of challenges. There were instances where not all the files were shared with me, resulting in misalignment of designs when the team reconnected. To prevent this from happening again, we created a centralised file that documented all the UI elements to be used in the project. This ensured better co-ordination and consistency among the team members.
Ready for dev
In order to facilitate a smooth transition during the handover to the development phase, meticulous care was taken to outline each feature with detailed notes. The objective was to provide a clear and comprehensive understanding of each feature, ensuring that nothing was left open to interpretation.
Evaluation
To evaluate the success of the Connected Kerb website, key metrics such as conversion rates for charging station requests, bounce rate, and time on page will be tracked to assess user engagement. User interaction with the map feature will be analyzed, along with load times and error tracking to optimise performance. Additionally, gathering user feedback will help gauge satisfaction with key features like the request form and map usability, providing valuable insights for further improvements.
