In 2019, renting a power bank through ChargedUp apps was nothing more than a collection of loosely connected screens that made the experience a bit clunky to use.
In 2020, I was brought on-board with a mission to consolidate a power bank rental experience for one of the fastest growing tech startups in London.
ChargedUp is Europe’s largest phone charging network, comprised of over 2,000 locations. It allows people who are out-and-about to charge up their devices on the go, without being tied to a specific location and without leaving their phone unattended.
Grab a power bank and take it with you anywhere you like.
Our main goal for this project was to redesign the app in a way that would provide a consistent user experience across Android and iOS for over 40,000 Monthly Active Users (MAU), while following Human Interaction Guidelines of each platform, and solving previously discovered interaction and accessibility issues. Phew!
Essentially, we wanted to:
I led the redesign and consolidation of ChargedUp’s mobile apps between January and April 2020; from initial review, feature ideas, concepts, user journeys, early prototypes, to the final UI design execution.
In addition, I worked alongside a CEO, CTO, Head of Product, Head of Design, as well as iOS and Android Engineers.
I stopped working on the project after the detailed visual design phase was completed, as the app started to be built.
Several weeks before I was hired, ChargedUp commissioned a field research which also delivered a concise evaluation of the overall rental experience, giving us a solid basis to start with.
While the research exposed aspects of the experience that needed attention, such as the first-time use, or the rental journey, it was not focusing specifically on the in-app experience. I decided that a separate evaluation of the existing apps is required before proceeding, followed by a peek inside the apps’ analytics to see the big picture.
Throughout the course of the project we worked in weekly sprints. We reviewed progress regularly with in-person sessions involving stakeholders. I used existing evidence from prior research, analytics, as well as ad-hoc usability observations to help us better understand the why’s, how’s, and when’s of people using ChargedUp apps.
We tested the existing ChargedUp app with a few participants in the busy city centre areas of London and Manchester. Our goal was to understand what issues customers were facing.
People were more frustrated with specific elements of the rental journey when their phone was running low on battery. They expected ChargedUp rental to be quick and painless.
Customers expect a power bank rental experience that will work when the coverage is poor, network latency high and there’s a greater chance of communication issues.
Often, people had trouble with completing certain tasks within the UI on Android devices due to the inconsistent interactions and poor navigation in the app. They expected a more cohesive experience that supports their goals.
ChargedUp customers use the app in two distinct ways. There are those who are looking for the nearest charging station and those who are already in front of one and want to rent a power bank right now.
On the surface, this looked like a simple UI/UX redesign project with a caveat of being done for two distinct mobile platforms. I couldn’t have been more wrong. The research revealed how much reliant people are on power banks and portable device charging as a whole. They treat it more like a utility service rather than a convenient option, essentially making ChargedUp a “portable energy supplier.”
If users with great mobile coverage, powerful modern phones and tech literacy were having issues with renting a power bank through the app, then what about the people who use technology as a means to an end, with slower devices, smaller screen sizes and worse eyesight?
It became apparent that a mere fresh coat of paint would be a waste of everyone’s time and money so we agreed on taking a deeper dive into the app’s user experience from the start.
Among the questions I was asking myself and others during this project, three specifically informed my design strategy:
It was clear we had to redesign both iOS and Android from the ground up. The former was not exactly on brand and had some usability issues, while the latter was just about usable due to the overall architecture of the app.
A more inclusive experience
The existing apps had just acceptable experience even for users who were familiar with their mobile platform of choice (iOS or Android). The inconsistencies in visual presentation and interactivity led to user errors and increased dwell time that could have been avoided.
To abandon the existing biases, I worked with the Head of Product to educate the team on the importance of designing for everyone, regardless of their current situation, which creates a specific context that can affect the way customers interact with ChargedUp for a short period of time.
We stressed how important it is to treat the app’s interface as an enabler rather than a simple means-to-an-end, and ensure the core tasks can be accomplished with ease, regardless of the situation. It was not a hard sell once people started seeing the subsequent results of implementing good design.
The first step to finding out what the perfect rental experience is, was to break it down into predictable steps and ask ourselves what does each step needs to facilitate.
To bring order to chaos, we needed to make sure our intentions were aligned with our principles. As there was only a vague notion of what our design principles should be, I spent some time interviewing the team about their idea of what “good design” is.
I have distilled those thoughts and ideas into five principles to guide the designs which I then proposed to the team. Our designs should be:
Customers often don’t have much time left before their phone goes out of juice. Think about what you want them to see or do first.
People should be able to accomplish their tasks with confidence, having a good sense of what may happen next. A button label should indicate intent.
People who rely on power banks are often distracted, anxious, in a rush. Aim for clarity of each message, minimal interruption, and ability to recover from issues.
Design with a sense of familiarity, using our brand as a means to connect the experiences together without making them inconsistent with the target platform.
Interactions can offer more than just a sense of utility. Aim to delight the user, but never at the expense of their experience.
Each project requires a slightly different approach and process. While there are several common stages, such as discovery and research that apply to all projects I’m involved in, it’s good to make sure the process fits the project.
Designing for ChargedUp was not an exception. By tailoring the design process I was able to focus on what truly mattered to the business and the team within such a short time frame (<10 weeks).
I could summarise the process of redesigning the apps in the following steps:
From the guerrilla usability research we’ve done and the data from app analytics it was clear people were thrown off by things such as:
These were just some of the questions that ChargedUp customer service team was reporting over the last few months on and on.
To help with this, I evaluated the current app structure and realised that the vast majority of screens were hidden behind the so-called “hamburger menu” or even deeper than that. Everything was there: from rental history, through settings, to support links.
Instead of redesigning it straight away, I took time to evaluate the app’s information architecture and its navigation structure by using card sorting technique. The result of this exercise was a clearer navigation structure, thematically grouped sections and simplified options that were brought forward to the main screen, getting rid of the need for a menu altogether.
The options were now always accessible, and this itself reduced dwell time and cognitive load on people trying to add a new payment option, contact customer support or see their rental history.
The app wasn’t exactly doing a swell job helping people get to know the service beyond displaying three vague introduction screens upon the first-time launch of the app.
It was more of a “figure it out, eventually” type of experience, and even though the idea of renting a power bank was relatively simple, we still wanted to make sure people get the most out of it, due to the amount of nuance.
A great deal of mobile onboarding experiences follow a familiar formula: show a couple of intro screens to swipe between when people launch the app for the first time, and… that’s it. ChargedUp wasn’t any different. While better than no onboarding at all, it was not enough to reduce the anxiety while people kept wondering what will happen after they tap “confirm rental”.
Together with the Head of Product, we decided to rewrite the content for the intro screens, and after some deliberation I suggested to create a first-time guided experience that would not get in the way of the main order of business for the users.
With infrequent reminders and tidbits of information scattered around crucial places within the UI, we made sure the Customer Support team would be busy helping people solve only the biggest of issues.
As most startups, ChargedUp faces a common problem: the barrier to entry. Their service requires people to sign in before they can rent a power bank or get on the line with Customer Support, which can put some people off.
They’ve already implemented the use of One-Time Passcodes (OTP), so an initially high barrier to entry was lowered significantly compared to conventional email and password combination. It only required the user to enter a six-digit code sent to them by SMS.
However, we were still seeing approx 50% dropout rate for first-time users, so something was clearly not up to scratch. Using heuristics, we quickly found out that the process requires people to switch between “registration” and “sign-in” modes. As discovered by NNGroup during usability studies, modes aren’t all that useful in contexts where there are not so many different options available to the user.
Modes become useful when we have too many different options that we want to make available to users, and not enough available types of input to accommodate them all (in a usable, discoverable, and sensible way). —NNGroup, “Modes in User Interfaces”
The alternative was to move the registration till after the initial rental was confirmed. However, this would require a lot of reengineering of the code in both clients and in the API, so we wanted to avoid doing it, unless absolutely necessary.
After some brainstorming, I suggested that we could maybe detect whether a user’s phone number is stored in the database and based on that either proceed to the OTP entry straight away (for existing customers), or ask for their full name (if it’s a new customer), doing away with the whole idea of “registering an account” altogether.
It turned out that was very easy to implement using existing API endpoints and so the solution was incorporated into my designs.
The first step to renting a power bank is to actually pick a station you want to rent it from by scanning a QR code or entering a number displayed on the front of it. It may seem simple, but we observed that:
The lack of feedback from the app was killing the experience by increasing the anxiety in anticipation of releasing a battery from the charging station. People did get it wrong, quite frequently in fact, which was easily provable by examining the feedback Customer Support received and the amount of refunds issued for failed rentals.
While the second round of designs for the scan screens was nearly done, ChargedUp CTO suggested that maybe we could use HTTP Status Codes coupled with Location Services to evaluate the responses and issue appropriate feedback to the user.
Based on this, we ideated a few core types of messages a user should see when the conditions aren’t ideal.
After completing designs and handing over design documentation at the end of March 2020, the team begun implementing my designs into their apps.
This will take a while, since both apps need to go through a severe code refactor in order to accommodate the architectural changes that were planned anyway. In addition to the UI mockups, I have also created a UI Kit Library for all custom-designed components. ChargedUp will be able to use it to brainstorm and mock up new ideas and improve the existing UI across both apps.
While feature-complete, this project is far from done, and I’m looking forward to what the team will be able to accomplish with the foundations I set in place.
It’s easy to start designing custom UIs in the hope of “unifying the experience”. That’s not what I wanted to do with ChargedUp. I wanted each app to retain its own platform’s tried and tested interaction patterns and align the vision with each platform’s principles.
By creating custom components only for things we could not get from Material Design (for Android) or UIKit (for iOS), I was able to simplify design and development of both apps.
ChargedUp’s brand colour palette was not initially optimal for working with user interfaces. It took me a few solid days to experiment with colour and create a derivative palette that we were able to use with confidence, taking into account colour contrast on elements and in typography.
This is all-the-more important, given there are very few ways you can convey your brand within a mobile app, especially one which serves as a utility: functionality always comes first.
Spending time within your own product bubble can be detrimental to the product itself, as you develop more and more biases. Talk to the people outside of your inner circle.
One of the most helpful ideas during this project came not from the product team which I was part of, but from ChargedUp’s CTO, who offered an elegant and simple solution to a problem we would have likely overthought.
The above case study gives just a glance at the whole story. There is far more nuance in this project that I could convey within a single article without writing a 10,000-word essay.
All I can say, is that this project was probably one of the most inspirational and eye-opening in my career. If you ask me if I am proud of what I delivered, I would probably say yes, with a sidenote that I’d love to have another 10 weeks to get stuck in this product.
I am proud that I left the team in a much better position to learn and improve the experience for their customers. I believe that great design takes time and wisdom, and while we were short on the former, the team has plenty of the latter to keep on going without me.
ChargedUp is still growing their business, now also internationally as they launched in Germany in February 2020. I couldn’t be happier to lend them my skills and experience, and become part of their story.