Case Studies

UI/UX Design App Design

Meet The Bubble.

Your smartphone free charger. 

the challenge

The Bubble is a French startup that offering a charging device that allows you to safely charge your mobile phone while you enjoy coffee, eat dinner in a restaurant, or shopping at a nearby boutique. The Bubbles have already served over 3 million people in thousands of places around the world. But it was time for a change. We were asked to improve and simplify the existing application used to operate the device by changing the graphic design and improving the overall user experience. It was a fun and enjoyable project. Just take a look.

Role & Services
Jan 2017
UX Design
UI Design
App Design

the project

application main screen

We researched before we started working on the project. We collected all inspirations and styles in which we want to follow and developed a detailed user flow, from the moment the screen is pressed, through the process of inserting the phone into the device, connecting to charging, closing and ending with receiving a charged phone. All this had to be transferred to displays with specific parameters(yes, without retina) with a limited number of colors.

Bubble-company-app-image-jakobsze

typographic key to success

Due to a specific target group, we decided to use elegant, clean, legible but slightly crazy typography. The Nexa family was a perfect choice. Thanks to the right font selection, we can easily reach teenagers and middle-aged people.

1-Bubble-company-typography-jakobsze

colors

colors

Due to the limited number of display colors, our application could not have gradients, and the colors had to be uniform and legible. The use of white and gray to create the layout gave clarity, while the blue and red colors informed about the user's next actions.

2-Bubble-company-colors-jakobsze

illustrations and animations

The easiest way to teach a user to use the device? Show him the movie! In our case, animated linear illustrations show how to connect a phone and use / close the device. Thanks to the animation, the number of intervention services has been reduced.

illustrations-bubble-company-jakobsze
anim-close-bubble-solid-1
ladowarka-yellow
anim-close-bubble

the app in all its glory!

Designing applications with special requirements for appearance and color for a company located several thousand kilometers was not at all difficult. Already after the first few tests, it turned out that everything fits perfectly. With this message, we started to design the rest of the screens.
The journey starts with language choice and quick onboarding to acquaint the user with the device's capabilities. After connecting the phone to the charger, we enter a special 4-digit pin code, which must be repeated twice to remember. After these steps, the animation shows how we need to close the device.

1-Bubble-company-please-connect-your-smartphone-jakobsze
4-Bubble-company-code-jakobsze
3-Bubble-company-now-close-bubble-jakobsze
6-Bubble-company-main-screen-jakobsze-1

charging screens

After the device is properly closed, the phone starts to charge. To clearly show the phone's charge level, we designed large colorful animations. When the charge level exceeds 80%, the color of the animation changes from blue to green. Thanks to this operation, you know, even from a distance that it can no longer pick up the phone.

4-Bubble-company-charging-phone-jakobsze
8-Bubble-company-screens-jakobsze

I want my phone back!

To recover the phone, the user must enter the previously saved PIN and press the lock. To avoid any mistakes, we designed and animated the individual steps of this process. Thanks to this, the use of the device is even easier.

5-Bubble-company-get-back-your-phone-jakobsze

error screens

Locked device? Forgot PIN? Does a joker close the device with no phone inside? We've got you covered! The staff at the premises receives the administrator's PIN thanks to which they can open the device or give the phone to a forgetful person.

10-Bubble-company-error-screens-jakobsze
12-Bubble-Company-all-screens-jakobsze-2

CLIENT TESTIMONIALS

"Matt has been working for us on a Connected device UX/UI project. He did a great job, creative and efficient. The entire team has been instantly seduced by what he has done. We highly recommend Matt and will be happy to work with him on future projects !"

Julien-Casel

Julien Casel
Staart ! Digital Maker

avatar

Let’s make

Let’s make

Let’s make

Let’s make

Let’s make

something great!

something great!

something great!

something great!

something great!

Got a project in mind? Stay in touch

© 2022  x  All Rights Reserved

Facebook    x    Instagram    x    LinkedIn    x    Behance    x    Dribbble

View