UX

research

prototyping

testing

visuals

design system

ShapeSV

ShapeSV

ShapeSV

ShapeSV

ShapeSV

Empowering Silicon Valley residents with information to advocate for affordable housing projects

Empowering Silicon Valley residents with information to advocate for affordable housing projects

Empowering Silicon Valley residents with information to advocate for affordable housing projects

Empowering Silicon Valley residents with information to advocate for affordable housing projects

Empowering Silicon Valley residents with information to advocate for affordable housing projects

4 months

Timeline

Product Designer

Role

2 Designers, 4 Dev, 1 PM

Collaborators

Background

Background

ShapeSV is advocacy web app designed to empower, educate users to advocate for essential housing development projects within Silicon Valley.


I led the design process for the project feedback flow - researching and designing for responsive web/mobile app.


This platform allows people to anonymously voice their needs like affordable housing to city leaders in Silicon Valley. It currently houses a database of local building project proposals and encourages users to advocate on their needs, so we can share these comments to city leaders who have power to approve them.


We've partnered up with City of San Jose with the goal of improving housing advocacy in the local community. As a result, we currently launched Phase 1 MVP.

ShapeSV is advocacy web app designed to empower, educate users to advocate for essential housing development projects within Silicon Valley.


I led the design process for the project feedback flow - researching and designing for responsive web/mobile app.


This platform allows people to anonymously voice their needs like affordable housing to city leaders in Silicon Valley. It currently houses a database of local building project proposals and encourages users to advocate on their needs, so we can share these comments to city leaders who have power to approve them.


We've partnered up with City of San Jose with the goal of improving housing advocacy in the local community. As a result, we currently launched Phase 1 MVP.

Tools

Tools

Figma

Slack

Jira

Problem

There’s a huge lack of affordable housing projects in Silicon Valley. In San Jose, there are only enough affordable projects to house 23% of highly impoverished families. This is largely because people don’t have an accessible way to advocate for affordable housing to leaders.

How might we empower people who need affordable housing to advocate for their needs and engage with leaders?

Interview Insights

Interview Insights

1

Information on housing developments is hard to find

"This information is impossible to find. If I happen to see a new building in my area, I'd have to do a lot of digging to find out what's going on."

1

Information on housing developments is hard to find

"This information is impossible to find. If I happen to see a new building in my area, I'd have to do a lot of digging to find out what's going on."

1

Information on housing developments is hard to find

"This information is impossible to find. If I happen to see a new building in my area, I'd have to do a lot of digging to find out what's going on."

2

It's hard for people to advocate for affordable housing

"I don't speak the language, so it's very difficult to speak up about what I want to see in my neighborhood."

2

It's hard for people to advocate for affordable housing

"I don't speak the language, so it's very difficult to speak up about what I want to see in my neighborhood."

2

It's hard for people to advocate for affordable housing

"I don't speak the language, so it's very difficult to speak up about what I want to see in my neighborhood."

3

Lack of trust regarding technology and privacy online

"Many of our users are senior citizens, and they are very apprehensive when it comes to putting any private information into a website."

3

Lack of trust regarding technology and privacy online

"Many of our users are senior citizens, and they are very apprehensive when it comes to putting any private information into a website."

3

Lack of trust regarding technology and privacy online

"Many of our users are senior citizens, and they are very apprehensive when it comes to putting any private information into a website."

High-level Goal

Create a safe, convenient way for community members who need affordable housing to learn about building proposals and share their opinions with city leaders.

Constraints

  • Launch MVP in less than 4 months

  • Easy to maintain system for staff to manage

  • Financial budgets

Ideate

After meeting with our stakeholders, we defined our high-level goal and the constraints of the projects.

Defining 2 User Types: Resident and Advocate

We defined 2 main user types based on the job story framework to encapsulate our user's contexts & motivations. Our first and primary user type is the resident and our user second type, the advocate, is more secondary.

Ideate

After meeting with our stakeholders, we defined our high-level goal and the constraints of the projects.

Sitemap

Before designing the project advocacy feature, we needed to contextualize how it would fit into the bigger picture of our platform. To provide a visual representation of this integration, we've developed an sitemap that outlines future features to be implemented in subsequent phases.

Ideate

After meeting with our stakeholders, we defined our high-level goal and the constraints of the projects.

Ideate

After meeting with our stakeholders, we defined our high-level goal and the constraints of the projects.

High-level Goal

Create a safe way for community members who need affordable housing to learn about and advocate for it.

Constraints

  • Launch MVP in less than 4 months

  • Easy to maintain system for staff to manage

  • Financial budgets

High-level Goal

Create a safe, convenient way for community members who need affordable housing to learn about building proposals and share their opinions with city leaders.

Constraints

  • Launch MVP in less than 4 months

  • Easy to maintain system for staff to manage

  • Financial budgets

Sketching Ideas for "Anonymous Feedback"

We then quickly sketched different concepts to visualize how we could implement the feedback process. Some concepts we ideated on included: an anonymous polling system to gauge user sentiments, a forum allowing anonymous engagement between users, and a star rating system for users to rate their overall impressions of new development projects. After showcasing different concepts, the team opted for the star rating system.

Wireflow

In addition to the sitemap, I created wireflows to ensure that we are all aligned with the concept we'll be testing. These wireflows serve as visual representations, making the process more transparent and comprehensive for the entire team. The MVP focused the most on this area where users are discovering, reading, and giving feedback to the project developments.

Low-fi Usability Testing

We conducted three rounds of usability testing with a diverse group of participants, including members of other community outreach organizations and local residents in Silicon Valley. We did testing on mobile and web app devices.

Design Improvements

We prioritized the identified issues based on their technical complexity, urgency, and overall impact.
Then, we categorized these issues into three levels (P0: Major, P1: Moderate, P2: Minor).

Design Improvements

We prioritized the identified issues based on their technical complexity, urgency, and overall impact.
Then, we categorized these issues into three levels (P0: Major, P1: Moderate, P2: Minor).

Final Solutions

Our final solutions focus on 3 main aspects - providing users easy discoverability for projects, offering translation options for non-native speakers, and allowing users to give anonymous feedback online.

Disclaimer: The current launch of this product is on shapesv.org, but it’s still in MVP. The designs you below is a revised design soon to be implemented.

Visual Designs

Our visual design goal was to create a vibrant and inclusive experience. Since our intended audience encompassed individuals from diverse age groups, various ethnic backgrounds, & varying degrees of technical familiarity, we placed a strong emphasis on ensuring accessibility and inclusivity. Our primary colors passes We used Google’s Material Icons since it’s widely recognized and familiar in various platforms and websites.

Final Screens

Reflections

Testing with a Language Barrier...

In our first round of testing, several of our testers spoke only Spanish. We had been under the impression that we would have translators, but we did not. While I do have some conversational Spanish speaking ability, it was still quite difficult to do the testing sessions. Looking back, it would have been helpful to have more tools to mitigate the impact of the language barrier. Not only more language skills, but also practice with some language translation apps.

If I had more time…

I would explore implementing clear code of conduct & community guidelines to help mitigate the risks associated with anonymous comments. I'd also consider exploring optional registration or voluntary identity disclosure to allow for more personalized & targeted engagement.

Reflections

Testing with a Language Barrier...

Testing with a Language Barrier...

In our first round of testing, several of our testers spoke only Spanish. We had been under the impression that we would have translators, but we did not. While I do have some conversational Spanish speaking ability, it was still quite difficult to do the testing sessions. Looking back, it would have been helpful to have more tools to mitigate the impact of the language barrier. Not only more language skills, but also practice with some language translation apps.

If I had more time…

I would explore implementing clear code of conduct & community guidelines to help mitigate the risks associated with anonymous comments. I'd also consider exploring optional registration or voluntary identity disclosure to allow for more personalized & targeted engagement.

Reflections

Testing with a Language Barrier...

In our first round of testing, several of our testers spoke only Spanish. We had been under the impression that we would have translators, but we did not. While I do have some conversational Spanish speaking ability, it was still quite difficult to do the testing sessions. Looking back, it would have been helpful to have more tools to mitigate the impact of the language barrier. Not only more language skills, but also practice with some language translation apps.

If I had more time…

I would explore implementing clear code of conduct & community guidelines to help mitigate the risks associated with anonymous comments. I'd also consider exploring optional registration or voluntary identity disclosure to allow for more personalized & targeted engagement.

#UX

#research

#prototyping

#testing

#visuals

#designsystem

ShapeSV

Empowering Silicon Valley residents with information to advocate for affordable housing projects

4 months

Timeline

Product Designer

Role

2 Designers, 4 Dev, 1 PM

Collaborators

Background

ShapeSV is advocacy web app designed to empower, educate users to advocate for essential housing development projects within Silicon Valley.

I led the design for the project feedback flow, researching and designing for the responsive web/mobile app. This platform allows people to anonymously share their needs like affordable housing to city leaders in Silicon Valley. It houses a database of local building project proposals and encourages users to advocate on their needs. We then share these comments with city leaders who have power to approve them. We've partnered up with City of San Jose with the goal of improving housing advocacy in the local community. As a result, we currently launched Phase 1 MVP.

Tools

Figma

Slack

Jira

Problem

There’s a huge lack of affordable housing projects in Silicon Valley. In San Jose, there are only enough affordable projects to house 23% of highly impoverished families. This is largely because people don’t have an accessible way to advocate for affordable housing to leaders.

How might we empower people who need affordable housing to advocate for their needs and engage with leaders?

Interview Insights

1

Information on housing developments is hard to find

"This information is impossible to find. If I happen to see a new building in my area, I'd have to do a lot of digging to find out what's going on."

2

It's hard for people to advocate for affordable housing

"I don't speak the language, so it's very difficult to speak up about what I want to see in my neighborhood."

3

Lack of trust regarding technology and privacy online

"Many of our users are senior citizens, and they are very apprehensive when it comes to putting any private information into a website."

Defining 2 User Types: Resident and Advocate

We defined 2 main user types based on the job story framework to encapsulate our user's contexts & motivations. Our first and primary user type is the resident and our user second type, the advocate, is more secondary.

Ideate

After meeting with our stakeholders, we defined our high-level goal and the constraints of the projects.

High-level Goal

Create a safe, convenient way for community members who need affordable housing to learn about building proposals and share their opinions with city leaders.

Constraints

  • Launch MVP in less than 4 months

  • Easy to maintain system for staff to manage

  • Financial budgets

Sitemap

Before designing the project advocacy feature, we needed to contextualize how it would fit into the bigger picture of our platform. To provide a visual representation of this integration, we've developed an sitemap that outlines future features to be implemented in subsequent phases.

Sketching Ideas for "Anonymous Feedback"

We then quickly sketched different concepts to visualize how we could implement the feedback process. Some concepts we ideated on included: an anonymous polling system to gauge user sentiments, a forum allowing anonymous engagement between users, and a star rating system for users to rate their overall impressions of new development projects. After showcasing different concepts, the team opted for the star rating system.

Wireflow

In addition to the sitemap, I created wireflows to ensure that we are all aligned with the concept we'll be testing. These wireflows serve as visual representations, making the process more transparent and comprehensive for the entire team. The MVP focused the most on this area where users are discovering, reading, and giving feedback to the project developments.

Low-fi Usability Testing

We conducted three rounds of usability testing with a diverse group of participants, including members of other community outreach organizations and local residents in Silicon Valley. We did testing on mobile and web app devices.

Design Improvements

We prioritized the identified issues based on their technical complexity, urgency, and overall impact.
Then, we categorized these issues into three levels (P0: Major, P1: Moderate, P2: Minor).

Final Solutions

Our final solutions focus on 3 main aspects - providing users easy discoverability for projects, offering translation options for non-native speakers, and allowing users to give anonymous feedback online.

Disclaimer: The current launch of this product is on shapesv.org, but it’s still in MVP. The designs you below is a revised design soon to be implemented.

Visual Designs

Our visual design goal was to create a vibrant and inclusive experience. Since our intended audience encompassed individuals from diverse age groups, various ethnic backgrounds, & varying degrees of technical familiarity, we placed a strong emphasis on ensuring accessibility and inclusivity. Our primary colors passes We used Google’s Material Icons since it’s widely recognized and familiar in various platforms and websites.

Final Screens

Reflections

Testing with a Language Barrier...

In our first round of testing, several of our testers spoke only Spanish. We had been under the impression that we would have translators, but we did not. While I do have some conversational Spanish speaking ability, it was still quite difficult to do the testing sessions. Looking back, it would have been helpful to have more tools to mitigate the impact of the language barrier. Not only more language skills, but also practice with some language translation apps.

If I had more time…

I would explore implementing clear code of conduct & community guidelines to help mitigate the risks associated with anonymous comments. I'd also consider exploring optional registration or voluntary identity disclosure to allow for more personalized & targeted engagement.

Located in Silicon Valley | SF Bay Area

2024 Rebecca Chan · ui: ilnicki.design