Migros Account Login

Migros Account pattern
for user login

Resources

Figma Pattern

MDX Migros Account Login

Git Repository

MDX Migros Account Login

Intro & Anatomy

The Migros Account Login is the coherent entrance to Migros Account. Familiarity to users is its most important characteristic to facilitate users to log in. Even on platforms that are not associated with the Migros brand at all, Migros Account users should always be aware that they do not need to create a new account. This is why every brand should use the exact same design, behaviour and wording.

The Migros Account Login consists of 3 components:

Example

Behaviour

The Migros Account Login consists of 2 states:

Logged out
Button or avatar is shown as call to action to log in.

Logged in
User avatar is shown and opens the log in flyout that links to user content, settings and Migros Account.

Logged out

Do place the avatar/button on the right side of the header

Do not place the avatar on the left side of the header

Avatar/button can be placed next to far right of the header.

Do not hide the avatar in the header menu

Log in button can be used instead of the avatar for higher affordance

Do not show the log in button for sign out

Do use login button in content

Do not use avatar in content

Do use the design as provided
Login button can be full width for higher accessibility on mobile

Do not brand the login button/avatar

Do use bold variant for higher saliency
For key primary actions, button label can be changed accordingly

Do not show multiple login buttons or change the label for specific functions.

Logged in

Do show user initials in avatar when logged in

Do not show only one user initial

On mobile, do position the flyout on the bottom for better accessibility
In addition, use darkened backdrop

On mobile, do not position the flyout beneath the avatar
Do not use transparent backdrop

On desktop, do position the flyout beneath the avatar
In addition, use transparent backdrop

On desktop, do not position the flyout in the center of the screen
Do not darken the backdrop.

Use custom links to facilitate access to relevant user content or settings
Use Migros Account Links for user content pages in Migros Account (e.g. addresses)

Do not link to “non-user” content

Do show predefined notifications if key to the customer experience
Indicate notifications with a notification dot on the avatar

Do not forget to indicate notification with a dot on the avatar

Do insure up to date design provided by MDX

Do not brand the flyout to your platform’s design

Login Button

Sizes

xSmall

Small

Medium

Types

Neutral

Bold

Darkmode

Neutral dark

Bold dark

Hover

Neutral hover

Bold hover

Wording

Deutsch

Français

Italiano

English