Electrum Charging Solutions
This was a rebranding project for a Canadian company specialising in electrical vehicle accessories. The scope of the project included brand identity development and redesigning the UX and UI of the company site.
The entire project was managed remotely due to the COVID-19 pandemic. This was one of the major challenges for the entire team, but it was also the greatest hurdle overcame by the end of the project.
The Client
The client for this project is Electrum Charging Solutions (ECS), they are seasoned providers of electric vehicle chargers for commercial and residential property owners, in British Columbia, Canada. They are looking to grow their company to cater to the increased demand and owners of electric cars (EV).
.png)
Research
The client was a major help as he provided most of the information based on the user persona of their current website and the target market of their products. With that the UX Designers pieced together a User Persona to come up with the best design solutions.
Kevin Lang
Age 35
Property Owner
Bio
James is a commercial property owner of a local mall where many shoppers are electric vehicle owners. To ensure their loyalty and attract new customers, he decides to dedicate an entire floor of the parking lot for electric vehicles but has not experience handling a large infrastructural change.
Pain points
Goals & Needs
Not knowledgeable about EV products and differences between commercial and private use
Unable to get easy access to EV experts knowledgeable about provincial property policies
Attain information about infrastructural and provincial policies of electric vehicle chargers for commercial properties.
Frictionless contact with company experts regarding consultation, and troubleshooting for commercial property products and installation.
Comparative Analysis
I used existing websites in the EV industry as guides to best practices for my own designs. Below are brief observations I made on each site, these will help serve as good starting points for the ideating process. My main objective is to find out how they distribute information, the content load of each page as the current site belonging the my client is content heavy as they provide value to their target market through the information they offer.
Byton
BYTON is a tech-focused company and innovates designs for electric vehicles.
Their webpage is visually focused and information are intuitively labeled and grouped to avoid clutter.
Byton
fair is a car leasing platform with a strong emphasis on the type of service they provide and how it works.
There is a great balance between text and graphics, but the overuse of bold fonts can be overwhelming.
Waymo pioneers in self-driving electric vehicles for everyday transport.
Their site highlights their innovation with interactive infographics, but the delays in the animations hinders the user experience.
Ideate
This was when the UX Designers and I went full throttle. Churning out designs, exchanging feedback, all the love, sweat and tears came from developing the foundations of the site. As much as it was hard work, I’d say the process was more fun and rewarding. This was where teamwork and trust really showed.
Product Catalogue
Product Overlay
I was responsible for redesigning the product catalogue page and making the product search experience more frictionless and hassle-free. The low-fidelity wireframes above helped solidify the structure of the page, outlining each part of the user flow and aiding the development of higher fidelity mock-ups and prototypes.
Prototyping
Product Categories
When redesigning, I strongly kept in mind of how users would typically search for products in e-commerce sites with large inventories. Doing so, I followed Jakob's Law, which is to make an interface and experience similar to ones that the user is familiar with.
I decided to use a traditional sticky side-bar menu as it is always inline with the products, and is easily accessible by the mouse cursor as compared to a top navigation which was used in the original site.
Overlay
This is where the users arrive once they've decided on the product to learn more about. After clicking on an image, an overlay pop-up will appear highlighting the key features of the product.
I focused on having clear alignment between text and image, making the information concise to make it skimmer friendly for users.
By also taking inspiration from e-commerce sites, the users can access the company Shopfiy page directly from the overlay, as well as access a PDF document the client provided for the full specifications of each product.
Product Catelogue
By keeping Jakob's law in mind, I continued with applying standard best practices for product pages, by having the product image have greater importance and higher hierarchy.
I decided to add hover interactions on the product images to indicate interactivity and how the users can access the item details. This prevents the users from being bombarded with text, only having to focus on information about products they are interested in.
Conclusion
This project allowed me to step into a whole new industry and further mature my ability to manage client expectations, delivering that to my team to maximise productivity. I also had the chance to further my design thinking and technical skills, improving my ability to empathise for my users whilst producing tangible design solutions.
This entire project was conducted during COVID-19 which added another layer of challenges to my collaborative abilities and communication with the rest of my team. In the end I got use to staying on course whilst working through a virtual environment. I would say this has transformed me into a more versatile team player, as even without the tangible interactions, I am able to stay productive and not let the rest of the ensemble down.