Why CRED has an In-cred-ible design

View the original post

CRED App Design

CRED is a members-only app that rewards the user with exclusive rewards for paying credit card bills.

The app’s design is clean, minimalistic, and intuitive. It employs neumorphism; a trend that’s taken over the interface design.

Neumorphism is a new take on skeuomorphic design. Even though it relates to skeuomorphism, there is a new focus in the entire design style with neumorphism. This focus is not necessarily on the contrast or similarity between the real and digital worlds, but rather the color palette.

So what we have here are screens that mimic the real-life objects balanced in such a way that it looks like they’re connected to the background, as if the elements are extruded from the background or inset into the background.

Splash Screen

CRED Splash Screen

They could have easily gone with a simple screen having a logo like every other app. But they used smooth transition animations so the user pays attention and feels special. It’s attention to these details, these micro-interactions that stick to the user. These animations grabbing user’s attention can be seen not only in the splash screen but at various points inside the app, such as when clicking on the money button.

Home Screen

CRED Home Screen

All the information that needs to be communicated to the user has been organized in these neat chunks. There is no way for the user to get confused. Now coming on to the neumorphic layout that’s been used, the cards seem to be inset into the background while the buttons at the top right are extruding from the background. This feels soft on the eyes which is exactly what the user would want.

Bubble Wrap Design

As it can be seen, the buttons at the top right are extruding when unselected and seem to be pressed when selected. This neumorphic technique gives the feeling of popping or pressing a bubble wrap.
Psychologist Robert E. Thayer explains that when people are stressed or tensed, they tend to take a moment to understand their plan of action. And during this course of action, they usually unknowingly finger tap, fidget with their legs, or pop bubble wrap. This is also why people feel calmer after a session of bubble wrap popping.
Bubble wrap popping also helps to deviate your mind from extra thoughts but at the same concentrating on the one you are currently doing. For example, if you are reading an article or research and popping at the same time, the chances of you being deeply engrossed in this work are more.
Therefore, this design while making the user focus on the plan of action makes the process satisfying.

CRED Bottom Navigation Bar

The charcoal black in the background fits perfectly with the orange tint of the icons. The icons are well designed, not too complicated and the selection compliments the design. It seems almost as if the icon selected is being lit. While designing a navigation bar the icon design, placement, colors, and selection need to be in coherence and this design takes care of all these factors.

Rewards Screen

CRED Rewards Screen

The tabs design at the top is as minimal and well thought as it could be. It uses the same formula of the bottom navigation bar for its selection. This way the tabs mimic something that we’re all familiar with; switching on/off the lights. The selected tab lights up while the unselected tab is dimmed. This familiarity is crucial for the user to feel connected to the app.

The rewards screen has again systematically chunked information. The rewards that the user can win has been organized in cards inset into the background, just like the rewards score, while the trophy room button is extruding from the background. The top navigation is in perfect consistency with the bottom navigation bar. As mentioned in previous stories

In cognitive psychology, chunking is a process by which individual pieces of an information set are broken down and then grouped in a meaningful whole. The chunks by which the information is grouped is meant to improve short-term retention of the material, thus bypassing the limited capacity of working memory.

This design, therefore, makes the user’s brain retain information most effectively since the navigation tab and bar chunks have been translated into a single meaningful chunk and the rewards structure as another logical chunk.

Swipe Gesture

CRED Swipe technique

CRED has swipe gestures at various points in the app, such as the notification cards on the home screen and the insight cards below the CRIF report.

As the Material design guidelines explain, the swipe mobile gesture involves a sweeping movement either vertically or horizontally across the screen. It is built for intuitive decisions and can be performed with either a fast and short or slow and long action.

Note how the Remind me later and Dismiss buttons are presented after swiping the card and not while scrolling the feed. In the screens shown above, the swipe gesture is very effective since a user here needs a “bird’s eye view” of the card, so a swipe makes it easier ergonomically. Similarly, the user can just page through the cards below the CRIF report at the ease of the swipe, making it a great design.

Minimalist Design

CRED’s Minimal Design

Each element on the screen serves a purpose with nothing “extra” to make any part of it redundant. Antoine de Saint-Exupéry said, “Perfection is achieved when there is nothing left to take away.” Minimalist design plays on that philosophy.

Everything on the screen is simple and schematic, easy to understand and retain. The remote control screen has options structured into three compartments; Close, personal information, other. The screen does not have a horizontal list like other applications, rather has everything neatly placed and spread in proportionate measures so the user can directly focus on individual parts with nothing to divert the attention.

The effect of a minimalist design is to ensure a clean interface that is functional and easily understood by any user; something which CRED does perfectly.

Hope you found this useful.

Muskan Raina | Dribbble

Muskan Raina on Behance

For business enquiries write at:

Why CRED has an In-cred-ible design was originally published in Muzli – Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.