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.
Digital Wireframes
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.
Desktop Mockups
Mobile 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.