Anaplan’s Login Experience

 
 
 

OBJECTIVE

The current login screen is the gateway to the product. The goal of this screen is for a user to log into the system and be exposed to Anaplan updates from both Product and Marketing sectors. 

 

Overview

After looking at analytics, we identified that this current screen was not optimizing the browser real estate. Adjustments to the layout were necessary in order for this page to be effective and useful. 

 

ROLE

I was the designer for this project and worked closely with the graphic designers of the Marketing department, the Head of UX, and a Senior UI Engineer.

 

The Problem

After analyzing user behavior and lack of engagement on Google Analytics, the team discovered that most of the tiles in the bottom portion of the screen (Training, Survey, Blog, Video) weren't being utilized due to various reasons:

Original look and feel

  • Users may not know that these tiles were clickable

    • Why would users want to click on these links if there aren't many visual cues?

    • Lack of visual heirarchy

  • Users weren't given any kind of incentive for them to explore this page

    • Not aesthetically pleasing

      • Lack of images

      • Text size too small

    • Main banner image is confined to a small width

    • Too much white space that the elements of the page were "lost"

    • Login inputs were taking too much space, and weren't noticeable compared to the other elements on the page

 

Design Stories

  • As a user, I can log into my Anaplan account.

  • As a user, I can access marketing campaigns and landing pages, as well as other parts of the corporate website.

With the scope identified, I did a brief research session that allowed me to gain inspiration of what other login screens look like in other products and benchmark the current login screen.

 

Competitive/Comparative Analysis

Inspired from looking at other products, these were the guidelines we wanted to focus on:

  • Fun, bright colors that fit the Anaplan brand

  • Movement (elements animated when clicking on certain areas)

  • Use of visuals/photography

  • Typography hierarchy

 
Microsoft 360 login

Microsoft 360 login

Facebook login

Facebook login

 
 
LinkedIn login

LinkedIn login

Typeform login

Typeform login

 
 

Wireframes

We were aware that layout and placement of the login inputs were a major concern from the very beginning. We made the decision to keep the login elements stacked, which is commonly used in most products.

We also want this screen to be fun and engaging with the use of animation. We made use of panels that allow users to hover to be exposed to more content.

Lo-fi login screen with collapsed right panel

Lo-fi login screen with collapsed right panel

Lo-fi login screen with expanded right panel

Lo-fi login screen with expanded right panel

The default login view is the login section on left-hand side of the screen that takes up 75% real estate, and the marketing content panel taking 25%. When a user hovers over the right side of the page, the right panel expands, taking 75% of the browser real estate. This adds delight when a user discovers the expanded view of all the marketing updates once fully expanded.

 

Hi-fi MockUps

With the scope identified and wireframes completed, I implemented the visual treatment with the Anaplan style guide. Collaborating with Marketing's graphic designers, I incorporated marketing graphics that were used in Anaplan's corporate site — event pictures from our photo library, and typography styles used in all marketing assets.

 

PROTOTYPE

With hi-fi mockups approved, I created an interactive prototype of the sliding panel animation with HTML, CSS and JavaScript.