Login Page Redesign
As the implementation of updates to the design for the companywide website began, so came the need to revamp the login screen area for both internal and external users.
Project Deliverables
Wireframes
Research
Spec with Redlining
Tools Used
Figma
Sketch
Illustrator
Timeline
2 weeks
-min.png)
The Problem
Updates to the companywide site meant that other areas of the UI would be affected, such as the login page. The login page would need to be updated to fit the company's new looks and meet industry standards.
The Solution
Work on updates to the login screen based on changes throughout the company website and carry those changes over to subsequent screens.
Working Cross-Functionally
Working With The Marketing Team
As the redesign for this project crossed into marketing's territory, I began the design phase by meeting with their team to hear their thoughts.
I took their ideas and made minimal updates to ensure they were ADA-compliant and up to industry standards, but I also included some more creative examples of ways we could design this.
Current Login Screen:
Examples From Marketing Team
Below are the internal and external login page examples shared by the marketing team. In the first example, I included annotations on necessary changes to make these ADA-compliant. The second example shows minimal rearrangements to the layout based on UX best practices.
ADA Compliance - Minimum Changes
UX Best Practices - Minimum Changes Plus a Little More
Research
Research Into Better Layouts:
In the process of this redesign, I wanted to ensure that I wasn't being insensitive to the marketing team's ideas; however, I knew that I wanted to shift from their initial layouts.
​
In providing notes on the designs they shared, I also took the opportunity to share how other companies handle this and some updated design options based on my findings.
Starting the Design
Examples Shared With Marketing
Based on some of the findings above, I sent a few layout examples to the marketing team along with the minimal changes necessary to their designs.
Main Takeaways From Sharing Of Ideas:
Based on the designs shared throughout the teams, the main takeaways that both design and marketing agreed to move forward with included:
-
Aligning the login information in the center of the screen
-
Using a container to house the login information
-
Removing the Mede logo from the corner and placing it inside the container
-
Using a background with a gradient
-
Making the action button rounded
The Final Designs
Takeaways
My main takeaway from this project was learning to take advantage of and work with the ideas of other departments. It was the first time I had the opportunity to work with our marketing team on a ticket, which gave me a new outlook on designing for the company outside the Platform. I learned how important it is to value a different team's ideas and how to work together to create an end product that reflects the company's voice and follows UX best practices. The duties of departments can cross over more than we might think, so it's essential to a thriving work environment to develop relationships with people outside of your direct team and respect the input they have to share.