My role in this project
- UX research
- UX design
- Prototyping
- UI design
- Art direction
- Brand design
Company
M3E GmbH – a Berlin based consultancy for sustainable mobility, founded in 2019
M3E GmbH – a Berlin based consultancy for sustainable mobility, founded in 2019
Platform
A responsive white-labeldesktop web application
A responsive white-labeldesktop 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 sought to establish itself as a leader by offering the broadest range of services tailored to both dealers and end users. However, potential customers often found it difficult to understand the full scope of M3E's offerings and relied on a large number of companies providing services specific to the EV market to guide their purchasing decisions. To address this gap, M3E wanted to develop a user-friendly web application that would clearly showcase the holistic services they excel at and increase user engagement.
Within two weeks, I researched, created a prototype and tested it with five colleagues who were not involved in the project. We went through two rounds of iteration before arriving at the prototype I am about to show you. This is the first time I have created an end-to-end prototype in two weeks, and we have received very positive feedback from users.
Challenges faced
The primary challenge was twofold: first, users were largely unaware of M3E's complete service offerings, which hindered their ability to make informed decisions. Second, the existing data management processes were prone to cluttering and inefficiency, which can lead to confusion and potential errors in customer information processing.
Additionally, the project faced constraints such as a short design time frame and the absence of direct user research. To overcome these obstacles, I relied on desk research as well as stakeholder interviews and quick user testing, while integrating Tailwind components and existing M3E design assets to accelerate development.
The Dashboard
Following best practices, I used Tailwind UI's Ant Design open-source kit for intuitive navigation, responsiveness, and easier delivery to the Development team. In addition, I chose the Lato typeface for its legibility in various styles.
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.
1. Branding & color scheme
I applied M3E's branded green 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.
I applied M3E's branded green 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.
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.
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.
3.Help & Contact button
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 to return to specific points with a single click to edit the information entered.
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 to return to specific points with a single click to edit the information entered.
4. Top row
It displays the step or section title, a Skip button for power users as EV dealers, and the Shopping cart button to check the selected products.
It displays the step or section title, a Skip button for power users as EV dealers, and the Shopping cart button to check the selected products.
5.
Central row
An image banner is displayed as marketing introduction and as a promotional hook. It works also as a preface about the information that follows.
An image banner is displayed as marketing introduction and as a promotional hook. It works also as a preface about the information that follows.
6. Bottom row
It displays information and serves to input data. Presents plenty of information above the fold to suggest users to scroll-down for more content, ensuring a fluid navigation.
It displays information and serves to input data. Presents plenty of information above the fold to suggest users to scroll-down for more content, ensuring a fluid navigation.
User flow
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
To make the navigation as intuitive and as smooth as possible, we tested the first mockup with colleagues unfamiliar with the product.
Based on the usability tests, we decided 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.
Before
![]()
After
![]()
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 into the development phase by the IT team. The platform would later gather user feedback, qualitative and quantitative data from real users in its live 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
