Login Page Redesign

 

Context

Months ago, our marketing team started to generate a lot of insightful and useful contents in Kahuna’s blog, like product news and updates, case studies, marketplace domain knowledge and technology behind the scenes. As a product designer, we always want to provide a better experience for not only the users but also customers, who involve in the whole customer journey.

I initiated this redesign project as my side project. My goal in this project to rethink about the interface of login and the work flow of reset password.

Old Login Page

Our current login page design is pretty simple but also outdated. It doesn’t align with our new design theme. Also, the rule of password is really complex and our reset password workflow is not intuitive.

Old Login Screen

 

Design

Wireframes

Since we have these high quality articles and contents in our blog post, what if we include some of them in our Login page. The benefits of it are:

1) Opportunity to let the users learn how to use the platform to solve their problem. Decrease the work-load for our customer support.

2) Increase the possibilities for users to purchase advanced features in the platform.

I proposed three different layouts to get feedback from the team. We decided to go with the third version. The main reason is it is easy to scale in a vertical layout, because we can have use a carousel navigation to add more content. Also, it’s easier to include images to attract users.

Versions of Login page

 

Visual Design

I then started to explore different visual design to match our design system. And done a quick A/B testing with our team. We decided to go with the third option. The main reason is it helps the content more popup compared with the other two options.

Final Result

The final solution is to have a section that showing key feature contents, which might include new feature release, how to use the platform, etc. On the left hand side is the login section.

I also refined the reset password user flow to make the experience more intuit.

Kah-Login-highlights.png