Zabka

MY ROLE
UI & Motion Design, Art Direction

AGENCY
mobee dick

Concept

Żabka is one of the biggest Polish small grocery store chains, which you visit when you run out of necessities, e.g. beer or ketchup. You can find Żabka on almost every corner of every street. The realm of this chain is the fact that they are near you.

The history of this project is quite interesting – the Client had a completed app which he could publish in the App Store, however he felt there was something wrong with it. He decided to contact mobee dick to verify this discontent. After analysing the application by strategist, making the decision to redesign the app and creating new wire-frames by information architect, the project landed on my desk.

[unex_ce_button id="content_kt4peoc9a" button_text_color="#ffffff" button_font="custom_one" button_font_size="20px" button_width="auto" button_alignment="left" button_text_spacing="px" button_bg_color="#3f960a" button_padding="10px 20px 10px 20px" button_border_width="0px" button_border_color="" button_border_radius="4px" button_text_hover_color="#ffffff" button_text_spacing_hover="0px" button_bg_hover_color="#348e09" button_border_hover_color="" button_link="http://zabka.pl/pl/codzienne-korzysci#/aplikacja" button_link_type="url" button_link_target="_blank" has_container="1" in_column=""]Visit zabka.pl[/ce_button]
zabka_herozabka_hero

"Not flat UI"

Totally flat interfaces have been fashionable for a few years, this is something I disagree with as I find its an inaccurate way of designing – flat often causes the app to be difficult to use, I don't know where to tap, it lacks individualism and everything starts to look the same. That is why, from the very beginning I decided that Żabka had to be different. I have used the shadows, gradients and the delicate skeumorphic elements, trying my best to keep to the precise corporate guidelines of the Client.

zabka_lista-zakupowzabka_lista-zakupow
zabka_brelokzabka_brelok

Interactive design

The mock-ups which I worked on included the dashboard as a place where the user can view all the necessary information and move to specific sections of the app quickly and conveniently. Unfortunately, although the mock-ups embodied essential elements, they didn't distinguish the screen against the the other ones, meanwhile Żabka introduced the pendants for collecting points, I decided that it would be a fun addition to the project which would set it apart from all the other ordinary and boring promotional apps.

 

The whole iOS application consists of over 100 individual screens, connected by a dashboard with and interactive pendant, which allows us to move between sections of the app. I'm glad that Żabka featured actual pendants for their clients, because that's what gave me the idea to add a swinging pendant which moved from side to side – I'm a fan of these types of details.

ios_design_02ios_design_02

 

The Android version (not in Material Design yet), due to the used dashboard navigation, is quite similar to the version for the iPhone. But it has a few characteristic features of Android, e.g. tap and hold on the list of products and purchases, a sidebar available from any location, etc.

android_design_02android_design_02

 

Because Żabka didn't want the app to be the only way to manage collected loyalty points, a responsive web version for the whole project was created.

www_021www_021

 

Additionally, for the purpose of the Żabka YouTube channel, I created a short animation presenting all the most important functions of the application. The movie was animated by me in 3 weeks, using only Adobe After Effects.

 

The last element of the project, apart from the materials for the app stores was the version for the Windows Phone – the third and least liked system. To my surprise designing it was quite pleasant, most probably because there aren't often Clients who treat the Windows Phone seriously, which is why I usually work with iOS and Android.

windows_design_02windows_design_02
signature_zabkasignature_zabka