My role in this project

• UX research
  
• UX design
  
• Prototyping
  
• UI design
  
• Brand design

Problem
How could I increase awareness of M3E's comprehensive EV services to prevent market fragmentation, establish market leadership, and improve data management across customer touchpoints?

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 start-up founded in 2019 with a bootstrapp business model – sought to establish itself as a market leader by offering the broadest range of services tailored to their customers – vehicle salespeople 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.

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 pitch to prospective clients by providing a visual example.

I also chose 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 ensuring color contrast and usability compliance with EAA. I also adapted the company logo to create M3(E)-Solutions logo, keeping it minimal and recognizable, based on Jakob Nielsen's heuristics.

2. Navigation & easy editing
Implemented a sidebar stepper with numbered steps and clear titles for progress tracking and easy navigation back to previous points,  following Jakob’s Visibility of System Status Usability Heuristic.

3.Help & Contact button
I included a separate, icon-less help button in the sidebar enabling quick access to M3E expert assistance for salespeople, providing crucial customer support. I decided to separate the button to prevent misclicks and navigation errors.

4. Top row
It shows the step/section title and Shopping cart button for selected products. This keeps users informed, helping them quickly identify their location in the process and what follows next.

5. Central row
An image banner serves as a marketing intro and promo hook. It also prefaces upcoming information and gives the marketing team control over banner content, allowing updates based on user needs and market changes.

6. Bottom row
It shows the main content and allows to input the data requiredto customize the best customer offers. Displays plenty of information above the fold, encouraging users to scroll for more, ensuring a smooth navigation.

Information Architecture and User flow

Navigation Testing and Iterations

To ensure intuitive navigation for salespeople and customers, I tested initial mock-ups with colleagues unfamiliar with the product to simulate salespeople's first experience, as time constraints prevented testing with actual users.

Using rapid prototyping, I conducted in-person moderated usability tests where testers explored the platform, selected services for a random EV (similar to real customer scenarios), and shared their thoughts aloud.

Based on usability testing, we simplified navigation by removing the language selector (top row) and replacing the Settings button (bottom of sidebar) with a Help/Contact button, eliminating the floating wizard button.

The language selector proved unnecessary since language is determined by shop location IP address.  This decision reduced development costs and speeded up production.

The floating wizard button was also removed after 70% of testers found it annoying and unnecessary.

Since the platform doesn't need personal accounts/settings, the stakeholders and I decided to replace the Settings button with a Contact button, serving the wizard button's purpose but with secondary UI importance.

After implementing the changes, a second prototype version was presented to stakeholders, as seen in the following video.

15%

increase in conversion rate

New

A new B2B business funnel

More

Customers profits’ boost with M3E's services

Learnings

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