Overview: This case study aims to showcase the process of creation of the app for the startup, zap. This was a full scale project with a complete duration of over 6 months where I focused on creating a seamless user experience (UX) and a pixel-perfect user interface (UI). Zap is an app, to be launched in iOS and Android using ReactNative development, that aims to simplify the user journey of charging an electric vehicle. Zap aims to be the main solution for all EV drivers and enthusiasts who want to charge their vehicles stress-free by allowing users to quickly find the best pricing for each charging session either through the most competitive price tag to the best cash back or discount available within the app.
Project Goals:
Usability: Create an easy to use app to charge BEV and PHEV answering the most pressing issues reported by real users.
Enhance Visual Appeal: Creating a visual appealing platform that converts, through a pixel-perfect UI approach, users into sources of revenue.
Increase User Engagement: Implement features that encourage users to interact more with the app, leading to increased bookings and overall satisfaction.
Research: This project started with extensive user research that included interviews (10), surveys and an extensive competitor analysis. Our research allowed us to confirm that EV charging apps have an average evaluation of 2,3 stars out of 5 mainly because users often report:
Difficulty to understand price structure and/or invoicing;
Problems with app navigation;
Poor communication between the app and the charging station;
Lack of options to edit profiles and/or benefits associated with the account;
Too many apps to charge the EV.
Design Process:
1. Ideation and Wireframing: Based on the research insights, initial wireframes were created to create the app's navigation and simplify the user journey on similar digital products. Low-fidelity wireframes allowed for quick iteration and feedback.
2. User Flows: User flows were established to visualize the ideal paths users would take to accomplish common tasks, such as start a charging session or see the live range of your vehicle. This helped identify potential bottlenecks and opportunities for optimization.
3. UI Design: With the user flows in place, the UI design phase began. A fresh, modern color palette and a design system inspired by Apple's Liquid Glass design system. To help the user we've developed a system to quickly identify what are the quickest and most expensive charging stations so the user is able to consciously decide which station should use. Other aspect, answering to user research feedback, consisted on creating a feature we call "anti-aging" which aims to visually present — in map and live — the users' vehicle range.
4. Interactive Prototyping: Interactive prototypes were developed using Figma. This step allowed stakeholders to experience the designed app's flow and interactions firsthand.
5. User Testing: The interactive prototype was subjected to usability testing with real users. Their feedback highlighted areas that needed further refinement, such as clarifying certain icon meanings and simplifying the charging process.
Results: The design of zap showed significant improvement in both user engagement and satisfaction when compared to mainstream competitors. Key outcomes include:
Increased satisfaction: The zap® wallet™, a section within the app that allows the user to select the best eMSP or CPO from a curated list of partners, enhanced user satisfaction as one of the most important issues reported by users in research is the need of carrying multiple cards and apps to charge EVs on the go.
Positive User Feedback: User feedback indicated that the app was now easier to navigate and visually appealing, resulting in a more enjoyable charging planning experience.
Conclusion: The design of zap app demonstrated the value of user-centered design by investing time and money into research. This research allowed us to understand where the biggest player in the market — miio — fails to maintain only 10% paying users out of a universe of ~300k.
