Overview
This project aimed to provide a seamless and efficient login experience that aligns with PowerHub's commitment to usability and security.
The Challenge
The main challenges for the PowerHub login page project included ensuring robust security measures to protect user data while maintaining a simple and intuitive design, addressing accessibility requirements to cater to a diverse user base.
Process
Research and discovery
Wireframing and prototyping
Customizing React components
Provide multiple iterations
Detailed design specs
Wireframing and prototyping
Customizing React components
Provide multiple iterations
Detailed design specs
Developer handoff
Regular collaboration with developers
Regular collaboration with developers
The Solution
I designed a split-screen layout that includes a promotional section on the left showcasing a tagline and relevant image, while the right side features the login form with fields for email and password, a "Forgot Password?" link, and a prominent green button.
My Role
As a UX/UI Designer, I collaborated closely with the project lead and developers.
Adobe XD
Adobe Photoshop
Miro
Figma
Adobe Photoshop
Miro
Figma
Redesign
The project focused on redesigning the old login cards by enhancing the visual hierarchy and introducing stronger colour contrasts for improved readability.
Ideation & User Stories
By analyzing user priorities before designing the login page, I ensure that critical needs are addressed upfront, creating a smooth and efficient experience, particularly in high-pressure scenarios.
Powerhub Personas
Creating user personas helps me understand the specific needs of different users, ensuring a smoother and more satisfying experience for everyone.
Wireframes
I created wireframes for login pages to serve as essential visual blueprints, organizing the layout and structure before moving into detailed design. These wireframes allowed me to focus on usability and functionality, ensuring all necessary elements were included and intuitively positioned for the user.
High Fidelity Screens
In my new design, I went for a cleaner, minimalist look. I improved the spacing and alignment of the form elements, making navigation and readability much easier. I also improved the visual hierarchy to make crucial elements, like the buttons, more noticeable. Additionally, I incorporated an image that reflects PowerHub's corporate style, further aligning the design with the brand's identity.
Successful Login
A successful login begins with the user navigating to the PowerHub login page, where they enter a valid email and password. After clicking "Log in," the system verifies the credentials, and upon successful authentication, the user is redirected to the dashboard.
Incorrect Password:
When the user navigates to the PowerHub login page and enters an email with an incorrect password, they click "Log In," and the system displays an error message indicating the incorrect password. The user is then prompted to reenter the correct password or use the "Forgot Password" link to recover their account.
Forgot Password:
If the user forgets their password, they can click the "Forgot Password" link on the PowerHub login page. This redirects them to the password reset page, where they enter their registered email. The system then sends a password reset link to their inbox, allowing them to recover access.
Rest Password
To reset their password, the user enters their email, provides a new password, and confirms it. After clicking "Reset Password," the system updates the password and redirects the user back to the login page. The user can then log in using the newly updated password.
User Session Expired
When a user's session expires, they receive a "Session Expired" notification and are prompted to log in again. After being redirected to the login page, the user enters their email and password, clicks "Login," and the system verifies their credentials. The user is then taken back to their last active session or the dashboard.
