SHOP BIPOC
RESPONSIVE WEB DESIGN AND PRODUCT DEVELOPMENT
MOTIVATION
The death of George Floyd, Breonna Taylor, and unfortunately many other Black lives has resulted in mass protests by thousands of people across the US – and around the world. They demand justice against systemic racism and police brutality against Black, Indigenous, and People of Color (BIPOC).
This current social movement has also brought awareness to support BIPOC-owned businesses as an added way to address racial inequality in, long term.
This has resulted in large numbers of people looking for BIPOC-owned businesses.
THE CHALLENGE
To tackle the problem of fragmented lists of BIPOC-owned businesses and organize it into a single source of truth to empower and encourage user investment. The motivation for this research and implementation is to create a platform that will help people easily find BIPOC businesses locally and nationally.
ROLE
User Research, UX and UI Design
TOOLS
Figma, Adobe XD, Miro, Visual Studio Code, Github, Slack, Optimal Workshop, Google Suite, and Trello
DURATION
4 weeks
WHAT DID WE DO?
Identify restraints people are experiencing when obtaining information, and taking real action, to support BIPOC businesses. We did five user interviews and conducted a survey in which 19 people participated.
KEY TAKEAWAYS FROM QUALITATIVE AND QUANTITATIVE RESEARCH
“Money is power. I want to show up by shopping at local BIPOC-owned businesses to show my allyship. It's important to do this so these BIPOC businesses don’t have to close due to the extra strain of COVID-19.”
- SURVEY PARTICIPANT
Users are looking for a central list of organizations to support and fund, one they can refer back to easily.
Users desire an educational resource aspect to the platform. They want one go-to spot for all information.
Users are interested in investing in BIPOC businesses that share mutual interests and values.
They are looking to learn as much as they can about the business. They want their financial investment to make an impact.
Users are interested in where businesses are located specifically, in reference to the user’s location. They desire a map feature.
Users want to make long-term changes to their behaviors as consumers, and are overwhelmed on where to begin.
CONDENSING ALL USER TRAITS IN USER PERSONA
To string together all users who were interviewed and their ideologies, we created a persona that everyone could resonate and empathize with.
STORY-BOARDING USER JOURNEY
FEATURE PRIORITIZATION MATRIX
By providing a reliable and user-friendly resource that connects consumers and BIPOC businesses.
This will support BIPOC businesses by providing users the ability to search, donate, and access reliable sources of information.
EARLY SKETCHES AND WIREFRAMES - DESKTOP
EARLY SKETCHES AND WIREFRAMES - MOBILE
REDLINING FEATURES TO INCLUDE IN MID FIDELITY PROTOTYPES
INFORMATION ARCHITECTURE
Building out information architecture for the site enables users to easily navigate through the website and find relevant information.
This was done by sourcing categories from yelp, the yellow pages, blackownedbusinesses.com, and the better business bureau.
Card Sorting and Categorization was done using Optimal Workshop.
5 people participated to group these cards in a systematic order. The groupings of listed items eventually lead to the creation of easy navigation that would make the most sense to users when they would visit the website.
Seven categories were created after analysis: Top Navigation- Shop, Discover, Support, About Bottom Navigation- For Businesses, Languages, Terms. This was most critical to the design process, as the mid-fidelity prototype was being built side by side along with this exercise to make sure we can build out easy navigation or Site Map and successfully execute the testing plans on the mid-fidelity prototype.
USABILITY TESTING ON MID-FIDELITY PROTOTYPE
Results from Usability Testing helped to identify and fix the following:
Re-evaluate the number of pages and user flow
Remove redundant navigation on home page
Hero image needs to reflect the tone of the website
Add mission statement to home page
UI STYLE GUIDE
USER TASK FLOW FOR CLICKABLE PROTOTYPE
RWD - HIGH FIDELITY PROTOTYPE - DESKTOP AND MOBILE
FUTURE DEVELOPMENTS
Go mobile -- create an app.
Networking platform.
Expanding Shop BIPOC to be a platform that helps people start a business.
Build out the coding further.
Additional pages and features (filters and other tabs)