Democracy Lab is a non-profit civic infrastructure who provides a platform to connect skilled volunteers with tech-for-good (technology for social good) projects. This case study walks you through my 14-day design process to improve the existing design to yield higher conversion rate. The work was delivered at our product team meeting two weeks after the brief was dispatched to be incorporated into the later iteration.
Shipped
As an onboarding UX design volunteer, my first assignment was to improve the UI to boost membership — a network of volunteers, project owners, community partners, and sponsors. The goal is to create an engaging, intuitive interface that effectively communicates the value of tech-for-good volunteerism and simplifies the process of finding and joining projects.
With the already well-established platform, Reinventing the UI from scratch or taking away any existing content is impractical from a business standpoint, especially within the time frame I was given.
Therefore, I planned to approach any pain points to be found at the structural level and prioritize moving elements around to use the space more strategically.
The redesign aimed at significant improvements in engagement by enhancing aesthetics, visual structure, and telling a compelling brand story without removing any existing content. Key features include streamlined navigation with consistent hero sections, a visually appealing interface, and a restructured homepage that effectively communicates the organization's mission and impact.
I started out with a brand assessment to identify DemocracyLab.org's website focus, workflow, content, and features. This helps me find similar competitors as a starting point of comparison and ensure I understand where the client is heading in the long run.
Several LinkedIn posts, news report, and rounds of site scans later, I was able to identify the core types of content that Democracy Lab offers, with projects being at the heart of the organization:
With this sorted list at hand, my next goal is to uncover the pain points associated with displaying/highlighting the values of such primary content. Now, let's talk users.
I trusted my visual gut and performed a cognitive walkthrough session based on Nielsen Norman Group's 10 Usability Heuristics for User Interface Design. This process involves going page by page and nitpicking all the frictions that are deemed common design violation.
During this step, I also mapped out the current information architecture to gain a bird-eye view of the traffic across this platform, which informs me of high-level problems like navigation and cross-page traffic.
Finally, two usability tests were conducted. During each session, I let each interviewee define their touch point with the site organically, explore the platform via a set scenario-based queries, and casually chat with them while they are performing these tasks.
A key element of the redesign was improving the list-view structure for the Projects, Groups, and Events pages. This involved better spacing between items and improved categorization to enhance user experience.
To improve navigation and provide better context, we implemented consistent hero sections across various pages of the platform.
The Blog page underwent a significant transformation, with a user-friendly structure featuring clearer categorization of content and improved navigation.
From there, I have completed the redesign of four item-based pages: (Find) Projects, Groups, and Events, and Blogs.
I renamed "Companies" into “Partner With Us” on the nav bar as it is more relevant to the page content. With the hero section replaced from Improvement #2, I replaced the vague “Get Started” CTAs into function-specific names “Begin Hosting” and “Begin Sponsoring" to better inform users of the current course of actions.
The Homepage was restructured to tell a more compelling story about tech volunteerism, guiding users through a narrative that highlights the platform's mission and encourages actions as a whole. I added a section to connect to the Blog page that was not there in the old design.
The same is applied to the About page. One major change is the volunteer section became paginated instead of infinite scrolling to reduce viewership drop out.
Due to the project scope and original product requirement, my hand-off delivery was a mid-fidelity prototype as a proof-of-concept to the Design Lead. Additionally, my redesign objective focuses on information structuring and organizing, hence I did not prototype every element of the whole website such as single-project/group/event/blog view. This is partially due to users report no problems with these pages.
Take a look at my Figma workspace by clicking on the prototype image above.
In pursuing this redesign project, I have spent a large chunk of time focusing on defining its scope to hand my client a realistic, market-ready prototype. On the surface, a redesign project feels like an opportunity to break free and start from scratch, yet, on a deeper level, it is about fine-tuning a skeleton (first and foremost) to have something that stays for as long as it can in the future. And I believe working through this project with this structural framework has helped me think more clearly and design more productively.
Through this case study, I learned the value of taking action and the importance of setting clear goals. While I initially struggled with overthinking and a lack of focus, completing this project has helped me develop a more streamlined approach to design. I'm excited to continue learning and improving my skills as I take on future challenges.
