Scroll down
X
Mobile
X
Desktop
Improving the account management for EV drivers
Redesigning the account management part for B2C EV drivers to modernize the UI, improving the UX and also improving the rollout to other OEMs.
Scroll down
Mobile
X
Desktop
Improving the account management for EV drivers
Redesigning the account management part for B2C EV drivers to modernize the UI, improving the UX and also improving the rollout to other OEMs.
Scroll down
X
Mobile
X
Desktop
Improving the account management for EV drivers
Redesigning the account management part for B2C EV drivers to modernize the UI, improving the UX and also improving the rollout to other OEMs.
Back to top
ROLE
Lead UX/UI Designer
TIMEFRAME
July 2022 until October 2023
Summary / Solution 🌱
At the DCS, I pushed the initiative to improve not only the look and feel in the product itself, but also to enhance the mobile UX of our CHARGE NOW product. Doing so, the goal was also to aim for the standardized product to have less specific UX/UI between CHARGE NOW and their OEM counterparts like BMW Charging.
Decrese of special OEM customizations that increases development and design costs
Improvement of concistancy withint the account area
Improvement of mobile view UX
Increase of UX research activiesDecreasing development costs by 30%
Copyright disclaimer: The copyright remains to the respective owners of this project!
ROLE
Lead UX/UI Designer
TIMEFRAME
July 2022 until October 2023
Summary / Solution 🌱
At the DCS, I pushed the initiative to improve not only the look and feel in the product itself, but also to enhance the mobile UX of our CHARGE NOW product. Doing so, the goal was also to aim for the standardized product to have less specific UX/UI between CHARGE NOW and their OEM counterparts like BMW Charging.
Decrese of special OEM customizations that increases development and design costs
Improvement of concistancy withint the account area
Improvement of mobile view UX
Increase of UX research activiesDecreasing development costs by 30%
Copyright disclaimer: The copyright remains to the respective owners of this project!
ROLE
Lead UX/UI Designer
TIMEFRAME
July 2022 until October 2023
Summary / Solution 🌱
At the DCS, I pushed the initiative to improve not only the look and feel in the product itself, but also to enhance the mobile UX of our CHARGE NOW product. Doing so, the goal was also to aim for the standardized product to have less specific UX/UI between CHARGE NOW and their OEM counterparts like BMW Charging.
Decrese of special OEM customizations that increases development and design costs
Improvement of concistancy withint the account area
Improvement of mobile view UX
Increase of UX research activiesDecreasing development costs by 30%
Copyright disclaimer: The copyright remains to the respective owners of this project!
The Problem
The last view years, the product and area for account became more and more complex for users. Also OEMs like BMW & MINI requested different changes and requirements that had influence on the front ends. Means that they front ends didn't had a common standard. In addition, the external UX agency had many designer switches that last years which ended up that we had different styles and designs between different subpages, like Dashboard and Invoice page had different headline styles and informations with different paddings. Doing so, the mobile view wasn't much considered as it was a "desktop" first approach in the company.
The Problem
The last view years, the product and area for account became more and more complex for users. Also OEMs like BMW & MINI requested different changes and requirements that had influence on the front ends. Means that they front ends didn't had a common standard. In addition, the external UX agency had many designer switches that last years which ended up that we had different styles and designs between different subpages, like Dashboard and Invoice page had different headline styles and informations with different paddings. Doing so, the mobile view wasn't much considered as it was a "desktop" first approach in the company.
The Problem
The last view years, the product and area for account became more and more complex for users. Also OEMs like BMW & MINI requested different changes and requirements that had influence on the front ends. Means that they front ends didn't had a common standard. In addition, the external UX agency had many designer switches that last years which ended up that we had different styles and designs between different subpages, like Dashboard and Invoice page had different headline styles and informations with different paddings. Doing so, the mobile view wasn't much considered as it was a "desktop" first approach in the company.
Deep dive into the solutions
Analysing the status quo
I spend my first weeks at the DCS to find out the key issues in the UX team and company. After doing internal interviews and research, it was clear that the UX team was not working on the same goals, which reflected what was designed and building in the front-ends.
Competiter Analysis 🚗
Before I started with anything, I made a deep competitor analysis of companies who are offering a similar charging service like CHARGE NOW. The goal of the competitor analysis was to find a out where the main differences are between the other services and us. This was later used to start research on some possible features but also to define what the minimum was where we need to go with the redesign.
Quantitative data analysis 📊
As a next step, I started to look into data and start working together with the DCS data and customer servie teams. The goal was to look into the data to find the biggest pain points of customers, where they stuck and complain the most and how their current activity is.
Aligning with business goals 🗄️
Business goals playing the next big step, to get buy-in and also prioritization was it important to have a look into the quarterly and yearly business goal and define the scope of the redesign.
Talking to developers 🎙️
In general, I enjoy it a lot working together with developers. I think it is very benefitial if a designer is able to deeply collaborate with them. Because it can really put innovation and efficiency. For me it was important to ask the developers where their current painpoints are. The goal also should be that we make the overall development more efficient. The developers know the product even better than PMs or UX designers, therefore they had a long list of issues they wanted to fix with this initiative.
First results ⌛️
The first results showed that we where far behind competitors and this also had big impact on our data and customer service costs. But the biggest pain point came from the developers as we had inefficient code due to lack of concistancy and miss re-usablibity of components. This also created the biggest cost center in the production.
Analysing the status quo
I spend my first weeks at the DCS to find out the key issues in the UX team and company. After doing internal interviews and research, it was clear that the UX team was not working on the same goals, which reflected what was designed and building in the front-ends.
Competiter Analysis 🚗
Before I started with anything, I made a deep competitor analysis of companies who are offering a similar charging service like CHARGE NOW. The goal of the competitor analysis was to find a out where the main differences are between the other services and us. This was later used to start research on some possible features but also to define what the minimum was where we need to go with the redesign.
Quantitative data analysis 📊
As a next step, I started to look into data and start working together with the DCS data and customer servie teams. The goal was to look into the data to find the biggest pain points of customers, where they stuck and complain the most and how their current activity is.
Aligning with business goals 🗄️
Business goals playing the next big step, to get buy-in and also prioritization was it important to have a look into the quarterly and yearly business goal and define the scope of the redesign.
Talking to developers 🎙️
In general, I enjoy it a lot working together with developers. I think it is very benefitial if a designer is able to deeply collaborate with them. Because it can really put innovation and efficiency. For me it was important to ask the developers where their current painpoints are. The goal also should be that we make the overall development more efficient. The developers know the product even better than PMs or UX designers, therefore they had a long list of issues they wanted to fix with this initiative.
First results ⌛️
The first results showed that we where far behind competitors and this also had big impact on our data and customer service costs. But the biggest pain point came from the developers as we had inefficient code due to lack of concistancy and miss re-usablibity of components. This also created the biggest cost center in the production.
Analysing the status quo
I spend my first weeks at the DCS to find out the key issues in the UX team and company. After doing internal interviews and research, it was clear that the UX team was not working on the same goals, which reflected what was designed and building in the front-ends.
Competiter Analysis 🚗
Before I started with anything, I made a deep competitor analysis of companies who are offering a similar charging service like CHARGE NOW. The goal of the competitor analysis was to find a out where the main differences are between the other services and us. This was later used to start research on some possible features but also to define what the minimum was where we need to go with the redesign.
Quantitative data analysis 📊
As a next step, I started to look into data and start working together with the DCS data and customer servie teams. The goal was to look into the data to find the biggest pain points of customers, where they stuck and complain the most and how their current activity is.
Aligning with business goals 🗄️
Business goals playing the next big step, to get buy-in and also prioritization was it important to have a look into the quarterly and yearly business goal and define the scope of the redesign.
Talking to developers 🎙️
In general, I enjoy it a lot working together with developers. I think it is very benefitial if a designer is able to deeply collaborate with them. Because it can really put innovation and efficiency. For me it was important to ask the developers where their current painpoints are. The goal also should be that we make the overall development more efficient. The developers know the product even better than PMs or UX designers, therefore they had a long list of issues they wanted to fix with this initiative.
First results ⌛️
The first results showed that we where far behind competitors and this also had big impact on our data and customer service costs. But the biggest pain point came from the developers as we had inefficient code due to lack of concistancy and miss re-usablibity of components. This also created the biggest cost center in the production.
CHARGE NOW & CHARGE NOW for Business
The Digital Charging Solutions GmbH provides customers like OEMs the opportunity to have a full white label solution for B2C and fleet customers. The complexity for me was to plan and manage a scaleable design system but also build feature solutions that have different customer-bases in mind.
The DCS has the biggest charging network in Germany and with the different OEMs, also the biggest customer base in the MSP market. But besides the full white-label solutions offers the DCS also API solutions that also needed involvement of UX/UI to build and improve the plattform.
CHARGE NOW & CHARGE NOW for Business
The Digital Charging Solutions GmbH provides customers like OEMs the opportunity to have a full white label solution for B2C and fleet customers. The complexity for me was to plan and manage a scaleable design system but also build feature solutions that have different customer-bases in mind.
The DCS has the biggest charging network in Germany and with the different OEMs, also the biggest customer base in the MSP market. But besides the full white-label solutions offers the DCS also API solutions that also needed involvement of UX/UI to build and improve the plattform.
CHARGE NOW & CHARGE NOW for Business
The Digital Charging Solutions GmbH provides customers like OEMs the opportunity to have a full white label solution for B2C and fleet customers. The complexity for me was to plan and manage a scaleable design system but also build feature solutions that have different customer-bases in mind.
The DCS has the biggest charging network in Germany and with the different OEMs, also the biggest customer base in the MSP market. But besides the full white-label solutions offers the DCS also API solutions that also needed involvement of UX/UI to build and improve the plattform.
Planning the redesign
Before we started with the development, it was important to build the first concepts and prototypes and test them with users to get some data to also their first reaction.
Designing a concept 🧑💻
I started with creating a concept based on my first analysis and data I collected. This step alone took me around 2 sprints, also including some revision based on feedback from the UX team and other stakeholders. After a good state was defined and set, I went to the next step - user testing.
Testing it with users, stakeholders and developers 🧪
At the DCS, I developed a Double Diamond Framework that has the purpose that, after a concept was done, that we start with UX testing and stakeholder involvements at the same time to collect enough feedback that includes both stakeholder and user feedback, this speeds up the process and also makes sure that anyone gets involved early in the process. It also makes sure that the next version solves user and stakeholder problems which then can be used to either finalize the solution or to find a solutions in the middle which at least solved 50% of both uses.
Pushbacks and step backs ⏪
The first version of the redesign went far from the user testing side, it showed that it addressed many user problems and also modernized the look and feel. The goal of the redesign was to redesign all front ends for desktop, mobile and app. But I got massive pushbacks in app side due to the complexity. Also did I needed to simplify the web front ends as well to save more time on development side.
Planning the next steps
After the first interration, comes the next one, I had to simplify the concept way more and users showed that they missed some more information in the front end which I still wanted to push in the development. The next step si to find a middle way between both solutions.
Planning the redesign
Before we started with the development, it was important to build the first concepts and prototypes and test them with users to get some data to also their first reaction.
Designing a concept 🧑💻
I started with creating a concept based on my first analysis and data I collected. This step alone took me around 2 sprints, also including some revision based on feedback from the UX team and other stakeholders. After a good state was defined and set, I went to the next step - user testing.
Testing it with users, stakeholders and developers 🧪
At the DCS, I developed a Double Diamond Framework that has the purpose that, after a concept was done, that we start with UX testing and stakeholder involvements at the same time to collect enough feedback that includes both stakeholder and user feedback, this speeds up the process and also makes sure that anyone gets involved early in the process. It also makes sure that the next version solves user and stakeholder problems which then can be used to either finalize the solution or to find a solutions in the middle which at least solved 50% of both uses.
Pushbacks and step backs ⏪
The first version of the redesign went far from the user testing side, it showed that it addressed many user problems and also modernized the look and feel. The goal of the redesign was to redesign all front ends for desktop, mobile and app. But I got massive pushbacks in app side due to the complexity. Also did I needed to simplify the web front ends as well to save more time on development side.
Planning the next steps
After the first interration, comes the next one, I had to simplify the concept way more and users showed that they missed some more information in the front end which I still wanted to push in the development. The next step si to find a middle way between both solutions.
Planning the redesign
Before we started with the development, it was important to build the first concepts and prototypes and test them with users to get some data to also their first reaction.
Designing a concept 🧑💻
I started with creating a concept based on my first analysis and data I collected. This step alone took me around 2 sprints, also including some revision based on feedback from the UX team and other stakeholders. After a good state was defined and set, I went to the next step - user testing.
Testing it with users, stakeholders and developers 🧪
At the DCS, I developed a Double Diamond Framework that has the purpose that, after a concept was done, that we start with UX testing and stakeholder involvements at the same time to collect enough feedback that includes both stakeholder and user feedback, this speeds up the process and also makes sure that anyone gets involved early in the process. It also makes sure that the next version solves user and stakeholder problems which then can be used to either finalize the solution or to find a solutions in the middle which at least solved 50% of both uses.
Pushbacks and step backs ⏪
The first version of the redesign went far from the user testing side, it showed that it addressed many user problems and also modernized the look and feel. The goal of the redesign was to redesign all front ends for desktop, mobile and app. But I got massive pushbacks in app side due to the complexity. Also did I needed to simplify the web front ends as well to save more time on development side.
Planning the next steps
After the first interration, comes the next one, I had to simplify the concept way more and users showed that they missed some more information in the front end which I still wanted to push in the development. The next step si to find a middle way between both solutions.
Bringing the redesign into production
After all the revisions and feedback rounds, it was time to bring the redesign into the production and finalise the last missing steps
The missing edge cases - a step back (again) ⏪
After we started with the final refinements and also the implementation phase, the developers discovered a lot of edge cases due to our complex OEM setup which I needed to consider, this pushed back the production for at least 2 sprints so that I had time to consider the new edge cases and bring them into the new design. I also worked closely together with our rollout UI designer which I hired to take care of the CI adjustments to our other 15 OEMs. Here we spend also a lot of time to decrease special customizations and alignment on the OEM designs.
Preparation for testing 🔎
To make QA testing more efficient, it was on the time to add more documentation and a better file strucutre to the feature file. This should support the QA team to test better the front end changes, also related to the other OEMs. The QA team found some mismatches between implementation and design which we also needed to discuss with all stakeholders to make sure we consider everything while implementation.
Conclusion 🌟
I learnt a lot from the feature, not only because it was a huge project, but also because it involved a lot of large teams. It was good to start with a concept beforehand and get all the stakeholders on board, but it's still important to have more edge cases and backend knowledge, as this would have saved a lot of revisions and allowed us to reach our goal more quickly. I also learnt that communication is very important and that building a Figma file is important for QA and developers. Always involving users and feedback is important in order to achieve a result that satisfies as many stakeholders and customers as possible. Even if what you have designed and how it comes out in the end is never or rarely implemented in this way and can sometimes be implemented.
Bringing the redesign into production
After all the revisions and feedback rounds, it was time to bring the redesign into the production and finalise the last missing steps
The missing edge cases - a step back (again) ⏪
After we started with the final refinements and also the implementation phase, the developers discovered a lot of edge cases due to our complex OEM setup which I needed to consider, this pushed back the production for at least 2 sprints so that I had time to consider the new edge cases and bring them into the new design. I also worked closely together with our rollout UI designer which I hired to take care of the CI adjustments to our other 15 OEMs. Here we spend also a lot of time to decrease special customizations and alignment on the OEM designs.
Preparation for testing 🔎
To make QA testing more efficient, it was on the time to add more documentation and a better file strucutre to the feature file. This should support the QA team to test better the front end changes, also related to the other OEMs. The QA team found some mismatches between implementation and design which we also needed to discuss with all stakeholders to make sure we consider everything while implementation.
Conclusion 🌟
I learnt a lot from the feature, not only because it was a huge project, but also because it involved a lot of large teams. It was good to start with a concept beforehand and get all the stakeholders on board, but it's still important to have more edge cases and backend knowledge, as this would have saved a lot of revisions and allowed us to reach our goal more quickly. I also learnt that communication is very important and that building a Figma file is important for QA and developers. Always involving users and feedback is important in order to achieve a result that satisfies as many stakeholders and customers as possible. Even if what you have designed and how it comes out in the end is never or rarely implemented in this way and can sometimes be implemented.
Bringing the redesign into production
After all the revisions and feedback rounds, it was time to bring the redesign into the production and finalise the last missing steps
The missing edge cases - a step back (again) ⏪
After we started with the final refinements and also the implementation phase, the developers discovered a lot of edge cases due to our complex OEM setup which I needed to consider, this pushed back the production for at least 2 sprints so that I had time to consider the new edge cases and bring them into the new design. I also worked closely together with our rollout UI designer which I hired to take care of the CI adjustments to our other 15 OEMs. Here we spend also a lot of time to decrease special customizations and alignment on the OEM designs.
Preparation for testing 🔎
To make QA testing more efficient, it was on the time to add more documentation and a better file strucutre to the feature file. This should support the QA team to test better the front end changes, also related to the other OEMs. The QA team found some mismatches between implementation and design which we also needed to discuss with all stakeholders to make sure we consider everything while implementation.
Conclusion 🌟
I learnt a lot from the feature, not only because it was a huge project, but also because it involved a lot of large teams. It was good to start with a concept beforehand and get all the stakeholders on board, but it's still important to have more edge cases and backend knowledge, as this would have saved a lot of revisions and allowed us to reach our goal more quickly. I also learnt that communication is very important and that building a Figma file is important for QA and developers. Always involving users and feedback is important in order to achieve a result that satisfies as many stakeholders and customers as possible. Even if what you have designed and how it comes out in the end is never or rarely implemented in this way and can sometimes be implemented.
Download and test CHARGE NOW
RESPONSIBILITIES
Initiative driver
Improvement of flows for mobile and desktop
Simplification of design system components
Stakeholder management (PO, PM, DEVs)
Team
Florian Louis
Elvin Thang
Danielle