Behind the Layers

Grab a coffee, it's a long read.

Design process

Starting this project from scratch, I followed the Design Thinking framework, with some adjustments to fit the project's needs:

• I researched the current installer workflow, created an As-Is Customer Journey Map (CJM), and identified key areas for improvement
• During the ideation phase, I mapped the To-Be CJM and developed high-level wireframes, incorporating strategic business goals, product priorities, and technical limitations. We spent a significant amount of time refining the most critical user flows in detail
• I prototyped ideas and validated them through multiple rounds of usability testing, including end-to-end tests from unboxing to charger handoff
• I designed the UI, created illustrations and animations, and supported the development team during implementation

Research

The primary goal of this phase was to gain in-depth insights into installers' workflows and their experiences with the previous generation of EVBox charging stations, as well as with competitor products. To do this, I took the following steps:

• Together with regional teams, I conducted user interviews with the installers in key regions (Netherlands, Belgium, France, Norway)
• I interviewed the technical support team who communicate with installers and address their issues daily
• I collect known issues and feedback about the previous generation charging stations from the Product team
• Together with the Hardware Design team we tried out the configuration of 4 competitors' stations

Key pain points

Research data analysis revealed key pain points in the current installers' experience:

• Pairing with the charging station requires manual input of ID, password, and security code (20-character strings)
• The connection with the charging station is not stable
• No guidelines in the app on how to configure the station, what settings are required
• No clear feedback in the app if the settings are applied or not
• Confusing distribution of settings between installer and station owner modes
• Safety-sensitive settings accessible to non-professional users
• Not clear how to connect a station to the backend (Charging management system)

Strategic Product Decisions

Several strategic product decisions significantly shaped the direction and mobile app experience:

• Split installer and owner experiences to reduce confusion and prevent access to safety-sensitive settings. The Install app should serve installers only
• Enable plug-and-charge by default for instant testing without backend dependency. Installers hate wasting time on setting up backend connectivity
• Use local wi-fi hotspot for connection to the charging station

Considering everything mentioned above, I've mapped a journey To-Be for installers of the new-generation stations.

Wireframes and user flows

I kicked off the design phase with rapid user flows and wireframes—the fastest way to communicate ideas and align with Product and Development teams, surfacing technical constraints, errors, and edge cases early.

Paring with the charger

Pairing with a charging station is one of the app's most critical flows.

Installers must connect to the station's Wi-Fi hotspot with network name and password, and then authentificate with a security code (station key). For security reasons, this network is only accessible through the app but not in a standard Wi-Fi settings.

To make pairing as seamless as possible, we encoded all required data into a QR code. Scanning it with the app automatically connects the mobile device to the station's hotspot and completes authentication. The QR code is printed on the configuration sticker included with the station.

While the happy flow is quick and effortless, it comes with a range of edge cases. Key challenges:

• Simplify manual input while meeting security requirements
  I reduced manual input by aligning with architects to use the station ID as the hotspot name. I also proposed splitting long character strings into 4-character chunks.
• Optimize user interaction with the app for both iOS and Android
  Handling wi-fi connections has several limitations and requires app users to provide some permissions, for example, permission for the app to access a camera to scan a QR code. Together with the Mobile app development team, we explore all these limitations and ensure we cover all of them.
• Guiding installers
  Several steps are critical for installers and must not be missed. I added clear guidelines in the app, on the charging station itself, and in the documentation.
• Identify and handle possible errors
  What happens if the user denies camera access, Wi-Fi is disabled, or authentication fails? Together with the development team, we thoughtfully addressed each of these edge cases and designed clear, actionable instructions to guide installers.

This flow underwent several end-to-end usability tests with installers in the Netherlands and Germany. Iterations focused on optimizing user interaction, creatively designing and positioning the configuration sticker on the station, and refining the in-app instructions.

Configuration flow

Another key flow was the Configuration Wizard. It was designed to address major user pain points during the initial configuration of the charging station.

After designing the flow, I conducted a usability test to validate the experience. The test surfaced several critical issues:

• Unclear navigation back to the Configuration Wizard from internet connectivity sub-flows
  Although a standard modal close button was present, all participants instinctively looked for an action button at the bottom of the screen—where the main CTA is usually located
  Solution: I introduced a "Done" button at the bottom of the screen to provide a more intuitive exit point
• Ambiguous instructions on where to place the configuration sticker
  Participants were unsure about the sticker's correct placement
  Solution: This was resolved through close collaboration with the tech writing team to clarify the instructions
• Uncertainty about the final steps and whether configuration was complete
  Users didn't feel confident the process had ended
  Solution: On the last screen of the wizard, I combined the final instructions with the configuration confirmation. The screen transition was redesigned to clearly signal the completion of the flow.

The next round of usability testing confirmed that we had resolved these issues. Users rated it 5 out of 5.

Visual design

Several constraints influenced the visual design decisions for this project:

• Neutral branding
  Since the app is intended for use with EVBox-branded charging stations and other brands, it should not include the EVBox logo, brand colors, or recognizable patterns.
• Product illustrations instead of photos
  Similar branding constraints applied to product photos. Since branded renders couldn't be used, I created custom illustrations aligned with the design system guidelines.
• Light color mode
  Research indicates that dark text on a light background is generally more readable, even for individuals with good vision, particularly in low-light settings like underground parking or in bright sunlight.
• Design system compliance
  To ensure consistency across products, I used components, patterns, illustrations, and icons from the existing design system.