Zip Pals: A Mobile App Design Concept for iOS. More than just a passing hello — it’s the better way to meet (and actually hang out with) your neighbors.
PROJECT OVERVIEW
My team of 4 UX designers spent 2 weeks collaboratively researching and developing a concept design for a new iOS app to help city-dwellers meet and make meaningful connections with their neighbors so they can enjoy local experiences together. Zip Pals is designed to help users connect online based on shared interests and zip code, and then meet offline for nearby activities and events that reflect their mutual shared interests, and that are located within a radius that is also based on their zip codes.
We selected a potential partnership with Yelp, a brand whose mission aligned with our concept, and whose existing features & functionality complemented our design.
This UX case study includes both an overview and details on each part of our process, including opportunity ideation, research, design, the prototype concept, testing results, and recommendations for Next Steps.
My Role
- UX Researcher
- UX/UI Designer
- Scrum Master
The Team
Molly W. Stewart, Victoria Qian, Greg Starr, Hanna Chumakova
Timeline
2-week Agile sprint
Methods
Topic Maps, Competitor Matrix, Screener Surveys, User Interviews, Affinity Mapping, Persona, Journey Map, Moscow Method, Design Studio, Sketching, Rapid Prototyping, Wireframes, Iterative Testing, App Flows, Usability Testing, Figma
Tools: Zoom, Otter, Google Forms, Figma, Google Sheets & Slides
Check out the full high-fidelity Zip Pals prototype here.
RESEARCH
“New York is a splendid desert. A domed and steepled solitude, where the stranger is lonely in the midst of a million of his race.”
— Mark Twain
Research Overview
In our research phase, we discovered that despite a saturated social app market, the current segmentation provided us with an opportunity to help users meet new people in their local neighborhood who share their interests, and improve the likelihood of developing meaningful friendships.
Methods & Tools: Topic Maps, Competitor Matrix, Screener Surveys, User Interviews, Affinity Mapping, Persona, Zoom, Otter, Google Forms
Keep reading for details about each step in our research process to learn how we made that discovery.
Opportunity & Competitor Matrix
Topic mapping problem spaces provided us with a way of visualizing all the potential areas of opportunity we could explore to improve UX. After settling on a broader theme of how people utilize tech / social media to make connections, we created a competitor matrix as another visualization tool for seeing where our opportunity fit relative to competitors in the current market. It’s a great method for discovering and communicating visual quantification of the relative impact an area of opportunity could have, based on it’s differentiation in the field.
We set out to validate / invalidate our assumption that “it can be difficult to meet new people and build new relationships in urban areas and dense cities, because users often feel isolated and disconnected in their local community.”
Screener Surveys & Candidate Selection
In developing a screener survey to find interview candidates, we pivoted almost immediately when we realized that the language of our assumption wasn’t actually specific to the problem space we were exploring; namely, we had used the word “community”, but not “neighbors/neighborhood”. Our first choice had the potential to steer the project in a different direction, because the word “community” has different connotations that may or may not apply to a local area.
PIVOT: We wanted to make sure we were clear that we were exploring how people make connections in their neighborhood, so we re-wrote our screener survey overview to reflect that. Because of the current market segmentation in this area, we also clarified in our survey that we wanted to know more about how users meet new people outside of romantic and professional relationships.
Interviews & Discussion Guide
During our interviews, or goal was to find out how users are currently meeting new people in their neighborhoods outside of romantic or professional relationships, and how they feel about their experience.
As we were qualifying interview candidates, we realized there was a potential future opportunity to research and design our concept for different geographical markets (suburban, small town, rural), and we added it to our next steps.
Ultimately, we selected 8 final interviewees who represented a balance of ages 25–70 and locations across the United States, and they were chosen based on 2 major points of criteria:
- they lived in a city / urban area
- they were interested in getting to know more people in their local neighborhood.
Discussion Guide
During interviews, we asked questions using the following discussion guide that was developed by the team:
- What apps or services, if any, do you use for meeting new people locally?
- Tell us about your experience, if any, of meeting people online and then taking it offline in a local capacity.
- What did you like about it / what worked for you?
- What did you NOT like / what didn’t work for you?
- Did anything surprise you about the experience?
3. Tell us a bit about your current neighborhood, and what your relationship with your neighbors is like.
4. How do you connect with your neighbors? How often?
5. What challenges, if any, do you face in meeting new friends? Why?
6. What, if anything, are you doing to meet new friends in your neighborhood?
7. Where do you meet new friends in your neighborhood?
8. What kind of local activities do you enjoy? Why?
9. How do you find out about events in your neighborhood?
Affinity Mapping / User Insights / Persona
Affinity Mapping is a method of synthesizing data from user interviews to discover trends. Through 3 rounds of affinity mapping, we saw significant trends in people’s desire to make new friends locally and also have deeper, more meaningful connections with people who share their they values and interests.
However, the majority of people we interviewed also felt that they lacked a context or physical location for doing so. They already had established activities and places for meeting their current friends, but the didn’t have places to meet new friends in-person for the first time, and the users’ security and safety around taking an online connection offline was a major concern.
Interpreting our affinity map, we drew the following insights about our users:
Our final steps in the research phase included creating a Persona — a personification of our average user based on our insights that gives us a clear picture of our users’ current behaviors, goals, needs & pain points. A Persona is the foundation on which a credible problem statement is written to begin the design phase. You can see both below:
DESIGN
Design Overview
To quickly see how our design solved Lucas’s problem, you can check out the full prototype here. An app flow is also provided below for reference.
Our research, prototype concept and partnership with Yelp were presented to internal stakeholders for review, showcasing:
- Partnership benefits for Zip Pals & Yelp related to our Activity Generator feature and Yelp’s Events/Activities page
- the Sign Up, Onboarding, and Profile creation process for Lucas, our Zip Pals user
- the 3 main tabs that comprise Zip Pals footer navigation:
- “Explore” Tab: the algorithm-based map screen screen where both new and returning users can view “neighbor matches” and profile details for other users in a chosen radius based on their interests and zip code
- “Connections” Tab: Messaging between users who have sent and accepted requests to connect, which includes our auto-generated activity recommendation feature
- “Activities” Tab: Where a user can view confirmations on upcoming and past activities they have planned with other users
Tools & Methods: Feature Prioritization, Design Studio, Sketching, Wireframes, Iterative Usability Testing, Rapid Prototyping, App Flows, Figma, Google Sheets, Google Slides
Keep reading for details about each step in our design process to see how we developed our high-fidelity prototype and selected a brand for partnership.
Research to Design Transition
With several pain points to take into consideration, my team created a Feature Prioritization matrix using the Moscow Method, which is used to evaluate the potential impact on users and cost (both time and money) of development for each potential feature to build an MVP in the project timeline to present to stakeholders. With 1 week left in our sprint, we chose to focus on the following features:
Partnership Selection
Our initial brand partner, American Express, was chosen based on the cash-back rewards feature we included during the prioritization phase meant to retain / hook users. The concept involved users getting cash-back credit in exchange for booking activities and experiences through the app, with preference and higher credit given to users paying with an American Express credit card. The partnership would provide value to American Express by increasing their revenue.
However, we found it necessary to remove the reward feature during mid-fidelity testing because it didn’t serve our user’s most immediate needs which were, which left us needing to consider a different partnership. We moved the reward feature to our Next Steps, and selected Yelp as our official partner.
A partnership with Yelp would be mutually beneficial:
Pending an initial system investment from Yelp to add booking/payment functionality to their brand for users to book tickets and make reservations for their listed events, Yelp would generate the automatic, location-based suggestions that appear in Zip Pal’s “Recommended Activities” feature available during messaging between already-matched users. In return, traffic from Zip-Pals would lead directly to Yelp, increasing traffic, user engagement through posted reviews, and opportunity for revenue on the the easily-missed and under-developed Activities / Events feature on their website.
Design Studio — Sketching
As part of our design ideation process, the team spent about 2 hours in Design Studio, an iterative process in which each team member rapidly and silently sketches several lo-fidelity ideas for a designated feature and then pitches them to the rest of the group for feedback and critique, iterating back to rapidly refine one design for each feature and share it again. Lastly, the group converges as a team to extract the strongest elements from each team member’s design concepts and collaborate on the final design to take into mid-fidelity.
Iterations: Mid-Fidelity to Hi-Fidelity Wireframes & Testing
The majority of our time in the design phase was spent on our mid-fidelity designs. Despite our tight timeline, we spent spent 4.5 days working through 3 rounds of iterative design and testing before we felt we could bring our designs to hi-fidelity.
During that time, we made huge changes as we moved through mid-fidelity iterations; the biggest changes were directed towards eliminating complex content, extraneous visual elements, and unnecessary toggles & screens to increase cognitive understanding on each screen and the user flow as a whole. Overall, we reduced our design from 54 screens to 31 screens, making it easier for users to focus on essential functionality of the tasks we were asking them to complete during testing.
Mid-fidelity is critical not only to UX design but all design work, because this is the point of the process where you are ONLY focused on one thing: functionality. Can a user work through provided tasks with relative speed and ease? Does your layout make sense to a user when they are locating specific features? Does the product work?? These essential questions all need positive answers before you can move forward, so I’m glad to have spent so much time on it. It was also my first time using Figma to create wireframes, and I found it easy to learn based on my working knowledge using Sketch.
Please note: The tasks used for usability testing also changed as our designs changed, to help improve user understanding and comprehension of the app. Please see those changes below.
Usability Scenario / Task Changes
Mid-Fi 1
Scenario: You recently moved to New York City. You don’t have a very large network and you’re interested in meeting some of the people in your neighborhood who share similar values as you.
- Task 1: Set Up a new profile
- Task 2: Now that you have an account, find someone to connect with and do something together
Mid-Fi Tests 2 & 3
Scenario: You recently moved to Brooklyn, NY. You don’t have a very large network and you’re interested in meeting people in your neighborhood who share your interests and who you could make friends with.
- Task 1: Create an account as a new user and set up your profile
- Task 2: Once your profile has been created, find someone within a radius of more than ½ mile to connect with for making plans
Hi-Fidelity Test 1
- No changes to Scenario or Tasks 1 & 2; 3rd task added:
- Task 3: Start a chat and make a plan to do something together.
Mid-Fidelity Iterative Design Changes
Here are the changes we made to each of the 4 major sections of the app during our 3 rounds of mid-fidelity designs, based on our results of usability testing. Screen-to-screen changes are shown for each section, with correlating notes below.
1. SIGN UP / ONBOARDING
Mid Fi 1: Original design included ID scanner with minimal onboarding and explanation.
Mid-Fi 1 Testing Outcomes: Testing showed that although users were interested in increased security, they were not interested in releasing sensitive information so early in the process, before they knew much about product.
Changes for Mid-Fi 2: remove ID verification
Mid-Fi 2 Testing Outcomes: Testing showed users were still unlikely to connect with users without some form of built-in security.
Changes for Mid-Fi 3: Include more detail on Onboarding screen so users know what to expect / what they will have access to in exchange for ID verification. Add the ID verification screen back to the wire-flow after OnBoarding screen, with more detail on the benefits.
Mid-Fi 3 Testing Outcomes: Testing showed new users were comfortable with the ID scan and Onboarding, but that moving forward in the flow, they didn’t understand that user matches would be generated based on their profile interests.
Changes for Hi-Fi: Expand Onboarding screen for increased comprehension / expectation with flow; add an “About” modal to the landing screen so users who are unfamiliar with the app have immediate access to more information.
2. PROFILE BUILDER
Mid-Fi 1: Original design included an extensive Lifestyle, Values, and Interests/Activities section in the Profile Builder, because our research indicated users wanted to find friends who shared both their interests AND values.
Mid-Fi 1 Testing Outcomes: Testing showed that users 1) found the lifestyle questions too personal and were more comfortable providing a smaller amount of more general information upfront 2) were more likely to want to match with a potential neighbor-friend based only on their shared interests and thought it was difficult and ultimately unnecessary to choose or rank their own values 3) did not like “endorsing” another user as a safety feature because it encouraged ranking users, which might make a user feel bad, 4) could not find the “Save” button after filling out their profile info, and 5) liked the option to include their hometown in the Profile Builder as a point of common ground.
Changes for Mid-Fi 2: Eliminate Lifestyle and Values; keep “Hometown”; move “Save” button to bottom of screen.
Mid-Fi 2 Testing Outcomes: Results showed that users wanted to know which parts of the Profile Builder were required to answer and which were optional, and also questioned why we asked them to share their current city.
Changes for Mid-Fi 3: Highlight all “required” fields; Change “Current Location” to “Zip Code” to align with Onboarding and reiterate to the user how the search algorithm works as a way of helping to prepare them for the next screen.
Mid-Fi 3 Testing Outcomes: No issues
Changes for Hi-Fidelity: No changes made
3. EXPLORE TAB (PRIMARY NAVIGATION)
Mid-Fi 1: Original design included “People”, “Activities”, and “Messages” tabs in footer navigation, with the users “Account” and a Hamburger menu appearing in the header Navigation. The original design of the “People” tab included a map and scrolling list of nearby users, a toggle for the user to switch back and forth between viewing new users’ details and connecting with them / users they have already connected with. The “Activities” tab showed users nearby activities on the map with a scrollable list and also included an internal toggle, allowing them to toggle back and forth between Activity matches they could click on to rate their level of interest, and Activities they had already planned with other users.
Mid-Fi 1 Testing Outcomes: Users liked the Activities feature as a major differentiator because auto-generated recommendations took the guess-work out of planning something to do; however, the Primary Navigation was too small, complex and busy, both in visual layout, and because of the toggle options within tabs. Users did not understand the “scoring” of interests and values when viewing another user’s profile details. Users did not understand how the footer navigation tabs related to the primary task flow.
Changes for Mid-Fi 2: Change footer navigation to “Explore Matches”, “Conversations” and “My Account” to help increase understanding of task flow; shower fewer matches per scroll / increase size of user profiles shown in the tab; eliminate Values and scoring from User Profile detail view; Move Activities / Activity Generator to live within user messaging.
Mid-Fi 2 Testing Outcomes: During testing of mid-fi round 2 screens, users found the user profile images on Explore Matches tab too small; in the user details, they wanted to see the details take up more screen space and also were confused whether the shared activities were clickable or not. They also expressed that they expected to request connecting with another user through their individual profile details, not on the main Explore tab. Lastly, there was no understanding of where a pending connection with another user lived once the request was made.
Changes for Mid-Fi 3: Eliminate user’s last name in public profiles for privacy and security; increase the size of images of matches shown and move the “Connect” option to live within the user details; increase size of user details to a full page and make sure shared activities listed do not look clickable; update footer navigation tab language from “Conversations” to “My Connections” for increased pattern recognition with language and to continue clarifying task flow; make messages and pending requests features that are internal to “My Connections”; update Hamburger to include comprehensive navigation that includes previous secondary navigation as well as secondary navigation listed under “My Account”; replace “My Account” with “Activities” in footer nav to continue clarifying task flow.
Mid-Fi 3 Testing Outcomes: No issues
Changes for Hi-Fidelity: Simplify language of footer navigation to single-word descriptors: Explore Matches / My Connections / My Activities becomes Explore / Connections / Activities.
4. CONNECTIONS / MESSAGING & ACTIVITY GENERATOR
Mid-Fi 1: Included Active and Pending connections and respective messages; Activity Generator appeared within conversation between 2 users as the result of AI / machine learning linked to text; the activities themselves were generated by an algorithm based on the users’ shared interests.
Mid-Fi 1 Testing Outcomes: Testing revealed that users did not understand where the generator came from, or why these particular activities were shown. Ultimately they did not understand that the activities were based on their shared interests.
Changes For Mid-Fi 2: Add “shared interest” buttons to profile header in the conversation, as a way of reminding the user what they have in common and giving them control over the types of activities that are generated for both users to see.
Mid-Fi 2 Testing Outcomes: Related to the testing results of User Profile Details for the same round of designs, testing here showed that users were confused by the “interest” buttons located at the top of the conversation screen with the user’s name. They did not expect to interact with them as clickable buttons because they weren’t clickable before when they had seen them on the User Profile Details screen. They also wanted to see the auto-generated activities within their conversation, not in a separate section.
Changes for Mid-Fi 3: Eliminate user’s last name in public profiles for privacy and security; eliminate the “shared interest” buttons and replace with an icon specifically for the user to prompt the activity generator; move the generated activities to an overlay modal on top of the user conversation for user to select from and add one to their conversation; add the agreed upon activity to the new “Activities” tab, so the user has confirmation and can see upcoming plans.
Mid-Fi 3 Testing Outcomes: Users did not initially see or understand that the “Activity Generator” icon at the top of the screen was clickable (ferris wheel).
Changes for Hi-Fidelity: Make sure the Activity icon affordance at the top of the screen is obvious to users; remove footer navigation on messaging screens to align with standard iOS HIG principles.
Hi-Fidelity Prototype
Because of the major changes in our mid-fidelity designs due to 3 rounds of testing, we were fairly confident in the functionality of Zip Pals moving into our high-fidelity designs. We created a style guide using a green palette to suggest friendship, and a spec doc to track all UI components making sure that universal components used across the app were consistent in function, size, and style.
Check out the full high-fidelity prototype here.
Hi-Fidelity Test Results
Our high-fidelity design revealed positive feedback and scoring during testing:
- Users liked the detailed OnBoarding screen
- Users felt the ID verification feature made the app more credible and therefore safe to use
- Loved getting activity recommendations
- Clean layout
- Satisfaction with their experience: 3.5/5
- Ease of use score: 4/5
- How likely to recommend to someone: 4/5
It also revealed areas of improvement:
- The function of the Activity Generator icon was still unclear to users
- Need to clarify that the Activity Generator’s system is an algorithm based on user interests
With our sprint schedule deadline we were only able to complete one round of testing with our hi-fidelity prototype before our stakeholder meeting.
NEXT STEPS
Explore questions asked during our stakeholder meeting, including:
- What is the tech / engineering behind the ID scan?
- How will you expand on the featured Activity / Interests categories in the Profile Builder to include more specific preferences?
- Will users be able to submit suggestions for new Activity / Interest categories?
- How are you going to prevent Yelp from promoting activities with businesses who are paying for sponsored ads?
Re-iterate on our research & design process:
- Develop and add cash-back rewards feature for users (pending partnership agreement with Yelp)
- Continue refining and testing high-fidelity concept prior to roll-out
- Soft roll-out in NYC for beta testing, before launching in other major cities
- Research viable opportunities in different geographical locations (suburban, small towns, rural); produce concept designs if so.
CONCLUSION
Creating an iOS app from scratch as a new UX designer was both an exciting and draining process! Decision fatigue is real, and the way to guide your decision-making in design is to always be thorough and exhaustive in your research and usability testing, iterating as you go and measuring the results.
