Enact Search

Introduction

ENACT: Educational Network for Active Civic Transformation is a national, non-partisan program based at Brandeis University, engaging undergraduates at colleges and universities in state-level legislative change.

Challenge

ENACT's website user retention dramatically dropped after registration in the last few years, prompting the owners to find ideas to increase user retention.

Opportunities & Solutions

During my research, I found that the biggest pain point was the website's old clunky feel and the most useful feature to past and present users was the search. The team gave me the green light to re-design and refactor the search experience to a modern reactive experience.

My Impact

During this project, I contributed to the following efforts - research, UI design, system design, and software development.

Research - I presented data from Google Analytics to our team, and with that, helped design surveys to be sent over email and questionnaires for user feedback meetings and collaborative brainstorming sessions.

UI Design - I designed the new search tool using insights from sketches created in the collaborative brainstorming sessions.

System Design - I had to design the service by leveraging our API and creating new REST API endpoints to connect with Elastic Search to improve the UX of the search bar.

Process

Over the course of 7 weeks, our team worked to find a solution to the user retention problem. The work began by congregating, fitting each of our personas - past and present users as well as student ambassadors. In these user feedback and collaborative brainstorming sessions we discussed the current challenges the users and team faces and the state of the user base and resourcing. That gave us more insight into the pain point of the product and basis to start working on the discovery phase.

Discovery

Recognizing recurring pain points and identifying opportunities for improvement, we began by documenting the current state. Our initial focus was on creating documents to analyze areas for enhancement, starting with both the existing sitemap and potential revised versions.

[image]

We concluded that we needed a more robust search feature and to fix the way data is annotated in the database.

Design Updates

After we did all the extra discovery work to cover the basic knowledge of the product, I moved towards working on the new search UI and API to make the magic happen.

- Introducing Search field

- Filters to help with a quick content perusal

- Pagination to avoid the infinite scrolling and long load time

- Renamed tags to encompass a larger set of articles.

[image lofi]

[image hifi]

System Design

The system is a modern web application designed for file management and search. It features a React component embedded within an EJS Express.js application. The React component interacts with a Node.js backend API to fetch and manage files stored in MongoDB. For the auto-suggest functionality, Elasticsearch is integrated due to its robust full-text search capabilities. This hybrid architecture combines the flexibility of server-side rendering with the interactivity of React, ensuring a responsive, scalable, and efficient user experience.

[image]

[datamodel]

Final Product

The newly implemented search functionality was well-received by users. Its reactive nature and modern interface provided a seamless and intuitive experience, instilling confidence in users that the tool would efficiently deliver the desired results. The auto-suggest feature, powered by Elasticsearch, offered fast and relevant suggestions, significantly reducing the time spent on searches. Additionally, the improved responsiveness and interactivity addressed previous concerns of clunkiness, transforming the application into a reliable and user-friendly platform for file management and search. Users highlighted the enhanced usability as a major improvement, reaffirming the system's value in meeting their needs.