DemocracyLab

Redesigning the login experience

Overview

PRODUCT:

DemocracyLab is a platform that connects skilled volunteers with tech-for-good projects.

PROBLEM:

DemocracyLab's design system underwent major updates so the current login page is outdated. 

GOAL:

Redesign DemocracyLab's login page to align with it's updated design system and best design practices.

ROLE & RESPONSIBILITIES:

UX designer responsible for UX writing, interaction design, prototyping, and design iteration.

DURATION:

2 months

Understanding the Problem

A story for redesigning the login page was created in Trello. This story was originally assigned to another product designer but reassigned to me after their unexpected departure from the design team. Fortunately, I was still able to have a transfer of information (TOI) session with the designer to get up to speed on the story.

During the TOI session, it was revealed that:

• DemocracyLab login page did not follow basic design principles such as the gestalt principles of design

• Several UI components were outdated

• Users expressed an overall dissatisfaction with the look and feel of the login page 

Below are screenshots of the old login page. In these screenshots, one can see just how disjointed the current layout is and how that would be visually unappealing to users. 

Developing a Solution

To develop a solution, I performed market research on how other web applications implemented their login pages. 

Key takeaways to incorporate in the redesigns :

• Consistent UI component widths and spacing

• Concise and simple language

• Clear call to actions

Then I created digital wireframes in Figma based off the takeaways from my research.

Final Designs

After wireframing a low-fidelity solution, I moved on to creating high-fidelity mockups for both desktop and mobile. When designing these mockups I made sure to closely follow the design guidelines and patterns established in the DemocracyLab design system.

These mockups underwent two design reviews. During these reviews, I walked the team through my design decisions and the team gave feedback on any discrepancies. Consequently, a few design iterations were necessary before finalizing the mockups.

Conclusion

The design process at DemocracyLab is continuous and iterative so the platform will always undergo periodic updates and changes. Therefore, I will continue to collaborate cross-functionally and gain insights on how to improve designs across the DemocracyLab website. Already, the new login designs have garnered much positive feedback.