OneFlash — Onboarding optimization

Intro — Challenge

It was my final project with IronHack Paris and I decided to team up with another UX/UI Designer : Marc-henri Bachelier. This project was different from the others because we were placed as freelancers working directly for a client. We had no constraints from Ironhack other than fulfilling our mission for the client. For this project We had 14 days from the client interview to final delivery.

We chose to work with OneFlash out of almost 20 projects because the project environment was interesting :

  • We had one clear mission
  • We had to design for a web-app
  • OneFlash users are easily reachable
  • The app must interact with the physical product (the charging station)
  • An interesting project to improve the quality of daily life

First, what is OneFlash ?

OneFlash is a B to B to C company that propose free self-service battery for phone. They rent their battery stations to shops to allow them to improve their customer satisfaction. OneFlash process is interesting for shop customers because they can charge their phone while using it in the shop, and it’s free.

Our mission was to optimize the onboarding part of OneFlash web-app, to bring new customers and reduce the drop out rate. So our final delivery had to be a Hi-fi prototype of the new onboarding.

For this project we had access to OneFlash Figma file with the style guide, the previous screens, flows, etc … We had a lot of freedom on what to submit, we just had to keep OneFlash’s color.

Research

We started our project by interviewing Kévin who is the CTO of OneFlash. It was very important to clarify some points about our work and have as much informations as possible about OneFlash. We spoke with him for over an hour and a half and we had lot of interesting answers.

He gave us two important insights : first, there are 2 different flow, one with a deposit for the user and one without deposit. The second insight is that 70% of the users leave the web-app when they see the deposit screen, and without the deposit it’s 20% of them who quit the app during the onboarding.

With all those informations and with the old Figma files, we started to build our CSD matrix.

After that, we did OneFlash competitor analysis to see what is currently done.

In China it’s a very established market for some years with 3 big players and a huge potential market. There it worked well because they went directly from cash to mobile money (unlike us who went via credit card). So they absolutely need battery power on their phone to do a lot of things.

Covid has brought about a paradigm shift in Europe and consequently in France with companies like Sundae/Sunday, Lydia or even the SNCF. Globally, everything is going to become digital

Competition, joos naki and osol. Most of the competitors apply the Chinese model, i.e. charging €0.50 per half hour. But OneFlash thinks this is the wrong approach

  • It devalues the concept
  • Subject of uncertainty for bars
  • The return is too low: over a year, the user will bring you 4€ per year

In France there are few very established players like OneFlash. There are the rechargeable lockers that you can find at the entrance of the shops but they don’t allow you to use your smartphone during your shopping.

After that, we went to Leroy-Merlin and La Félicita in Paris where there are many OneFlash stations. We went there to do some guerilla testing to see how user currently interact with OneFlash web-app.

Here you can see the user flow with a deposit. The last 2 screens are an error screen and another flow were you can sign-in with your email adress

During our observation at La félicita, we saw that only 3 out of 18 interested people actually succeeded to unlock a battery on the flow with a deposit to make. During the whole process we were asking the user why they were doing this, what was their first thought when they saw this screen. We did this to understand what was not clear to them in the current onboarding

Here are some of the important points we noted about the web app :

  • The display of the screen asking for the phone number is interpreted as an obligation to register as there is no visibility on the rest of the process, they don’t understand that it will be the only information we need to register them. They don’t understand the possibility to enter an email/connect with Google since its not working and ask for a phone number after anyway
  • After unlocking the battery, users wonder how to finish the rental -> there is no dedicated screen for this part in the onboarding
  • The fact of asking for a deposit in certain cases sends contradictory messages to the user: the user is told that the service is free but as soon as the user sees the screen with the fields to be filled in for the bank card, he or she is frustrated and even if there is the sentence mentioning the return of the deposit as soon as the battery is returned, the confusion has already set in (linked to the tests at La Felicita, where the stations are still asking for a deposit, contrary to Leroy-Merlin)
  • End of rental: we do not receive the notification of end of rental. So you have to go back to the webapp if you have closed the tab. A bit confused as to how to get back to the webapp, users ended up re-scanning the QR code to check that the app had taken into account the return of the battery.
  • Somewhat strange rating as screen already filled with 5 stars, no particular context, potentially replaces a slightly more explicit end of tenancy screen
  • Depending on whether you log in with an email, go back to the phone number stage or follow the process to the letter from the start, the path is almost never the same for different users. As a result, for those who encounter a problem and start the project again and find themselves faced with a different flow, it’s confusing (GTC, captcha, return to the phone number screen, etc.)

More observations which are more related to problems with the station itself (but which stop a large part of the users who do not understand)

  • The QR code is very small and when we asked users we realised that they did not see it directly. No one connects via the manual code below the QR code because it is so small that no one sees it.
  • Users confused by the fact that there are 2 QR codes (one for each pack of 6 batteries).

Technical problems for those who managed to pass these steps:

  • A couple had to give up (after all the steps) because the app didn’t detect any available batteries on the terminal when there were 9 available.
  • One man couldn’t get his battery back after completing all the steps because it wouldn’t unlock (he panicked because he thought it would remain as a rental and he would be charged via his deposit). He had to go through the process again to make sure his unlock was not active.

General observation:
Almost a third of the people had the first reflex to pull directly on the batteries (which surely damages the terminal and causes failures like the point above).

We focus on the onboarding of the app but it was important to us to let our client understand that all issues were not related to the app and that a lot of potential new users leaves because they didn’t understand how to go on the app

Define stage

With all those feedbacks, we did our empathy map to better understand OneFlash users.

We used all those informations to create our main persona.

What about Constance ?

  • She’s doing everything with her phone
  • She want to access battery as quick as possible
  • She need to feel guided from flash to release of the battery
  • She is confused by the current onboarding

We did a user journey map to understand where the pain points and design opportunities may be.

This map helped us to understand that OneFlash users meets problems at 3 precise steps : At the beginning on the phone screen, at the deposit page and at the end when the user need to end his rental.

Thanks to all those informations, we made our 2 problems statements.

Solution & Wireframing

Our solution lays on 2 big points : first, we need to remove all the unnecessary flows and non essential functionalities like the possibility to connect with an email. The second point is to separate the screen in two : one part with a tutorial part and the second with the input part.

The objective is to give the right amount of information to the user to allow him to quickly understand what he have to do. On top of that we have reworked each screen with users feedbacks to make the UI as clear as possible.

Here you can see the new onboarding flow

To understand how tutorial and onboarding are currently done, we did a visual analysis and try to find inspiration for the look and feel of our web-app

Here you can see some example of usability testing we did on our Mid-Fi

Those usability test led us to make some modifications because we realized that some points were unclear to OneFlash users. You can see some of them below :

  • The breadcrumb in the middle of the screen makes users think that they can scroll the first half of the page. We moved it to the bottom to make them understand that it is steps and that concern the whole page
  • We reworked the wording and replace “renvoyer le code” for the users to have a better understanding
  • Some user told us that they’re not sure where to click to enter the code, we replace the small ligne by boxes for them to have a smoother experience
  • We have given the user the possibility of going back in case he has made a mistake with the phone number
  • For this page it was very important because users found the deposit screen a bit too crowded and confusing. We needed to draw the user’s attention on the wording first. We realized that the user’s eyes were too focused on the credit card fields and did not even read the important points above. This leads to a misunderstanding where they think that they need to pay for the rental and they leave the app directly.
  • So we change the all organization of the screen with first an explanatory section and then, once they understood, a part where they can make the deposit.

During our design process we kept in mind the Accessibility to be sure that anyone can use our web app properly

  • We tried to give space between yellow and pink as much as possible because they are both very strong colors
  • For the font size we did not use text smaller than 16 px
  • We made very large button to give a huge clickable space to the user
  • We needed to make the text as readable as possible so we did small impactful sentences.
  • We did a lot of work on the margin to let space between element to give a smooth and clear journey to the user

We worked a lot on the different interactions between screens to give a smooth and playful experience to OneFlash users.

Here you can see the PROTOTYPE

Thanks for reading me ! You can find more information about me on my portfolio : https://www.figma.com/proto/FZpK7kwqKk3K1uqChszJBW/Thomas-Mussat-Portfolio?page-id=0%3A1&node-id=2%3A2&viewport=378%2C498%2C0.12&scaling=min-zoom&starting-point-node-id=2%3A2

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store