My role in this project
- UX research
- UX design
- Prototyping
- UI design
- Brand design
Platform
A responsive white-label desktop web application
A responsive white-label desktop web application
Outcomes
- 15% increase in conversion rate, and thus in sales
- A new B2B business funnel
- An App that allows EV market actors increase their profit through M3E's service
The Brief
In the competitive landscape of electric vehicles (EVs), M3E GmbH – a Berlin-based sustainable mobility consultancy founded in 2019 – sought to establish itself as a market leader by offering the broadest range of services tailored to their customers – vehicle salesmen and end customers.
However, customer feedback revealed that they often found it difficult to understand the full scope of M3E's offerings, and relied on many companies that provide specific services related to the EV market to guide their purchasing decisions. This results in the market's dilution among several small players.
To solve this problem, M3E decided to develop a new user-friendly 0-to-1 web application that would help car salespeople increase their sales by showcasing M3E's comprehensive services as a hook to convince potential customers. It was assumed that developing this point-of-sale platform, aimed at acquiring new customers directly during the quotation or purchase process, would increase customer retention and allow M3E to capture a larger market share.
Within two weeks, I researched and interviewed stakeholders, rapid prototyped and tested the design, and also integrated Tailwind components and existing M3E design assets to accelerate development. We went through two rounds of iteration before arriving at te prototype I'm about to show you. It was also decided, based on time constraints, that the goal was to develop an MVP capable of helping M3E measure the impact of this project.
This was the first time I designed an end-to-end MVP prototype in two weeks, and we received very positive customer feedback after the launch, resulting in a 15% increase in conversion rate.
Within two weeks, I researched and interviewed stakeholders, rapid prototyped and tested the design, and also integrated Tailwind components and existing M3E design assets to accelerate development. We went through two rounds of iteration before arriving at te prototype I'm about to show you. It was also decided, based on time constraints, that the goal was to develop an MVP capable of helping M3E measure the impact of this project.
This was the first time I designed an end-to-end MVP prototype in two weeks, and we received very positive customer feedback after the launch, resulting in a 15% increase in conversion rate.
Key obstacles faced
The main challenge was twofold: first, according to customer feedback, users were largely unaware of M3E's full service offering. This is mainly because they are not aware of all the economic benefits they could obtain by investing in electric vehicles. This hindered their ability to make informed decisions and choose the technical expertise that allows M3E to obtain more revenue for their investment at every opportunity.
Second, existing data management processes were prone to cluttering and inefficiency, which could lead to confusion and potential errors in the processing of customer information. Because there are multiple points of contact with customers - telephone, e-mail, contact forms, through third parties, etc. - There is also the possibility of duplicating customer information, which could lead to errors in data management or benefits applications.
Additionally, the project faced constraints such as a short design time frame and being a one-person design team.
Interface Framework and Visual Components
Following Jakob Nielsen’s Ten Usability Heuristics about Consistency and Standards, I used Tailwind UI's Ant Design open-source kit for intuitive navigation, responsiveness, and easier delivery to the Development team. It also helped to quickly develop high fidelity mockups, helping Sales with their pitch by providing a visual example.
I also chose the Lato typeface because of its high legibility in different styles, its modern aesthetic that matches M3E's brand identity, and its ease of implementation as a Google font for the development team, streamlining the development process.
For the layout, I defined a 12-column grid, where half of the space is used to present information and one-third for navigation for effective information presentation. I made this decision based on the electric mobility benchmarks and parallel industry players identified while researching.
1. Branding & color scheme
I applied M3E's brand color with contrasting grayscale to the white label to ensure color contrast and usability for EAA compliance. I also adapted the M3E logo to the name of this new product, as I have done with other M3E products, based on Jakob’s Aesthetic and Minimalist design Usability Heuristic .
I applied M3E's brand color with contrasting grayscale to the white label to ensure color contrast and usability for EAA compliance. I also adapted the M3E logo to the name of this new product, as I have done with other M3E products, based on Jakob’s Aesthetic and Minimalist design Usability Heuristic .
2.
Navigation & easy editing
The sidebar acts as a stepper/progress bar, displaying numbered steps and descriptive titles for clarity. It allows users to easily track their progress and also return to specific points with a single click to edit the information entered, following Jakob’s Visibility of System Status Usability Heuristic.
The sidebar acts as a stepper/progress bar, displaying numbered steps and descriptive titles for clarity. It allows users to easily track their progress and also return to specific points with a single click to edit the information entered, following Jakob’s Visibility of System Status Usability Heuristic.
3.Help & Contact button
At the bottom of the sidebar, and separate from the others, I placed a button to get help and contact M3E specialists. This allow vehicle salemen to get detailed information that they may require to answer their customers inquiries and ensure sales.
At the bottom of the sidebar, and separate from the others, I placed a button to get help and contact M3E specialists. This allow vehicle salemen to get detailed information that they may require to answer their customers inquiries and ensure sales.
4. Top row
It displays the step or section title, and the Shopping cart button to check the selected products. This keep users informed about what is going on, aloowing them to quickly recognize where they are on the application process, and what step comes next.
It displays the step or section title, and the Shopping cart button to check the selected products. This keep users informed about what is going on, aloowing them to quickly recognize where they are on the application process, and what step comes next.
5.
Central row
An image banner is displayed as a marketing introduction and promotional hook. It also acts as a preface to the information that follows and allows the marketing department to control the content of the banner, allowing them to modify it according to user needs and changes in the market.
An image banner is displayed as a marketing introduction and promotional hook. It also acts as a preface to the information that follows and allows the marketing department to control the content of the banner, allowing them to modify it according to user needs and changes in the market.
6. Bottom row
It displays the main content and also serves to input the data required to tailor and select the best offer for the customers. It presents plenty of information above the fold, suggesting users to scroll-down for more content, ensuring a fluid navigation.
It displays the main content and also serves to input the data required to tailor and select the best offer for the customers. It presents plenty of information above the fold, suggesting users to scroll-down for more content, ensuring a fluid navigation.
Information Architecture and User flow
Why do we start with the news? As the idea is to help salespeople achieve their goals, the platform keeps them up to date on the latest events in the EV market and helps them develop a better sales pitch. Then, the order of the following screens was defined, based on the fact that the needs defined at the beginning by the customer determine the offers and advantages they can access in the subsequent screens.
To present all of M3E's services, we defined a user flow that facilitates intuitive navigation and allows users to quickly access key information about vehicles, charging stations, and financing options according to their needs.
1.
News + Blog
Relevant information and special features, such as news about funding or innovations, are presented to users.
Relevant information and special features, such as news about funding or innovations, are presented to users.
2. Charging Stations
Help users identify suitable charging solutions. Users can then request M3E an offer for the more appropriate option.
Help users identify suitable charging solutions. Users can then request M3E an offer for the more appropriate option.
3. Installation and Consulting
It offers users booking options for installation services. E-consulting packages covering the entire M3E offering.
It offers users booking options for installation services. E-consulting packages covering the entire M3E offering.
4. Funding programs
Quickly access applicable funding. Users can quickly learn about each program and use M3E to help optimize them.
Quickly access applicable funding. Users can quickly learn about each program and use M3E to help optimize them.
5. GHG Quotes
Clearly explain environmental policies. M3E's GHG Quotes consultation service can be booked here with one click.
Clearly explain environmental policies. M3E's GHG Quotes consultation service can be booked here with one click.
6. TCO calculator
Highlight the long-term cost benefits of EVs versus combustion vehicles, summarizing costs over 10 years.
Highlight the long-term cost benefits of EVs versus combustion vehicles, summarizing costs over 10 years.
7. Overview
A QR code is generated linking to a tailored website with all relevant information for the users summarized.![]()
A QR code is generated linking to a tailored website with all relevant information for the users summarized.
Navigation Testing and Iterations
To make navigation as intuitive and smooth as possible for the salespeople and their customers, I tested the first mock-up with colleagues who were not familiar with the product development. I did this to simulate the salespeople's first experience with the platform, because the short timeframe did not allow for research with real users.
Using rapid prototyping, I conducted moderated in-person usability testing, in which I asked the testers to explore the platform and select the best services for a random type of EV, similar to what customers would do, while openly sharing their thoughts.
Before
![]()
After
![]()
Based on the usability tests, we decided together with the stakeholders to simplify the navigation by removing the language button on the top row, and replacing the settings button at the bottom of the side navigation column with a Help & Contact button, instead of using a floating assistant button for the same function.
Without user accounts there is no need for settings, and without a chatbox, we reduce developing time and costs.
Without user accounts there is no need for settings, and without a chatbox, we reduce developing time and costs.
After implementing the changes, a second prototype version was presented to stakeholders, as seen in the following video.
Since the design largely met the company's expectations for an MVP, the stakeholders decided to move the mockup to the development phase by the IT team. The company decided that the platform would later collect user feedback and qualitative and quantitative data from real users after the launch of the real version.
Results
To tackle the challenges, we designed a flexible white-label web app that integrated all of M3E’s services into a single platform. This user-centric approach allowed us to present information clearly and concisely, helping customers and users understand how they could maximize their benefits thanks to M3E’s offerings. By streamlining data processing methods within the app, we reduced clutter and improved efficiency in managing customer information. The result was an engaging platform that not only clarified M3E’s services but also drove a significant 15% increase in conversion rate.
15%
increase in conversion rate
New
A new B2B business funnel
More
Customers profits’ boost with M3E's services
After a successful launch, M3(E)-Solution is receiving much positive feedback, and not only enhanced user awareness of M3E's holistic service offerings but also created a new digital product funnel for the company. By aligning UX and business objectives, we positioned M3E as an end-to-end solution provider in the EV market. This project exemplified how thoughtful design can lead to tangible business outcomes, ultimately supporting M3E’s mission to empower customers in their electric vehicle journeys.
Learnings
Also, although desk research is an interesting tool to complement direct user research, more qualitative data is needed to have a better understanding of users' needs. We plan to obtain more data with users after the launch of the platform, once EV vendors have seen the benefits reflected in their sales.
Special Shoutouts
Dennis Schneider, Key Account Manager
Daniel Yanev, Teamlead Funding - Consultant
Marco Acuña, Project Manager
Wiebke Wilsky, Social Media Manager
Yunus Szönyi, Fullstack Developer
Neriman Avrupali, Front-End Developer
Daniel Yanev, Teamlead Funding - Consultant
Marco Acuña, Project Manager
Wiebke Wilsky, Social Media Manager
Yunus Szönyi, Fullstack Developer
Neriman Avrupali, Front-End Developer
