ChargedUp

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.

My role
  • User Experience
  • User Interface
  • Prototyping
  • Copywriting
Tools used
  • Sketch
  • Origami
  • Flow
Platform
  • iOS
  • Android
Timeline
10 weeks
Introduction

What is ChargedUp?

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.

The Challenge

Consolidate in-app experience between Android and iOS in less than 10 weeks

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:

  1. Improve UI usability and accessibility
  2. Lower barrier to entry for new and existing customers
  3. Reduce app dwell time; maintain utility-first approach
Screens from the legacy iOS app
Screens from the legacy iOS app

My role

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.

The Approach

Systematise findings from user research and heuristic user interface review

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.

Insights

Edge cases guide design towards a better experience

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.

Low battery gets people anxious

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.

Poor coverage at rental locations

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.

Ineffective information architecture

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.

Looking for station ≠ being next to one

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.

Sample screens from the legacy Android app
Sample screens from the legacy Android app
The Discovery

Customers expect a utility-like service

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.

How we got there

A power bank rental experience for everyone

Among the questions I was asking myself and others during this project, three specifically informed my design strategy:

  • How do you design a consistent experience for two strikingly different mobile platforms?
  • What contexts need to be considered?
  • What is the perfect power bank rental?

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.

Early-stage style guide for ChargedUp apps.
Early-stage style guide for ChargedUp apps.
How we got there

Breaking down the experience

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.

  • How might we help people find a charging station?
  • How might we facilitate rental that reduces effort and saves time?
  • How might we help people better understand what they are paying for?

Establishing core design principles

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:

Focused

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.

Predictable

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.

Resilient

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.

Familiar

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.

Delightful

Interactions can offer more than just a sense of utility. Aim to delight the user, but never at the expense of their experience.

ChargedUp UI Kit in Sketch UI
ChargedUp UI Kit components (symbols) created during the project in Sketch
How we got there

App design process

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:

  1. Research the business, interview stakeholders, agree on priorities
  2. Heuristic review of any existing solutions (iOS and Android apps)
  3. Take inventory of existing UI
  4. Identify user experience bottlenecks
  5. Create a backlog of issues to tackle
  6. Prioritise tasks according to their importance and impact on the user
  7. Sketching, brainstorming, prototyping ideas
  8. Lots of conversations and critique sessions with the team to validate assumptions and clarify intent
  9. Designing more mature ideas into full UI mockups

Clearing up the confusion

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:

  • How much do I have to pay?
  • How do I return a power bank?
  • How do I see my rental history?

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.

ChargedUp iOS navigation before and after redesign.
ChargedUp iOS navigation before and after redesign.
How we got there

Creating a better onboarding experience

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.

Artboard for the iOS app displayed in Sketch
A sample of additional messaging integrated into main flow to ease user’s anticipation.
How we got there

Lowering the barrier to entry

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.

Artboards of the iOS app screens in Sketch
Example of how a reductionist approach to registration and sign-in process can lower barrier-to-entry for new and existing users by removing redundant choices.
How we got there

Over-designing for failure

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:

  • People picked a station that had no power banks in a “ready state” (with a 75% charge or more).
  • People assumed a charging station is always turned on, and always online (it depends on how venues manage them).
  • People assumed they entered the code correctly, ending up unlocking a power bank from the wrong station.

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.

Examples of alert messages in iOS app
By using simple messages and confirmation dialogs we were able to reduce the anxiety and provide helpful information to the users without going overboard.
What’s next

Building apps from new foundations

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.

Screens from redesigned Android app
Results of app redesign as seen on Android platform; from the left: main screen, rental receipt, promo code entry modal.
Takeaways

What I learned

Don’t reinvent the wheel

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.

Always aim for most accessible colour

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.

Great ideas come from everyone

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.

Afterword

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.