Anaplan’s Login Experience
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.
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.
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.
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:
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
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.
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
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.
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.
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.