Manayunk, Philadelphia: A More Accessible Neighborhood

A UX case study detailing a website and design system built for the neighborhood of Manayunk, Philadelphia

Methods

User Interface
User Experience 
Placemaking

Team

Designer: Brett Sweeney
Designer: Kaitlyn Gross
Art Direction: Sara Hall

Year

Spring 2022

Case Study

"Designing for audiences with varying ability levels, ranges of digital access,
diverse demographics, and different cultures." 

Introduction 

During our time at Tyler School of Art and Architecture, the majority of your projects were dedicated to creating the most beautiful and innovative products, branding, and design. However, in this project, our team consisting of Kaitlyn Gross and myself, approached designing for audiences with varying ability levels, ranges of digital access, diverse demographics, and different cultures. We were able to explore the benefits, constraints, and opportunities that exist in government.

Goal

Our goal was to create an inclusive, accessible design system, accompanying digital assets, and an online social media presence for the neighborhood of Manayunk. Helping facilitate a deeper understanding and connection between the neighbors of Manayunk and how they can access government tools easier. With more and more aspects of government being transferred into the digital realm, we wanted to tackle how can we establish a digital presence that can be used long after we’re done tackling the project.

"Dedicated a lot of time and effort to making the most accessible product we could."

Our Team

Both Kaitlyn Gross and I decided to team up to tackle this challenge together. Working alongside Sara Hall who doubles as our professor for our UX in Civic Tech class and as the Director of Digital Services at the City of Philadelphia. With our team, we dedicated a lot of time and effort to making the most accessible product we could. Highlighting each other strengths I leaned on Kaitlyn for branding and she leaned on me for research and principle UX aspects of this project. Working both diligently on the wireframes of this project and how to make this the best digital product we could.

Research

Research Overview

To be able to create an inclusive, approachable design with all audiences in mind our team took a lot of time and effort to research the neighborhood of Manayunk. We wanted to consider the overall feel and unique characteristics of the neighborhood. Since this project highlights accessibility for diverse demographics we also wanted to be considerate of all neighbors of Manayunk.

"How we can create an accessible web presence to better help the people of Manayunk?"

Secondary Research

To help gain a better understanding of the neighborhood we are designing for, Kaitlyn and I spent time researching the area of Manayunk through secondary research and visual research through photography. We asked questions like Who is living there? What gravitates people to Manayunk? and how we can create an accessible web presence to better help the people of Manayunk?

From our research, we found that Manayunk was made up of a combination of singles, young families, and multigenerational residents bringing a modern edge to Manayunk's blue-collar origins. Over 300 small businesses are located in Manayunk making it a local hub for creativity and promoting local business and entrepreneurship. Due to the location, Manayunk along the Schuylkill River, it is a perfect spot for recreation like Biking, Kayaking, Fishing and Public Art. 

Demographic Research

Through our secondary research of the demographics of Manayunk provided by the latest U.S. Census Bureau release, the 2019 American Community Survey, we found out that the Total Population of Manayunk is 5,547. Split between 54.8% male members of the population and 45.2 % of the population being female. Also, the median age of Manayunk residents is 32 years old

Some other interesting demographic research we found is that Manayunk is mostly made up of non-family households. A staggering 67.12 % of the population of Manayunk is made up of non-family households. Followed by 32.88 % of family households. 

Another interesting demographic finding that helped us make decisions when designing for Manayunk was the fact that most residents of Manayunk held some sort of White Collar Occupation Making up 89.44% of the population. Followed by Blue Collar Occupation making up only 10.56% of the population of Manayunk. 

User Personas

Based on our secondary & demographic research, we were able to use the data we gathered to create user personas of the residents of Manayunk. The demographics of the members of Manayunk included members ranging from young professionals to retired adults

Having a diverse set of user personas who rely on government services differently helps us make better design choices for all. During the design process our user personas helped us to visualize what problems we need to solve and the goals we will help our users achieve when accessing government websites.

Branding

Branding Overview

When starting to think about the branding after all of our research, we knew that we wanted something that represented Manayunk and its unique characteristics. We started off by brainstorming the logo. We did some logo research and experimented with three different logo directions.

Directions

Three directions we presented were a bold icon, a typographic badge, and illustrative line work. We did sketches for each variation and then developed a few of them into more finalized vector logos. We proposed these for user feedback among our peers and Sara hall to workshop which would be the best direction for representing Manayunk.

Logo Directions

We decided to pursue the bold icon direction for the logo because we felt that it was the most responsive and successful for Manayunk's digital presence. We made a few logo iterations that can be used in different departments among the neighborhood and when representing the neighborhood. 

Design System

After we established a logo, we started to define our design system. We chose colors that had great accessibility for all users and used them in ways that would be most successful. We decided to use a sans-serif typeface that is easy to read and use at multiple sizes and weights. Once those foundations were established we designed buttons that would be used in Manayunk’s digital presence. 

Wireframing

We start creating wireframes for what the interface of what Manayunk's website would look like. Many of the decisions we made were informed by our research that helped influence the overall design. Including having a section that is dedicated to neighbors being able to access quick information in large card format. We wanted to make the experience as quick and as easy as possible for users.

Interface

Landing Page

Manayunk Homepage

We wanted to design the landing page as inviting as possible for all types of users of the website. From someone who is not familiar with technology to someone who is online all day long. Offering multiple resources as soon as you are on the home page so users can feel as comfortable as possible when navigating the site as quickly and efficiently as possible.

Mockup of Manayunk's Landing page
Mockup of Manayunk's Landing page
Mockup of Manayunk's Landing page
Mockup of Manayunk's Landing page

Mockup of Manayunk's Landing page Mockup of Manayunk's Landing page Mockup of Manayunk's Landing page Mockup of Manayunk's Landing page

Department Homepage

Parks & Recreation

Though there would be multiple department homepages on Manayunk's website we wanted to focus on Parks & Recreation. From our research into Manayunk we found that the neighborhood appeals to people who are outdoorsy and like to be involved with the community. We wanted to build this website out so we can propose how to set up each department page but also consider how to design for the users in Manayunk who utilize this information regularly for their lifestyle.

Mockup of Manayunk's Parks and Recreation Page
Mockup of Manayunk's Parks and Recreation Page
Mockup of Manayunk's Parks and Recreation Page
Mockup of Manayunk's Parks and Recreation Page

Mockup of Manayunk's Parks and Recreation Page Mockup of Manayunk's Parks and Recreation Page Mockup of Manayunk's Parks and Recreation Page Mockup of Manayunk's Parks and Recreation Page

Forms & Portal

Neighborhood of Manayunk Form Portal

Something that we found during our research was how many forms small business need to submit yearly to eligible to keep the doors open. It is fundamental for small business to stay on top of their forms. Many forms that small business needed to fill out were paper forms that were extremely hard to navigate and difficult to fill out.  

We decided to create a form portal that would be attached to the neighborhood of Manyunk so business owners could submit their permits and forms electronically. We also created a portal that small business owners could access to keep track of their forms submitted and see the progress.  

Mockup of Manayunk's form and portal page
Mockup of Manayunk's form and portal page
Mockup of Manayunk's form and portal page
Mockup of Manayunk's form and portal page

Mockup of Manayunk's form and portal page Mockup of Manayunk's form and portal page Mockup of Manayunk's form and portal page Mockup of Manayunk's form and portal page

Mobile

Manayunk Mobile

When thinking about accessibility in design we wanted to design our website for the people who use it. During our research we found out that many people access government websites through mobile device since that is their main source of technology. With that, we wanted to make sure our mobile was as responsive as our desktop version.

Mockup of Manayunk's landing page on mobile
Mockup of Manayunk's landing page on mobile
Mockup of Manayunk's landing page on mobile
Mockup of Manayunk's landing page on mobile

Mockup of Manayunk's landing page on mobile Mockup of Manayunk's landing page on mobile Mockup of Manayunk's landing page on mobile Mockup of Manayunk's landing page on mobile

Brand Extension

Manayunk 5k

Alongside designing what the virtual web presence would would look like we also decided to create assets to exemplify how to extend the Manayunk brand. Since the neighborhood values outdoors events we decided to visualize what it would be like if the neighborhood of Manayunk held a 5k run for residents. This helps consider brand consistency and gives a benchmark for future events on how to consider the logo and brand elements.

Banner to advertise the Manayunk 5k
Outdoor Tent
Manayunk 5k T-Shirt
Manayunk 5k wristband
Manayunk 5k water bottle
Manayunk 5k runner tag
Manayunk 5k towel

Banner to advertise the Manayunk 5k Outdoor Tent Manayunk 5k T-Shirt Manayunk 5k wristband Manayunk 5k water bottle Manayunk 5k runner tag Manayunk 5k towel

Social Media

When considering how people access information in modern times we came to the conclusion that social media should be heavily considered when building out the brand. Since social media is widely used and can be utilized in real time to get information to neighbors we created an example of how the neighborhood of Manayunk can use social media to promote events and connect with the neighbors of Manayunk.

Mockup of Manayunk's Instagram homepage
Mockup of Manayunk's Instagram post
Mockup of Manayunk's Instagram post
Mockup of Manayunk's Instagram post

Mockup of Manayunk's Instagram homepage Mockup of Manayunk's Instagram post Mockup of Manayunk's Instagram post Mockup of Manayunk's Instagram post

Conclusion

This project was a lot of first for me. Being able to work on a large scale project like this with a partner was a breath of fresh air. Working alongside Kaitlyn each week helped me become a better designer and better team mate, bouncing ideas off each other each week and taught me to have faith in the team and not worry about every single detail. 

This was an amazing project to exercise our design thinking as this project needed to be used by all demographics of the neighborhood of Manayunk. Working with Sara each week to develop this project and consider all aspects of how accessible it was was a great experience in to real world design thinking. This helped me learn a lot about UX design by making smarter decisions for the audience. This helped me become better designers by designing with an audience and accessibility in mind.

Credits:

Designer: Brett Sweeney
Designer: Kaitlyn Gross
Art Direction: Sara Hall
Class: UX in Civic Tech
Institution: Tyler School of Art and Architecture — Graphic and Interactive Design

Using Format