Case Studies
UI/UX Design App Design
the challenge
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.
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.
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.
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.
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.
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.
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.
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.
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
Staart ! Digital Maker
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