Work projectCloudCharge website

UX/UI & user studies

Computer mockup

COMPANY

CloudCharge

DURATION

Jun 2023 - Jun 2024

ROLE

UX/UI-designer & project manager

TEAM

Romina Asadi

TOOLS

Figma

DELIVERABLE

High fidelity UI ready to implement

Overview

CloudCharge is a company in the electric vehicle charging industry, striving to offer seamless and efficient charging solutions for both individuals and businesses. They provide several products, including a mobile app and a web portal. Read more about my work with those projects here.

When I joined CloudCharge, the company was transitioning to becoming an independent entity and undergoing a major rebranding. During my time there, I worked on several projects, including the creation of a new company website.

Goals and Tasks

The goal was to create a website with the following functionalities:

Roles and Responsibilities

For this project, I was the sole UX designer and partially the project manager. I collaborated with the product owner and an external team of developers. Later, I also worked closely with translators from various countries to ensure the website was available in multiple languages.

My responsibilities included designing the website, structuring the work, ensuring resources were allocated correctly, and coordinating with developers to set timelines for new functionalities to ensure we met deadlines.

Scope and Constraints

Since the website was built on a different platform than CloudCharge's other products, significant initial effort was required from multiple developers to ensure the website was set up correctly and had a stable foundation. This included setting up the project and developing new graphical elements and functionalities.

To avoid exceeding budget constraints set later in the project, one of my major focus areas was keeping the project cost low. One of the things I did was to reuse many of the components we already had and making minimal modifications. This was done in close collaboration with a developer to understand all available options. I also made sure to keep a priority list of new functionalities to be added, making sure to understand what was necessary and what was merely nice to have.

The Working Process and Actions Taken

The materials I started with included text copy, images, and a draft of the necessary pages for the website. Internally, we discussed the type of website to build and the feeling it should convey. We landed in the importance of having a modern site focusing on technology and innovation. Transparency was also key, with no hidden information such as statistics and prices.

Based on this specification, I began researching how competitors designed their sites and gathered inspiration from other websites. This helped me create a draft that was later presented to management, developers, and other relevant parties for feedback and improvements.

Prototype of the website

A part of what was shown to management

The website was built in three main stages to make it available as soon as possible:
  1. Launch the website to reach out to new customers
  2. Enable existing users to use the website as a source of support for CloudCharge products
  3. Translate the website to reach other markets

Visualisation of the working process
Working process

In the first phase, we focused on launching the necessary pages and the design. We also created reusable components to reduce future development time. Developers and I worked closely throughout the process to launch the site quickly.

Example pages from the website
Example pages from the website

The second phase involved setting up a support center to meet the needs of existing customers. This included a form to contact support, support articles, and FAQs. The articles and questions were written by me and the product owner. In some cases, interactive demos were also created and added using the tool Lancey.

Example of the support pages
Example support pages

The final phase I was involved in was the localization of the website. For CloudCharge, it was important that the website was available in multiple languages, since their products are available across multiple markets. It was my responsibility to ensure the project was set up correctly in our translation tool, Localazy, and that the appropriate translators were contacted. This was done in parallel with other website functionality development, so I worked closely with a developer to ensure everything ran smoothly without issues or conflicts.

Example page translated to different lanuguages
Example page translated to different lanuguages

Outcomes and Takeaways

Through this project at CloudCharge, I have developed my skills in both UX/UI design and project management. Leading and implementing the design for a website has provided me with valuable insights and experiences that I can carry into future projects. I have learned to plan, lead, and manage an entire project from start to finish, and the feedback I received on the website from customers and employees has been positive.