︎


Work           About           Contact


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.
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.



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.
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.









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

Communication
M3E needs to offer its wide range of products and services to electric vehicle fleet acquisition managers.

2

Data management
Reduce 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 revenue
Increase potential customers directly through M3(E)-Solutions and indirectly through the white label option.







Current experience

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° service
M3E has many services and products, that offered independently and separately can be overwhelming and confusing for customers.

2

Independent input channels
M3E manages various channels (phone, email, contact forms), risking disorganized customer documentation processing when clients use multiple channels.

3

Communication
The 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 market
 While 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 product
While 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.


1

Primary Proto Persona
Thomas 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 Persona
Armin 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.
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 have
Intuitive 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 have
Online assistant that answers users' questions on-site.

Mobile version for user on the go without quick access to a desktop computer.

3

Could have
Onboarding, 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.

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 Stations
The 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 and
e-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 programs
Quickly 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 quota
GHG quota are presented, explaining the environmental policy instrument clearly. M3E's GHG quota service can be booked directly.

6

TCO calculator
Operational costs for the selected vehicle are featured. It highlights the monetary advantages of EVs over combustion engine models, summarizing costs over 10 years.

7

Overview
Thomascompletes 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.

1

Color
The color scheme incorporates M3E's institutional green and greyscale for contrast, ensuring good usability.

2

Typeface
The Lato typeface was chosen for its simplicity and readability, with various styles for differentiation.

3

Best practices
Best practices, including the use of Ant Design Open Source kit, were employed for intuitive navigation and a smoother handover to the IT team.

4

Branding
Two 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.

1

Layout
12-column grid, with a ration of 1:6 for navigation. Saves most of the screen for presenting information.

2

Dual-function navigation
Acts as stepper/progress bar.
Displays numbered steps and descriptive titles for clarity. Allows Thomas to easily track his progress.

3

Easy Editing
The sidebar enables users to go back to specific points with a single click, and edit the information input.

4

Extra options
The 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.


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 row
It 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 row
Here 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 row
It 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.
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

1

User feedback gather
The web development stage of the project is nearly complete, and the implementation is scheduled for the first quarter of 2024. Once live, we plan to gather valuable user feedback to refine interactions and enhance future versions based on real user experiences.

2

Gain users trust
Adhering 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 & results
Additionally, 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

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 zone
Being 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 & growth
Being 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.


Let’s connect on  ︎ ︎
© 2023 Gonzalo Ortiz Derpich