Jerri Zhang | Product Designer
Haven-Logo.gif

Haven

Haven is a hypothetical digital platform that helps women engage with local city officials and urban designers to make the urban space a safer place.

Haven

Role
Designer/Student Project

Team
Individual Project

Tools
Adobe XD, Illustrator,
InDesign, After Effects

Problem
Women's safety issues are often overlooked in urban design. There have been arguments made that designing urban spaces for women increases safety for the overall community, but how can women’s voices be included in urban design and choices that are made for the city?

Solution
Haven is a hypothetical organization that partners up city officials, urban designers, and the public to collect data on women’s perception of safety. Haven goes to the source; getting data from women, and utilizing a voting system to determine the changes that need to be made.

 

Research

Research came in the form of conversations I had with three other women. Situations that would merit using the app to look up reviews of the area’s safety perception included the following:

  • Traveling to a new area and planning ahead

  • Being in an unwanted area and wanting to leave

  • Traveling to an area by foot

Early user flow

Verification

Wireframes were presented to possible users to verify the user flow and what was deemed the most intuitive as they imagined themselves in the above scenarios.

The initial user flow subsequently changed as a result of this process. For instance, looking up the location first was the primary action that all the scenarios required.

One of the later flows for the user

 

Initial Wireframes for Information Gathering

iPhone 6-7 – 8.png
iPhone 6-7 – 9.png
iPhone 6-7 – 11.png
iPhone 6-7 – 12.png

Haven App


The app for Haven begins by showing you your current location and where you are in addition other people’s comments about their perception of safety in the area.

Scrolling down on the home screen will lead you to various issues that people are discussing below about that area.


Tapping into the specific topic will lead the user to further details about the area along with photos.


If the user goes back to the home screen and wanted to look up a location, they can search for it via the search bar.

Users can look up directions to that specific location.


Haven would utilize Google maps if they select “Directions.” It would use the data collected to help users navigate to the location using safer routes.


Users can add their review of the location under suggestions in addition to reading other people’s reviews.

Users can then enter in their own opinion of the area and what could be changed.


The information gets reviews one last time by the user before the user submits to the Haven App.

Reflection on App

This project was done when I was still a student. Working in the real world since then has opened my eyes to accessibility issues having to do with color and contrast. While the use of color to indicate the safety levels on the home screen seemed reasonable back then, the color choices I made were risky. While it’s rare for women to be colorblind, it’s still possible. Further testing of the app also would’ve been beneficial at the end of the project.

 
 
Haven_final-2.gif

The Haven Branding

The grid is the originator for all three logo forms, including the square pattern that shows up on the app's loading screen and the Haven booklet.

Haven logo Final Present site-05.png
Haven Main Logo.jpg
Haven logo gather.png
Haven logo Final Present site-03.png

Main Logo

Haven's flagship logo for the brand. When Haven is implemented within a city, it is paired up with the name of the city underneath in promotion materials.

Gather

The Haven logo in “Gather” form, is used on materials that represent both the gathering and exchange of information. 

Navigate

The "Navigate" form shows up more commonly on the app when the user utilizes its navigation features.

 
safe.png
ok.png
bewary.png

Safe

The Haven brand color is used to represent Safe, an area that is assigned this color according to the crowdsourced data. The color is a vibrant energetic purple that denotes intelligence, security, and authority.

OK

OK is a faded purple that is an area considered in between Safe and Be Wary. While not an unsafe place, the location is deemed not entirely safe either.

Be Wary

Using the opposite of the Safe color, the neon yellow is supposed to signal caution and alertness. The color is used to indicate that the area is unsafe.

 
Pairing examples when logo is teamed with a city.

Pairing examples when logo is teamed with a city.

 

Haven Booklet

For those who are technology adverse or unable to get their hands on a smart phone to use the app, Haven offers a booklet that can be picked up at local libraries, community centers, and police stations. The booklet explains what Haven is and allows people to submit their suggestions for safety improvements. A seal and a paid stamp makes it easy to drop the booklet into the mail.