M3(E)-Solutions
An all-round solution
Problem
Offer users a wide range of electromobility products and services, while avoiding information cluttering during the processing of their data coming from different channels.
Offer users a wide range of electromobility products and services, while avoiding information cluttering during the processing of their data coming from different channels.
Outcome
A holistic B2B platform also available as a white label that allows users to offer the complete ecosystem of M3E products and services and also enables fast, seamless and team-controlled data processing.
A holistic B2B platform also available as a white label that allows users to offer the complete ecosystem of M3E products and services and also enables fast, seamless and team-controlled data processing.
Client
M3E GmbH
A Consulting firm specialized in integral solutions and services for electric mobility in the B2B and B2C markets.
Team
Dennis Schneider,Daniel Yanev, Wiebke Wilsky, Yunus Szönyi, Neriman Avrupali, Marco Acuña and myself.
M3E GmbH
A Consulting firm specialized in integral solutions and services for electric mobility in the B2B and B2C markets.
Team
Dennis Schneider,Daniel Yanev, Wiebke Wilsky, Yunus Szönyi, Neriman Avrupali, Marco Acuña and myself.
Additional Information
My role in this project
UX researcher, UX designer, Prototyper and UI design.
Platform
Desktop web app
Timeline
6 days for the first Sprint, and then 3 more weeks of further design development.
My role in this project
UX researcher, UX designer, Prototyper and UI design.
Platform
Desktop web app
Timeline
6 days for the first Sprint, and then 3 more weeks of further design development.
![](https://freight.cargo.site/t/original/i/c09134a2b39bb4e9eddf05d3eb82371e0b05ef6a66f81b63d48b44593c526032/Body-Image-1.png)
Why do we do this?
Problem definition
In doing so, we seek to define the foundation of a purposeful, user-centered and effective design process.
1
CommunicationM3E needs to offer its wide range of products and services to electric vehicle fleet acquisition managers.
2
Data managementReduce drastically the chances of creating clutter during the processing of personal customer data when it can be submitted through three different channels.
3
Increase leads and revenueIncrease potential customers directly through M3(E)-Solutions and indirectly through the white label option.
Current experience
Business analysis
Business analysis
We conduct a Business Analysis to ensure that the project responds to real business needs, is well planned and contributes to the overall success and growth of the organization.
1
360° serviceM3E has many services and products, that offered independently and separately can be overwhelming and confusing for customers.
2
Independent input channelsM3E manages various channels (phone, email, contact forms), risking disorganized customer documentation processing when clients use multiple channels.
3
CommunicationThe EV sales force needs a tool to stay current on benefits, funding, and EV-related news tailored to each client's needs.
What else is out there?
Competitor analysis
M3E's competitive analysis, along with external sources, indicates that few companies provide a comprehensive 360° service like M3E.
1
Fragmented shared marketWhile some focus on the B2B market, a few offer B2C solutions. Most competitors specialize in specific services, resulting in a fragmented profit distribution across different sections of the EV market.
2
A new productWhile other companies offer configurators focused on charging station solutions, during our competitive analysis we did not find products that provided the range and depth of information we wanted to achieve.
Nice to meet you
Proto Personas
The platform aims to cater to both individual users and those assisted by vehicle dealers, particularly in the case of a white-label product.
Due to time constraints, I created two Proto Personas using stakeholder information. Based on feedback from real users, we can then refine and better define user needs.
Due to time constraints, I created two Proto Personas using stakeholder information. Based on feedback from real users, we can then refine and better define user needs.
![](https://freight.cargo.site/t/original/i/c4dbd640ec76a7622860d717761e3147b33dc516ad3391ece6a21c46e805c213/Thomas---User-Persona.png)
![](https://freight.cargo.site/t/original/i/8063c29ef9df180106483095caaa888c155bee857b5ae43eca8e65346b58db4b/Armin---User-Persona.png)
1
Primary Proto PersonaThomas Vogelstein, a Business Mobility Manager, serves as the primary persona, embodies a potential client seeking to procure vehicles or fleets through M3E.
If Thomas encounters frustration, he may promptly discontinue platform usage, potentially leading to the loss of a customer and without providing clear feedback on the reasons behind his decision.
2
Secondary Proto PersonaArmin Fried, Electric Car Fleet Sales Manager, acts as an "assistant" to the platform. After training, he gains proficiency in navigating the platform to effectively address his customers' diverse needs.
Because platform use is mandatory for him, his approach to learning differs from Thomas's. This distinction makes Armin a reliable source of feedback for future development.
Hypothesis
We believe that this desktop app should be especially intuitive to use, presenting various information levels concisely and attractively, and enabling users and customers to satisfy their need to get the best and most convenient deals for their business.
We will know if we are right by comparing the volume of leads generated by this new channel with the volume of existing channels, or if it exceeds the total volume.
Getting creative
Ideation
At this stage, we use the Crazy 8s method to develop ideas about which elements must be considered to be present in the MVP.
![](https://freight.cargo.site/t/original/i/9229d21622cb158ee5f544d50ef67559b938219b1bbbd6ff11d48c1526941800/MoSCoW-matrix.png)
To discuss and evaluate them, we use the MoSCoW prioritization method, defining what must, should and could be present in the app.
Additionally, as a Value proposition, M3E offers all services as a complete package from a reliable and proven expert, with personalized assistance from a group of experts.
1
Must haveIntuitive and seamless User-Journey (clear navigation, breadcrumbs, stepper)
Simple layout to avoid cluttering of displayed info.
AGB Considertion. Allow its use without sharing private information.
Adaptable to the specific needs of the country where it is offered
2
Should haveOnline assistant that answers users' questions on-site.
Mobile version for user on the go without quick access to a desktop computer.
3
Could haveOnboarding, in case sales force have questions while using it.
Car configurator, in case a white-label customer wishes to incorporate it.
How should it work
User flow
With our list of "must-ideas" on hand, we define the app's User flow looking for different ideas and approaches on how to achieve the different goals.
![](https://freight.cargo.site/t/original/i/c52a78af3e61dcff9f5a94d14a5bdba98e1aaa07bf450bf8f9e351876e6cbabc/User-flow.png)
1
The vehicle The first step is to focus on the vehicle. Relevant information and special features can be presented to Thomas clearly, including any special offers or innovations.
2
Charging StationsThe correct charging station or wallbox is defined based on the vehicle, followed by a few questions. Thomas can then request an offer for the right charging solution directly from M3E.
3
Installation ande-consulting
Thomas can book the installation of the selected wallbox and additional consulting services. E-consultation packages are available, covering M3E's entire e-consulting range.
4
Funding programsQuickly determines suitable funding programs. Thomas receives information about each program and can optimize them with M3E's assistance. The application service can be booked directly.
5
GHG quotaGHG quota are presented, explaining the environmental policy instrument clearly. M3E's GHG quota service can be booked directly.
6
TCO calculatorOperational costs for the selected vehicle are featured. It highlights the monetary advantages of EVs over combustion engine models, summarizing costs over 10 years.
7
OverviewThomascompletes the process and receives a QR code for a personalized websitewith all relevant information, an overview and an offer.
UI design
Prototyping
While developing the mid-fi Mockup, the user interface for M3E's products and services was defined, guided by Usability Heuristics.
![](https://freight.cargo.site/t/original/i/ddb3bc894edf11b34001af2a88dadb00b6ec044cfc35695a6ae67375aac97044/UI.png)
1
ColorThe color scheme incorporates M3E's institutional green and greyscale for contrast, ensuring good usability.
2
TypefaceThe Lato typeface was chosen for its simplicity and readability, with various styles for differentiation.
3
Best practicesBest practices, including the use of Ant Design Open Source kit, were employed for intuitive navigation and a smoother handover to the IT team.
4
BrandingTwo versions of the logo were developed, inline and block, adapting the M3E logo to the name of this new product, as has been done before with other products.
![](https://freight.cargo.site/t/original/i/da88bb6d434f704701cc3c63ef6c87c0b9f02cb78604d8ccbb4af74773a6b6da/Lo-Fi-wireframe.png)
1
Layout12-column grid, with a ration of 1:6 for navigation. Saves most of the screen for presenting information.
2
Dual-function navigationActs as stepper/progress bar.
Displays numbered steps and descriptive titles for clarity. Allows Thomas to easily track his progress.
3
Easy EditingThe sidebar enables users to go back to specific points with a single click, and edit the information input.
4
Extra optionsThe sidebar includes a separate button at the bottom in a secondary color for Settings or a contact form, differentiated from other navigation buttons to avoid confusion.
![](https://freight.cargo.site/t/original/i/04e407acdac8bdc9d7019833e284d2e1deebf1f22d7ac4fca5fdee442951a01e/Lo-Fi-wireframe_Rows.png)
Continuing with the navigation, 3 stacked rows are defined to divide the screen area where the information is presented.
By defining 3 rows I seek to provide clear step-by-step information about the information presented at each stage.
1
Top rowIt displays the step or section title, a Skip button for users like Armin, the Shopping cart button to check the selected products, and a Language dropdown for non-German speaking users.
2
Central rowHere is displayed an image banner for marketing introduction and as a promotional hook. It works also as a preface about the information that follows.
3
Bottom rowIt displays information and serves to input data. It uses scrolling for complete content, ensuring fluid navigation. Presents plenty of information above the fold to maintain interest. Additionally, a floating button with a virtual assistant for FAQs and contact form access is proposed to facilitate communication with M3E experts.
Testing with stakeholders
Iteration 01
I then developed the Mid-Fi version of the prototype implementing the official colors, font styles and atomic elements for the stakeholder proposal.
![](https://freight.cargo.site/t/original/i/b21497336a8a6c0808721cfcd582b86aaba68574b5860ab6df385065992e33e5/MacBook-Pro-16.png)
![](https://freight.cargo.site/t/original/i/74d4b2c6b766edba9e861766ed5b8b57a3123bf515b94b31159c6b5668cfab80/MacBook-Pro-16-1.png)
![](https://freight.cargo.site/t/original/i/cd3c3308da21c1a6ab2da4a1c909bcec87207be297842d3423aa8efdc315e52e/MacBook-Pro-16-2.png)
![](https://freight.cargo.site/t/original/i/4956edb37220b6b8603898000d0e06bae27edbc32867de3030badc113334c231/MacBook-Pro-16-3.png)
![](https://freight.cargo.site/t/original/i/e532e383984251769f4502ba3d1ea0bd90b32d7d0945a020bad981ae47943890/MacBook-Pro-16-4.png)
![](https://freight.cargo.site/t/original/i/691166f853d4211e9810deff85436b04decd9704726e69be81b4553336701746/MacBook-Pro-16-5.png)
![](https://freight.cargo.site/t/original/i/a84c16127c95e05d26704cce16f9957d6495ea1927e1e774cd233a94d39f4f49/MacBook-Pro-16-6.png)
After this, we tested the prototype with colleagues who were not directly involved in the project, as their level of proficiency with the product and knowledge on the topic of electric mobility is similar to that of a new user.
Based on the feedback gathered from the interactions of our test users, we decided together with the stakeholders to implement the following changes:
1
Fewer buttons.The button to change language was removed, the language presented will be defined by the user's IP.
2
Avoid duplication.The floating assistant button was also removed. The settings button is now the contact button. Without user accounts there is no need for a settings button.
3
Let's go mobile.Stakeholders decide to implement a mobile version, keeping a desktop-first goal. The goal is to extend the reach of the web app to users such as Thomas when not in the office. It is not a problem since we work with React components, this allows an easy adaptation.
Adapted after changes
Iteration 02
After implementing the changes decided in the previous iteration, a second version of the prototype was presented to the stakeholders, as seen in the following video.
Since to a large extent, the design meets the company’s expectations for an MVP, it was decided that the mockup go to the development phase by the IT team, to later continue to be tested by real users in its first version.
This first version turns out to be the white-label using the company’s CI where the client that helped drive this development works.
Continuing the Journey
Next steps
Next steps
1
User feedback gather2
Gain users trustAdhering to European data protection regulations, user approval is essential for personalized feedback collection. Obtaining consent ensures more accurate and meaningful data, reducing ambiguity and filtering efforts. We aim to secure approval from satisfied users willing to share their data for a more insightful analysis.
3
Measurements & resultsAdditionally, we will assess key performance indicators (KPIs) across project departments, comparing actual results with established expectations. This evaluation will guide adjustments to improve outcomes, aligning our efforts with overarching project goals.
Insights Gained
Learnings
Learnings
Working on this project was a great experience. The fast and efficient work carried out by the whole team allowed us to develop a good MVP with a high level of development for the short time it took to complete.
1
Stepping out of the comfort zoneBeing a desktop-first project adds a higher level of challenge that I found very interesting since these projects are rare in today’s mobile-first market. As one of my first major professional projects in this industry, I’m very happy with the results and I’m waiting for feedback to develop this web app further.
2
Challenges & growthBeing the sole designer in the company and operating as a unicorn designer, even with a mid-level experience upon arrival, initially brings forth certain challenges. However, this singular position facilitates accelerated growth through continuous learning, embracing mistakes as valuable lessons to be applied in subsequent endeavors. While recognizing the potential acceleration with a senior leader, M3E's startup environment cultivates a culture where all team members act as both mentors and learners simultaneously.