ZipPals - iOS Native App Case Study

Video: ZipPals Walk-through

Overview

Timeline
A Two-Week Sprint
Platform

iOS Native App

My Role

UX Researcher

Design Lead

Tools

Figma

This is a case study developing a new digital product helping people build meaningful friendships locally from scratch. I collaborated with three teammates and took the lead in the design phase. We conducted current market research and found that the current tech landscape of making friends are segmented, events-first, and/or aiming at maintaining friendships. We believed that an approach of "users driven first followed by meetup events" locally was an area of opportunity. The UX process in use included but not limited to contextual inquiry, user interviews, persona creation, design iteration, and usability testing.

Methodology in Use

Research
Competitor Landscape
Screener Survey
User Interview
Affinity Mapping
Persona Creation
Ideation
Design Studio
Feature Prioritization
Mid-Fi Wireframes
Usability Testing
Design and Prototype
High-Fi Prototype
App Flow
Usability Testing
Specification Documentation

Research & Analysis

We found an area of opportunity in developing meaning new friendships within a neighborhood and conducted further field research to support our new product. During the research phase, we conducted 7 user interviews and applied quantitative and qualitative methods to synthesize interview data into insights and user persona. Current users were busy and wanted to meet new people in a safe environment (online or offline) closed to them to explore potential meaningful friendships.

a user persona of Zip Pals App
Figure 1. Zip Pals User Persona: Lucas Rowland

Mid-Fidelity Wireframes

Based on the design studio sketches, we moved to digital space to create our mid-fidelity wireframes. We ran three rounds of usability tests and rendered three mid-fi design edition, based on users' feedback. The first round of design had shown a major problem and required heavy redesign while the changes from the second round design to final mid-fi wireframes were minor layout/flow edits.

Figure 2. Iteration of Mid-Fidelity Wireframes

Hi-Fi Prototype

After testing the product at the mid-fidelity level with 5 users and receiving a 100% success rate, we started to investigate the psychology of colors to refine our design. I took the lead on the style guide, design layout, and specification documentation (including visual and functional annotations). A final high-fidelity prototype including over 50 screens that were tested and approved by users.

The high fidelity mockup follows Apple's Human Interface Guidelines. The branding palette used the analogous colors of mint green, a symbol of friendly, with an accent color of pale yellow. To ensure the color contrast meets WCAG 2.0 accessibility compliance, the usage of branding mint color in the high-fidelity product is minimal.

hi-fi wireframes in order screenshot
Figure 3. High-Fidelity Mockup Wireframes

We conducted usability tests with three users of three different tasks. 3/3 users succeeded to create an account and commented that the profile building process was easy. However, for the other two tasks, there were minor problems, like unfit screen size, which resulted in a score lower than 100%.

Feature Highlights

We developed features that would make ZipPals competitive in the market, as well as invested in making micro-interaction to further improve the user experience.

New User - Onboarding & Create a profile

ZipPals is easy and safe to use. For a new user, ZipPals has a simple sign up process that requires only email and password. The onboarding screen uses icons and simple words to show the 5 steps from sign up to master ZipPals, as well as highlight the ID verification and activity generator features. For creating a profile at ZipPals, only essential information is need while the activity/interest selector are key for later matches and activity suggestions to work.

easy to set up - new users
Return User (Main Flow) - Explore, Connect, and Meet

The main flow of ZipPals is to explore people in your neighborhood, connect with those you want to meet, start the conversation and select a suggested activity, based on you and your new friend's interests, to go and have fun. ZipPals values our user's safety as the suggested places/events to meet are safe and in public.

highlighted screens - main flow
Micro-Interaction Design

The main flow of ZipPals is to explore people in your neighborhood, connect with those you want to meet, start the conversation and select a suggested activity, based on you and your new friend's interests, to go and have fun. ZipPals values our user's safety as the suggested places/events to meet are safe and in public.

App Flow

To demonstrate how users navigate through ZipPals, I created this visual flow to show the features and user flow.

the user flow of the ZipPals App
Figure 4. ZipPals App Flow

What I Learned

We spent a lot more time than scheduled during the mid-fi design stage, which was out of everyone's expectations. The first design hit an extremely low success rate, which was caused by the overwhelming quantity of content/features in UI. We tried to put everything we could think of but ignored which were the most essential. This process made me truly understand the essence of Nielson's heuristic, "Aesthetic and minimalist design".