412Connect
Role:
UI/UX, Web Design
Team:
Center for Analytical Approaches to Social Innovation
Timeline:
Nov 2020 - Aug 2021
Tools used:
Figma, Photoshop
Project Context
From the winter of 2020 to summer of 2021, I joined University of Pittsburgh's Center for Analytical Approaches to Social Innovation (CAASI) on a project with the mission of promoting and increasing the visibility of Black-owned businesses in Pittsburgh and to expand their business prescence on and around the local universities. I originally joined the project as a volunteer and used it for my final capstone project in the spring semester.
Role
In this project, I acted as the lead designer on the tech team with 7 computer science students from various backgrounds. I also collaborated with the Community Engagement Team during ideation, user testing, and weekly meetings and helped the tech team in coding the HTML, CSS, and JavaScript used for the website.
Challenge
The COVID-19 pandemic has wiped out nearly half of Black-owned businesses in the United States. The goal of this project is to connect Black-owned businesses with the university and local Pittsburgh communities.
Solution
We worked together with community partners and local business owners to research and create 412Connect, a platform for gathering and promoting Black-owned businesses through an online scavenger hunt.
User Research
User research was carried out by the Community Engagement Team to determine what features would be most appropriate and bring the most engagement between businesses and students. The team conducted multiple surveys, interviews, and focus groups to find good approaches to the problem. The findings from this team revealed that there was a large disconnect between local Black-owned businesses and the university community, and they showed how students tend to engage with the local businesses around them.
With this information in mind, it was determined that a "scavenger hunt" style web application would be the best approach to help bring awareness to these businesses and bring students and community members to them. With this application it was important to consider the businesses' feelings and to not dehumanize them by giving monetary incentives to students to visit them, and that the incentive to visit them should be more natural.
My first step was to make user personas so that we had a reliable and realistic representation of both the student population using 412Connect and the business owners who 412Connect is representing. These personas helped me throughout the design process in making sure that we had the end user in mind at all times when designing our solution.
User personas used throughout the design process.
Approach
Based on the user research, I designed and iterated through tons of sketches wireframes, and mockups. When designing the site, we determined that there were a few important things to keep in mind:
1. Consider both the businesses' and the customers' feelings.
2. Create an algorithm that matched user preferences with businesses to bring more successful interactions.
3. Have students complete tasks that foster more interact with businesses such as social media following.
Designing happened concurrently with programming of the site due to the small team and strict timeline for deadlines. Thus, we used Agile-style weekly sprints organized through three weekly meetings: a tech team meeting focused on programming, a design meeting for marketing and design, and a general weekly meeting where all teams met and gave feedback.
Currently, 412Connect is in the midst of its first launch, hosting eight businesses that were specially curated with a community partner. After this initial launch, a data report will be created with business interaction statistics and will be sent to the owners of these businesses to track student engagement.
Original sketches for the landing page of the site.
Figma wireframes for potential different styles of the landing page.
Mockups for the mobile landing page and student dashboard.
Mockups for the mobile landing page and student dashboard.
Solution Overview
The website was designed to give a brief overview of the project and to encourage customers to join and explore the local businesses. It emphasizes the importance of why students should interact with these local businesses while giving them a fun challenge that gave them non-monetary rewards. The site so far has been successful with over 125 students in the first week of launching and generally positive feedback through email reviews. The site features two main badges that students can earn: a "Social Amplifier" badge which encourages students to follow and interact with businesses on social media, and a "Community Explorer" badge which features trivia questions made by the business owners for students to answer, helping students learn more about their business.
Overall, the project has been a blast to work on and has been well recieved by both students and business owners. Working on the project has taught me many new technologies and helped to create a group that is working towards fostering new relationships in our community.