Impact Hub

Project Overview

Live Site: https://impact-react-static-dev.onrender.com/

ImpactCareers is a job board site specializing in disaster relief, emergency response, and humanitarian career opportunities. I combined my skills in design and React front-end development to create an easy to use experience for filtering and viewing jobs. Data for this project is supplied by the ReliefWeb API, which is a humanitarian information service provided by the United Nations Office for the Coordination of Humanitarian Affairs (OCHA).

Problem

This project started off as an initial exploration of datasets and API’s that are related to humanitarian aid and disaster relief. After some time researching, I found ‘Relief Web’, a service provided by the United Nations that updates a list of ongoing opportunities in the humanitarian and disaster relief space. Relief Web’s current solution focused on many parts of humanitarian relief, from news, blogs, and providing services. It lacked a certain focus on getting opportunities in front of people, and I wanted to rethink the user-experience for finding available opportunities.

Design Challenge 1: Filtering Opportunities

The first design challenge was to understand how people might want to view countries, as well as how to think about humanitarian efforts as a whole. Often times, needs in humanitarian relief occur in an accute way, such as natural disasters, wars, or a political upheavals. The first iteration was to display the opportunities by the most recent posted date, filtered by Countries with the most amount of opportunities. Inital results show that the opportunities API is quite responsive to recent global events.

Opportunities Filter

Design Challenge 2: Summarizing Opportunities with AI

As articial intelligence has become ubiquitous in software solutions in 2024, I wanted to explore possibilities for using AI in summarizing job descriptions, and developing prompts to provide the most necessary information.

Prompt Engineering with a Custom API

In order to do some clever prompt engineering, I created a Flask API that hosts some endpoints for hitting the OpenAI API. I created a /summarize funtion that wraps the opportunity body with a custom prompt that asks the model to summarize certain aspects of the body, such as a shorter overall description, years experience, and to provide the salarty if it’s available in the description.

UI Design

This project is primarily built with React, uses TailwindCSS for styling, and Render.com for deployment. The overall UI feel is modern, with an urgent, first-responder kind of color scheme leveraging bold red colors and modern sans-serif fonts. Country emojis are used to add a modern touch, as well as a fun visual cue for identify countrie’s and regions.

Mobile Responsiveness Challenge

Mobile responsiveness is a must these days. According to Exploding Topics, over 60% of website traffic comes from smartphones. Generally speaking, I expect people to want to view opportunities while they are on the go, while they are on the public transit, and generally away from the computer. Mobile responsiveness is a must these days, and displaying features and layouts in the right visual order is important.

Desktop Layout

This desktop layout employees a fairly standard F-Shaped layout for enhanced readability of the title and opportunity descriptions. To keep attention to the AI summary in the right sidebar, the left body of the screen is the only scrollable element, while the right sidebar is fixed in place while the summary loads.

Desktop Layout

Mobile Layout

The mobile layout changes a bit. First, with TailwindCSS, it is tricky to get the layout to collapse in the way I was going for. I wanted the AI summary feature to be one of the first things a user can see, and remain visible for the duration of the experience on this description page.

Design Goals for Mobile Layout

1. Show the AI summarizer early on and persist through the page
2. Allow the user to still scroll the job description while keeping the AI summarize tool in quick view

The core challenge with this layout is that when using flex layouts for the body and right sidebar, especially when the viewport collapses to a mobile view, the AI summary section collapsed to the very bottom of the content. That wouldn’t do. To solve this, I created a conditional media query where if the screen is a mobile size, place an exandable accordion at the bottom of the screen just above the Apply button. This way, a user can see the unique feature of an AI summarizer, while also still being able to scroll and view the job description.

Conclusion

This project is currently live with a development build at https://impact-react-static-dev.onrender.com/. I am in the process of showing it to a small subset of users and collecting usage feedback via Google Analytics, as well as personal user feedback from friends and family.

Future features

• Custom organization ‘Hubs’
• Paid / sponsored opportunities
• Improved filtering options