Swap
Designing a mobile app for electric vehicle enthusiasts, enabling them to seamlessly monitor their vehicle's status and easily order or exchange batteries.
Designing a mobile app for electric vehicle enthusiasts, enabling them to seamlessly monitor their vehicle's status and easily order or exchange batteries.
SWAP revolutionizes electric motorcycle ownership in Indonesia by offering the country's first replaceable battery service. Instead of waiting to recharge, users can swap their empty batteries for fully charged ones at the nearest SWAP battery outlet, completing the process in a matter of seconds.
Collaborating closely with the SWAP team, we designed their mobile app from scratch to deliver a seamless, user-friendly experience. The app interface was crafted to be simple, intuitive, and quick to use, ensuring that every interaction with the app is efficient and enjoyable.
Industries
Automotive, electric vehicle, battery
What we did
- Stakeholder interview
- Requirement study
- Competitive study
- Information Architecture
- Wireframe
- Userflow
- UI Design
- Design System
Available on
Before diving into the creation process, it was essential for us to delve deeper into SWAP's objectives, market, and competitors. We began by analyzing SWAP's brand and several other EV products to gain a comprehensive understanding of SWAP's product mechanism.
In addition to reviewing the project brief, we grasped the product goals and a high-level vision of how the founders envisioned the app's look and feel. This groundwork ensured that our design approach aligned perfectly with SWAP's overall mission and objectives.
Electric vehicles embody modernity, youthfulness, and a futuristic vibe. Drawing inspiration from these themes, we crafted a UI design for the SWAP app. Initially, we explored two distinct design directions, each with its own visual identity, as showcased below.
After presenting these options to the client, we engaged in discussions to evaluate the strengths and weaknesses of each version. Following this constructive dialogue, we implemented several changes and ultimately reached a decision on the final design direction.
Version 1.
Two tone: blue & white
Linear icon pack
Font DM Sans
Version 2.
Monotone: white and clean
Solid icon pack
Font Open Sans
The app offers real-time data essential for monitoring the battery status, including battery health, charge level, and distance prediction for the vehicle. Our interface design emphasizes visuals over text, ensuring users can easily read and understand the information at a glance.
We begin by displaying a map, allowing users to easily locate the nearest battery outlet. To enhance user experience, we use color-coded location pins on the map, enabling users to quickly scan for battery availability at a glance.
Batteries above 50% are available
Batteries under 50% are available
No batteries are available
Users have the option to select a location and access outlet details, including opening hours and available batteries for ordering.
The vehicle and battery status are represented using colors appropriate to their state, along with crisp, sharp, and bold icons that remain clear whether viewed on a small or large scale. This design choice ensures that users can quickly assess the overall condition of their vehicle.
The SWAP app is packed with features that empower users to take control and stay informed about their electric vehicles. We conducted several explorations to determine the content hierarchy and aimed to create a layout that is visually engaging and not overly reliant on text. While challenging, this task was incredibly rewarding, especially when we saw the app in action and in the hands of users.
To ensure the security of the application system, the registration process involves two main stages: phone number verification and linking the motorcycle with the license number. However, we've streamlined the registration process to be as quick and easy as possible, allowing users to enjoy the features of the SWAP application immediately.
Recognizing that motorcycles are often targets for crime and theft in big cities, we've implemented a feature in the SWAP app called "Lock Motorcycle." In the unfortunate event of theft, users can easily make their motorcycle temporarily unusable with the press of a button. This simple and intuitive design aims to reduce user panic during such situations.
We've created style guides to define the overall look, including colors, typography, iconography, buttons and interactions, UI components, and more. These scalable design systems are designed to evolve over time with the product and the team, ensuring consistency and efficiency in design implementation.
“Not only is he an excellent designer, but he is also a great friend and mentor. His leadership skills are unparalleled and he always goes above and beyond to support his team members.”
“Rizqi & team is a UI/UX design genius! Their work on our project was flawless, delivering a design that not only looked amazing but also functioned beautifully.”
“Working with them was a pleasure. Their UI/UX design expertise is unmatched, and they were able to take our project to the next level.”
“Rizqi transformed our vision into a user-friendly, visually stunning reality. Their expertise and professionalism were evident from start to finish.”
