Democracy Lab

Revamped the search experience for
volunteers to match to tech-for-good projects

Overview

I joined the team at Democracy Lab to help improve the cross-platform search experience and push the product to the next level. Democracy lab is a platform for both organizations to post tech projects and for volunteers to search for projects that match their interests.

My role

UX Designer

Project Duration

2 months

Timeline

Niels, Product Manager
Marlon, Engineer
Matt, UX Researcher
Hilary, UX Writer
Jane, Lead UX Designer
Mark, Executive Director

A collaborative process

I worked with a cross-functional team of 7. As the lead designer on this project, I redesigned the search experience from end to end and helped the team with UX research, and idea validation.

Our goal is to the increase number of searches per user to volunteer in tech projects

THE PROBLEM

The initial problem discovery was when the data analytics revealed the number of searches per user was low. Other research found that users experience challenges when searching for tech projects to volunteer for.

01

Lacking search features

“I want to do a search, but I donot really see the search icon”

- User Interview

02

Outdated interaction design

“I want to be able to search for projects without having to go back to the homepage”

- User Interview

03

Confusing filters to narrow search

The usability for search filters, had design deficiences that could be optimized

- Heuristic Evaluation

And when users can’t find a project to volunteer for, it can result in missed opportunities for tech projects to be filled, ultimately deoptimizing the sustainability of Democracy Lab’s mission.

THE SOLUTION

Minimizing challenges users encounter on their search journey by redesigning the search pages

Before/After

Before/After Comparison


Use the slider to see the original Democracy Lab’s Search page on the left and my redesign on the right.

This example only portrays parts of the Search Pages redesign, but overall the changes that were made were:

  • Prioritizes the Search Bar to be the most important feature
  • Update the search icon button to be more visible.
  • Changed the color for filter chips with character limitations
  • Rearrange the “Clear Filters” to appear after the chips appear

RESEARCH

Find the cause of low search rate through our data analytics and user research

Data Analytics

The data analytics showed that for users who landed on the Democracy Lab’s homepage, very few advanced to the Search page.  From there, users only spent a short time before abandoning it. This insight led to more research to undercover what were the problems.

Competitive Analysis

The goal of the analysis is to create a way to identify key aspects of the search experience and inform the UX strategy.

User Interviews

Participants who used Democracy Lab’s website were interviewed. This research gave insights into the user’s pain points. Some of the UX insights from the data and research includes:

“The search bar is not easy to find.It should be top center or left of page.”

“Auto-suggestion for searching is essential because I do not knowwhat search options I have.”

“Need to include search bar on every page”

“Need universal symbol of search, the magnifying glass”

THE DESIGN PROCESS

Validate ideas and iterate early, often and fast with limited engineering resource

The entire process was lean and fast.  We used Usertesting.com to conduct our usability testing, providing great insights to validate ideas, learn feedback, and iterate quickly.

Sitemap and Userflow

Referencing the sitemap I created userflow to identfy gaps throughout existing flow.

Sketching and Wireframing:

The first step is to generate as much ideas a possible with pencil and paper before moving to a higher fidelity wireframes.

Mobile Version

Create a consistent experience across platforms

When users perform a search, there is an advanced feature for auto-suggestion. This is important because it leads users to better search results, thus improving the user experience.

It took a couple of iterations to make the search features more prominent than the original site. The second iteration had filters placed on a separate page to improve usability.

THE FINAL DESIGN

Creating an elegant and simple search experience

Beyond a search

Adding interaction design that allows users to efficiently see multiple projects.

Reflections

Looking back, I feel accomplished with what I contributed to this product. I was able to meet all the goals of this project. While working on this project, I worked closely with other designers, developers, engineers, and product managers to help the project move forward. This experience taught me the importance of teamwork and harnessing everyone’s strengths. Good design solves users’ problems, and great product comes from teamwork.

SEE OTHER PROJECTS

Libra

Mobile app

Tutor Tree

App & Responsive Design

Gluco

Mobile app