Smoov
UI Improvements
Smoov escorts you on your EV journey. Find a charge point, pay via your preferred payment, generate your overview and keep driving forward with Smoov. EV driving has never been so easy.
ROLE
UX & UI Designer
TIMELINE
Two weeks
company
Allego
TEAM
Joran Kapteijns - Mobile App Developer
Harm-Jan Abbing - Frontend Developer
Wesley van den Brink - UX & UI Designer
Context
I was commissioned to use my expertise to improve the overall usability of the application. This was a request from the head of Smoov. There was some feedback received from users about content / functionality problems within the application.

Within one sprint I analysed the feedback, sketched new designs and presented prototypes and discussed them with the team and stakeholders. After that the developers implemented the designs and released it to the App Store / Google Play Store.

I'm happy to take you through the small, but pleasant design improvements I've made with the Smoov team. These enhancements ensure consistency and increase user-friendliness.
Top bar
logo
We have a great mobile application that allows the EV-driver to charge at his favourite charging spots, but I missed the bit of brand connection. In one place the Smoov logo came back.

I thought the logo should come back directly on the start screen, where the user can find charging stations by searching in the map. I decided on best practices, where the user keeps the same functionalities, but is presented in a more user-friendly way.
Old version
New version
search
On mobile phones, the search bar is generally hidden behind an icon. When the icon is clicked, the 'search pattern' will take over the page. The focus of the user will be on their search. This is a well-known design pattern.
New version
filter
When the user searches for charging poles, he/she can also use filters. In the old version it was possible to save a filter, but because of this there was some confusion among the users and the user-flow did not go as expected. I left the saving out, as the number of filter options is minimal. It takes less effort to edit a filter than to save it.

In the previous design, users noticed that filters were active. However, it was completely unclear what and which filters were actually active. At 'connectors' it says four, but it is not clear what is beyond the number.

I studied similar applications and found that it is common to indicate how many filters are active. It is not the intention to indicate exactly what is on. The user can find this out by going to filter.

In the new version there are no standard filters active, so no charging stations are bypassed and for transparency to other charging station providers.
Old version
New version
New version
Charging Location
I have added the Smoov logo to this page. The title color is green, because this is internal consistency within the rest of the application. The question mark icon is changed to the correct troubleshooting icon - which already was in place within the application.

The most important change is the 'fixed button' on the bottom of the screen. Because of this, the most important functionality is always in an easy to reach location of the user - the sweet spot.
Old version
New version
Added in new version
Charge Here
The socket label is placed below the charge point ID. This hierarchy is also being used on our charging stations. Here is the fixed button also added. In the old version was the button not always visible.
Old version
New version
Active Session
Small adjustment in the visual representation of the vehicle, the fixed button element added, session details placed above the 'fold' and white spacing. By again putting the address title in the green color, the use of color remains consistent.
Old version
New version
Added in new version
Added in new version
Others
Mainly the implementation of a consistent white spacing style, use of color, layout, font sizes and where appropriate use of the Smoov logo. Think of: My Smoov, More and the Receipt page.
Learnings & Insights
native vs. hybrid
Smoov is a Hybrid application, but my preference is towards a Native application from a user perspective. The big advantage of this is that it is the fastest and most reliable in regards to user experience. The application uses the operating system features, which the user encounters on a daily basis.

Speed to market, one source code, easy updates, availability of resources make hybrid applications attractive. However, in the future, a company will spend more time repairing and tweaking the app due to user complaints or performance issues.