Mobile app that takes electric scooters to the next level
Electric vehicles are revolutionizing the way people move around, and Apollo Scooters are at the forefront of that change. To allow them to provide an even better product, we set to work on a modern, user-friendly mobile app that would connect to their electric scooters’ internal computers and enhance the experience.
The people behind Apollo Scooters aspire to offer the world a modern means of transportation that’s unique, fast, eco-friendly, and above all, viable in the urban and suburban environment. Their electric scooters took the world by storm and quickly became benchmarks for their industry competitors.
Apollo Scooters wanted a mobile app and needed that app to keep up with the scooters in terms of innovation. The task was to give the scooter owners an even better product experience and control over their vehicles. As it turned out, an app created with an electric scooter user’s needs in mind is something much more than just a map and a charging bar.
The first time you’ll tap the Apollo Scooters app icon on your smartphone, you’ll be taken through a meticulously conceptualized user sign-up and introduction process that we outlined before we even sat to write a line of code. What we call the “user flow” is essentially a plan of all the actions an app has to respond to in order to fulfill the users’ expectations during the all-important first use – oftentimes the make-or-break of an app’s success.
Before we apply any style or branding, we carry out the wireframing, a crucial conceptual process that focuses on key features and user behavior. The app was designed to have several different menus, out of which stats, vehicle status, online store, and profile settings were the most important.
The next screen a first-time user will see is the account sign up screen. Agreeing on a “no frills” approach, we quickly decided on a final look of this tab, that has no unnecessary additions or elements taking your attention away. High-quality 3D-rendered backgrounds sealed the deal when it came to aesthetics.
Next, it’s time for the user to pair their mobile device with their vehicle. We made sure it’s a straightforward process with easy-to-understand pairing menus, introduction videos, and a few nifty features, such as being able to give your scooter a unique name, which surely comes in handy, when you have more than one of them!
To every Apollo Scooter you can get high-quality smartphone mounts from Apollo’s online shop, so dashboard functionality was a must for our app. This was perhaps an element of the app that had to be the most readable of them all. After all, we don’t want owners having to take a second look to ensure they’re going at the right speed. That’s why a large speed-o-meter takes the center stage, and a visualized charge level and range help when a rider is planning a longer trip.
What’s often overlooked is the necessity for implementing motion wherever the app connects or has to load something, as there’s a need to communicate that the process takes time. On the device/vehicle connection screens, the role of animation is to assure the user, that the feature works as intended, and that the app is currently processing a task.
Each electric scooter from Apollo Scooters aims to replace a car on the streets of a city. But much like the gas-powered chunks of metal they are to replace, they need a vehicle-grade road map & navigation too. Design-wise, the map has been customized to fit the overall gray and dark-gray tones, with easily noticeable light blues and oranges acting as contrasts.
If you think about it, a „My locations” menu is simply another take on „Favorites” – so basically, you can’t go wrong if you keep it simple. This is exactly what we’ve done here, prioritizing key functions: saved journey destinations and address input field (with suggestions).
When designing and implementing a vehicle access and locking functions, you have to accommodate space for various user preferences. It should also be a familiar experience to anyone who ever unlocked a phone. When it comes to locking and unlocking the scooter, this feature utilizes all the modern smartphone capabilities, such as facial recognition, fingerprint-based verification, as well as the good, old PIN number.
A guaranteed hit for all fans of statistics, the Activity tab sums up the scooter’s journeys through easy-to-access menus that show your routes and numerous data points. The app connects with the scooter’s vehicle-grade onboard computer and apart from recording standard values such as distance, speed, and time, it also informs the user about the motor’s temperature and energy consumed.
No app is complete without the Settings menu. We’ve put extra effort in order to strike a balance and avoid including too few or too many menus inside the tab. Apart from buttons and on/off switches, you’ll also notice colorful sliders and icons. Some options were colored in bright red, keeping in touch with the app’s visual identity, and signifying important functions you don’t want to tap by mistake, such as Log Out or Delete Scooters buttons.
For many young people, an electric scooter is going to be the first real-life vehicle they’ll use to navigate urban and suburban streets. For parents who wish to keep a watchful eye on their children’s voyages, we implemented the Parental Control functionality. It’s especially useful if the vehicle is being shared among family members. Interface-wise, we’ve taken the PIN Code functionality and implemented it here as a code input field that allows to lock and unlock the scooter.
With the Help menu you can search for your local Apollo-affiliated workshop and make an appointment for a scooter check-up or any other maintenance service. It’s a mixture of the map, navigation, and address bar features, blended into one to offer an excellent help & support experience.
We’ve already mentioned the Online Store during the wireframing, and naturally, it made its way into the final product too. It’s not only scooters you can find here, as the manufacturer also supplies numerous spare parts for people looking to fix their vehicles on their own, as well as useful accessories, such as headlights, locks, and bags.
The sleek gray and dark gray layout worked very well for Apollo, as their scooters usually come in elegant, dark colors – a sort of trademark for a high-end, well-made vehicle.
Two shades of light blue made it into the project, offering a neat contrast for 4 shades of gray – as per the brand’s visual identity. Gibson and Nimbus Sans Extended were used as fonts here – a great choice considering the innovative and next-level design of the scooters themselves, which call for a modern and elegant sans serif typography.
A market innovator needs an innovative digital product. With a meticulous plan and an eye for detail, we worked together with Apollo Scooters to provide them with all the necessary UX, UI, and Front-End development work & research their ambitious project needed. We have provided our partners with an advanced, modern, and professional-looking mobile application that answers the needs of both everyday commuters and weekend warriors. We think of our cooperative work in a much broader sense than just a delivered digital product. We are sure, that for any first-time Apollo Scooter owner, their venture into e-mobility will be a real breakthrough, much like an electric scooter was a breakthrough in terms of urban mobility.
Co-Founder – Apollo Scooters
