UX/UI design · Community resources · 2024

PDX
Unhoused

A community resource website connecting unhoused and low-income Portlanders with services, locations, and ways to get support.

Explore the website

Portland, OregonResources
within reach.

A clear path to services, community support, and nearby resources.

Project: PDX Unhoused · Five-person team
My role: UX/UI layout & design
Focus: Site framework, page prototypes & navigation
Timeline: Jan 2024 — Apr 2024

01 / Overview

PDX Unhoused brings essential services and volunteer opportunities together in one place. Our team manually researched more than 100 resources to help people explore available support throughout Portland.

Challenge

Make information approachable

People looking for food, shelter, clothing, or other services need to understand both what is available and where to find it. The interface needed to organize varied information into clear categories, with straightforward paths from browsing to resource details.

My contribution

The layout across the whole site

My main focus was the website’s UX/UI layout. I drew the UML diagram for the site’s framework and sketched prototype screens for its pages, connecting the navigation, resource information, map views, and shared page elements.

100+Portland resources manually researched

8service categories represented in the resource database

80%+reported code coverage maintained across the sprints

02 / Early planning / Framework

I started by drawing how the website’s pages and resources connect. The UML diagram gave the interface a shared structure before those relationships became screens.

My UML connects the main website with Services, Volunteer, Guide, Map, and Location components. At its center is the resource itself: its name, category, description, contact information, location, and service.

Malissa’s original hand-drawn UML diagram linking the resource website, services, volunteer, guide, map, location, and resource classes — **Original sketch**My hand-drawn UML established the website’s pages, operations, and core resource model.

Refined UML diagram for PDX Unhoused showing the website framework and relationships among resource, services, volunteer, guide, map, and location components — **Refined diagram**A cleaned-up version preserves the same structure while making the relationships easier to review.

03 / Paper prototypes

I sketched the page layouts to work through the experience before implementation: the home page, expanded service navigation, map and resource details, and a footer shared across the site.

Malissa’s original hand-drawn page prototypes showing the home page, Services menu, resource map, selected resource details, and shared footer — **Original sketches**My hand-drawn screens explore navigation, information hierarchy, map details, and shared elements.

Refined PDX Unhoused page prototypes showing the home page, expanded Services menu, map and location page, selected resource details, and shared footer — **Refined wireframes**The refined set clarifies labels, spacing, states, and content while preserving the original page concepts.

01 / Navigation

A repeated header and service categories give people a consistent way to move through the site. Search and location stay visible in the sketches.

02 / Resource details

The map concept pairs location pins with an organization’s description, phone number, address, and service details in a neighboring panel.

03 / Shared elements

The shared footer concept brings together information about the website, accessibility, language assistance, and emergency help.

An early implementation

The early website translates the framework into a blue header, search, a horizontal navigation bar, and distinct content areas. Home, Services, Volunteer, Map, and Guide make the site’s main destinations visible together.

Original screenshot of the early PDX Homeless Resources website, with blue navigation, an About Us section, and Additional Information sidebar — My original screenshot of the website during its early stages. Click to enlarge.

04 / The application

Step inside
PDX Unhoused.

Explore the archived website in the window below. Browse its pages, services, and volunteer resources, or expand the preview for a closer look.
*Note: the Google API map does not display the labels correctly. See below for example picture of what it looked like when it was working.*

View the project on GitHub

PDX Resources / Home

Browse the pages, search resources, or expand the window to explore.2024 project archive. Resource details may have changed; the map uses an updated preview.

Original PDX Unhoused active map showing color-coded resource pins across Portland — **Active resource map**The original application plotted database-backed services across Portland with colors identifying each resource category.

Browse & discover

· 100+ resources researched by our team
· Searchable services and location details

Map design choice

· Pins pull resource data from the database
· The labeled legend identifies the different type of resources near your location on the map
· Hovering or clicking a pin reveals resource information
· Selected pins zoom in for a closer view

Connect & contribute

Volunteer information, a resource request form, and an English–Spanish feature broadened how people could engage with the website.

05 / Team testing

The review focused onClear information.
Consistent navigation.
Accessible layouts.

The team tested the website on desktop and mobile and maintained more than 80% reported code coverage throughout the sprints. Nursing students also reviewed the experience, focusing on visuals, information placement, accessibility, and general usability. That feedback tested the foundation of my design contribution: page structure, navigation, and the layout of resource information.

Jest test results showing 10 passing test suites, 17 passing tests, and more than 80 percent code coverage — **Automated test results**The project maintained more than 80% reported code coverage, with this run showing 10 passing suites and 17 passing tests.

01 / Visual review

Page clarity

Feedback considered how the website looked and how its information was positioned.

02 / Accessibility

Ease of use

The review included accessibility and general issues encountered while using the website.

03 / Devices

Desktop and mobile

The team checked the experience across desktop and mobile layouts.

06 / Reflection

My work on PDX Unhoused connected the site’s framework to its page layouts. The UML diagram established the relationships; the prototypes made those relationships visible through navigation, resource panels, and shared page elements.

Our team worked efficiently and consistently met our weekly sprint goals. Trello helped us maintain momentum by making responsibilities and progress visible, while assigning each member work suited to their skill level allowed everyone to contribute where they were strongest. This process strengthened our collaboration and gave us practical experience with Agile development, SQL, JavaScript, HTML, CSS, and mapping APIs.

Our retrospective also identified improvements for a future version: avoid the iframe structure, choose free map and database services, and continue breaking larger goals into focused weekly tasks.

UX/UI designUML diagrammingPaper prototypingInformation architectureAgile collaborationTrello

PDX Unhoused · UX/UI design, 2024

Next projectHoji Tea Studio