Challenge
Combine and present all of human.nyc's research and videos about homelessness in NYC in order to teach, engage, and push for policy change
Solution
A vertically-scrolling timeline website which compares the expectations and realities of the street-to-home journey in NYC, including interviews from those going through it themselves

Team
Maya Mashkovich, Francesco Fraioli
Length of project
9 months, currently in version 1

Next Steps
- Build a human.nyc home base for fundraising and campaign tracking
- Continue user testing and improving map experience
- Create a CMS
____________________________
THE PROCESS
human.nyc has been researching homelessness in New York City for years, putting the experiences of those going through it first and foremost. Josh, the founder, needed a website aimed at journalists that exposes the expectations and realities of this confusing homeless-to-housing journey. 
_____________
Design goals
I. Disperse information in an approachable and comprehensible way
II. Expose a need for change
III. Create a tool that provides strong, trustworthy, relevant background information on the issue
IIII. Open the door to connecting journalists, lawmakers, and the homeless
Personas  ↓ 
We decided on and fleshed out 4 personas who we'd like to be using the website. This gave us a strong starting point as we began doing research and designing the website experience.
User Research Insights  ↓ 
Our next step was to interview some of those potential users. If we had more time, we would have liked to create a more thorough research plan which touched on each persona. In the meantime, Francesco, Josh and I sat down with 2 journalists for an interview and a prompted observation session to understand how journalists engage with sources while they're crafting a story.
User Experience Chart  ↓ 
Taking what we learned about how journalists and lawmakers may interact with informational websites, we created a 3-E map to understand the before, during, and after of dealing with the homelessness situation in NYC. This helped us decide where we wanted to intervene as a source. 
Ideally, our website would act as an introductory resource for somebody who is looking into the street-to-home journey. 
Website Architecture  ↓
 

Initially, the website was going to have an introductory homepage, a full map page, and a detailed point-in-journey page which dives into the expectations and realities of the street-to-home journey in NYC.
Over time, we decided that a homepage is not necessary as journalists don't have much time to spend before diving into the information. We replaced the idea of a homepage with a blurb on the map page so as to provide that information in a minimal way.
Wireframes
Intro (left), Map Page (right)  ↓ 

We initially wanted there to be an introduction to the project and the map, but decided against it: our users, busy lawmakers and journalists, were not going to have time to scroll through an introduction every time they went on the website. We were thinking of having it only appear the first time they visit human.nyc, but decided even that might be a hassle. As we continued designing, we shortened the introduction experience to live in the navigation. 
The map idea was pretty basic in that it was a horizontal timeline of a journey. The difficult part would be to find a way to make it seem involved, convoluted, and frustrating, while keeping the overall experience clean and understandable.
Point in Journey Layout Options  ↓ 

We explored a number of layouts for the overview, recommendations, and video sections of the point in journey page. The left spaces them out horizontally, the center treats them like collapsible drop downs, and the right is a is a vertical scroll version. 
After testing and consideration, we decided on the equally spaced horizontal blocks (far left) because it allows the user, a journalist or lawmaker ready to skim, to view the discrepancies side-by-side and lets them interact with the video without much hassle.
Low-Fi Prototypes  ↓ 
Mid-Hi Prototypes
The prototypes include a logo we designed using one of our homeless friend's handwriting and the blue that human.nyc was already using for their communication work (made lighter in later iterations for legibility). Typefaces include Libre Franklin for titles and headers (sharp, intelligent, trustworthy), and RePublic for body type (personable, warm, legible).
Map Iterations  ↓ 

The set up of the map page is crucial as it is a user's introduction to not only the website, but also the street-to-home journey in New York. We worked hard to make it intuitive and engaging while also alluding to the frustration, uncertainty, and confusion that the process brings those who are going through it. For this reason, there are several versions where the map is wavy instead of straight, and others that include example personal journeys that jump around from step to step. We finally landed on a vertical twisting map which moved to the right side and straightened out when the user begins exploring points in the process.
The intention of this website was always for it to be reproducible for other parts of the nation, so we wanted to somehow play up how local these problems really are. In order to allude to New York City, I created and tested a number of landmarks and symbols for the city in a variety of styles and media. We decided on a painted version of the skyline seen below.
Initially, we designed a horizontal map because we were thinking of the journey like a timeline. Based on our research, it made sense to make the map vertical, instead. 
This achieves our design goal of presenting information in an approachable and skim-able way by allowing the user to experience the journey through vertical scroll, as they already do on websites. Each step view gives them the option to click to another step or continue scrolling to the following one, ultimately reducing the amount of clicks necessary to experience the journey. We are still investigating functional limitations and how to make the experience smoother.
Point in Journey Page Iterations  ↓ 

The meat of the website is on the pages of the steps of the process. After considering and testing various layouts of information as seen in the wireframes, we began designing with the intention of clarity and skim-ability to fit the needs of our journalist users. We wanted to make sure only the most important information is shown with the option to explore more through drop downs. We also focused on making it easy to switch from step to step, or go back to the map.
The switch from the minimized map being at the bottom to the top came from our consideration of website as an ecosystem. We wanted to combine the navigation so as to keep it all in one place and avoid confusing the user, and considered the map as a top layer which covers and exposes the in-depth information about each step in the process.
Introduction Iterations  ↓ 

At first we tried to make a non-invasive introductory dropdown that would shrink up as the user scrolls to the map. After a number of iterations we decided that the less text and clicking, the better, according to the skimming tendencies of our audience. The section kept shrinking as we tried to make the experience more intuitive through the design.
Quote Treatment Iterations  ↓ 
These are a number of iterations on the quote section we wanted each point to have in order to bring a personalization and a voice to each step in the process. We played with its level of emphasis, we added illustrations, we made it larger and we shrunk it. At the end, we decided on a section to the left of the map for the quote which switches as the user hovers from point to point.
Final Prototypes
Final Website Prototypes  ↓ 

As mentioned above, after months of testing and iterating, we found that a vertical scroll makes for sense. For the user, a journalist without much time to waste, it is more intuitive as a vertical timeline and reduces the amount of clicks they need to make because it could be a simple scrolling experience. For us, it made sense because although we wanted to keep the idea of the journey being uncertain, but we knew the best and most important way to present this information was to make it as linear as possible. 
We thought back to the websites we collected as inspiration and remembered that a number of them scroll vertically in the form of cards. A vertical scroll would help the user experience each step in order, one at a time, while being able to skim when in a time crunch.
Final Mobile Prototypes  ↓ 

The vertical scrolling helped translate this website into a mobile version, as well. We added a quickly scrollable introductory page because we didn't have room for an intro blurb in the navigation. We then stacked the overview, recommendation, and video sections, and kept the drop downs. This way, the user still has total control over how much information they're getting. 
Next steps
As we move into version 2:
- Continue user testing version 1 specific to journalists and lawmakers
- Focus on map scroll functionality and how we can eliminate a scroll-within-a-scroll 
- Revisit mobile design
- Various alterations based on accessibility standards
- Build a human.nyc home base for fundraising and campaign tracking

See other projects:

Back to Top