send chinatown love
send chinatown love
Preview
The Context
Send Chinatown Love's website is responsive but lacks intuitive navigation, layout, and content organization, leading to a subpar user experience. The overall style and design, including UI elements, color scheme, and layout, could benefit from updates to create a more modern, professional, and visually engaging appearance. Improving these aspects would strengthen the platform's branding and make the website more inviting and user-friendly for both new and returning visitors.
The Problem
I set out to improve Send Chinatown Love's "Discovering Chinatown Businesses" page to make it easier for users to find and support local businesses. The current page feels overwhelming, with unintuitive filters and a lack of guidance on which businesses are family-run or in need of support. My goal was to create a more user-friendly and engaging experience that simplifies discovery, personalizes recommendations, and fosters stronger connections with the Chinatown community.
The Objective
I wanted to analyze competitors and gather user insights to understand how people currently discover and support Chinatown businesses, as well as the challenges they encounter on the platform. Based on this research, I aimed to redesign the "Discovering Chinatown Businesses" page to simplify the experience, highlight businesses in need of support, and align with user expectations for an intuitive and engaging platform.
The Solution
The TL;DR
Through user research, competitive analysis, and a user-focused approach, I uncovered challenges users faced in discovering and supporting Chinatown businesses. Many found the process overwhelming due to confusing filters, a lack of personalized recommendations, and limited visibility into businesses needing community support. Using these insights, I created a user persona to understand their needs and designed features better to improve usability.
I developed site maps, user flows, and low-fidelity wireframes to refine the information architecture, testing, and iterating based on user feedback. I conducted usability tests with cohesive style tiles and high-fidelity wireframes, resulting in a design that enhanced navigation and discoverability while earning praise for its engaging and intuitive interface.
The Process
1. Empathize
Competitive Analysis
Analyzing competitors through a SWOT analysis reveals that Send Chinatown Love has a strong community-oriented mission and a meaningful user experience. It faces challenges with scalability, user navigation, and competition. However, there are significant opportunities for growth through partnerships, feature expansion, and increased marketing efforts.
User Interviews
Affinity Mapping
From the interviews, I mapped out common themes together. These ones are the top categories I decided to focus on for this project:
Key Insights
Top 3 Research Findings
2. Define
User Persona
Aaron is a young professional helping others find homes and offering Chinatown living tips. My interview insights shaped his persona, which will guide the discovery page design.
3. Ideation
Feature Set
From the site map, prioritized features, and the user persona, I put together a user flow to demonstrate and test how a user might complete the most common tasks of the app. The user flows highlight navigating through the homepage, explore page, adding a business to your profile, and donating to a business.
User Flows
4. Prototype
Low-Fidelity Prototyping
The user flows served as a foundation for designing the low-fidelity prototypes. These key screens focus on the outline of the explore page and redesign of the homepage.
Low-Fidelity Testing
The low-fidelity wireframes helped me focus on user flow, functionality, and layout without getting distracted by visual details. Usability tests allowed me to observe how users interacted with the screens and navigated the flows, gaining insights into wording clarity and identifying areas of confusion.
Key Findings
High-Fidelity Prototyping
With the branding finalized and insights from the low-fidelity usability tests analyzed, I created the first iteration of high-fidelity wireframes. These wireframes represent key screens from the user flow and were used for further testing with users.
5. Test
Usability Testing
Key Usability Testing Findings
6. Iterate
Prioritizing Revisions
I enhanced the prototype to simplify key tasks, prioritizing changes based on high-fidelity test feedback. Each V1 has grid lines since it is an old screenshot. Here are the top three updates:
1st Revision - Adding a filter system to the Explore page
Added a filter panel that allows users to select specific cuisines, distances, and payment methods when searching for a restaurant.
2nd Revision - Made the Save button more visible
Relocated the Save button to the top of the screen for better visibility and easy access, allowing users to add restaurants to their lists quickly.
3rd Revision - Added a Confirmation page
Added a confirmation page after a user saves a restaurant, letting them know the business has been successfully saved. This page also offers an additional way to view the saved lists.
