Methods

Brainstorming

Competitive Analysis

Research

Sketching

Responsibilities

Interaction & Motion Design

Prototyping

Requirements Gathering

Wireframes & User Flows

Timeline

4 Months


The Ask

The overall design, functionality, look, and feel of the Zoosk purchasing experience no longer aligned with the rest of the site design. This was a jarring experience for people using the product that needed to be updated in addition to integrating some new payment methods.


The Process

Zoosk is present in over 70 countries, which means there are numerous payments types we do not have in the United States that I needed to be familiar with. The Product Manager and I had several meetings where we went through various payments options, how each functioned, and any time delays involved.

After this initial requirements gathering and clarification phase, a research phase began. Working with the product manager, we looked for exemplars in the fields of retail, e-commerce, online wallets, and various other payment systems to determine a set of overall best practices to include in the new store experience.

We formulated some foundations we wanted the new design to incorporate. The store often appears because of a paywall, so we knew we wanted to the store to be quicky and easy. This would allow people to get back to what they were doing. We also knew that feedback throughout the process, and clear communication were essential to making people feel at ease. And finally, a third pain point that we uncovered was that some payment types take a period of time to process, and people using these payment types were not always aware of the cause of the delay. This was leading to disappointment and frustration. While we couldn't fix the time delay, we wanted to communicate the delay and give people quicker options if they wanted to change their payment method.

Throughout the process we iterated on many options. Ultimately we narrowed down to two options, an accordion style store similar to what you would see on Apple's website, or a modal that would work as a step by step process. I built prototypes for both using Quartz Composer and solicited feedback on both from a variety of stakeholders. We chose the modal option because it was proved easier to understand and overall easier to navigate during testing.

This is a hierarchy diagram for our store. I created this to help the team understand how each piece of information fit together.

This is a hierarchy diagram for our store. I created this to help the team understand how each piece of information fit together.

New Store

The first big change was that the original store was a single page where a person would select their plan, enter payment information, review legal documentation, and eventually purchase. This flow changed to a two step process for appropriate payment types. The split would occur where a person signing up for a subscription would first see the subscription packages and input their payment information. The second screen acted as a receipt, where the person would see the total cost, legal information, and the option to finish the purchase or make changes. This flow varies somewhat for payment types such as purchasing through iTunes, using direct debit, or paying by check. The change was meant to help reduce decision fatigue and help people parse the information easier.

The second large change was that we significantly cut down the required fields for the primary payment type of credit card. We removed all non-essential fields, and focused only on card number, security code, and expiration date. This was to lessen the work required by the person signing up.

Finally we added some microinteractions. The first of these was that we provided inline checks for certain fields that required input. These checks would make sure the person put in an appropriate value. For example, on a credit card, a person would get a checkmark if they typed in 16 characters, but an X for anything else. This gave immediate feedback to the person signing up and let them correct errors immediately. For credit cards we also introduced an animation such that when the card type was recognized an image of the card would appear in the card number field, and the security code image would update to show where to find the correct code on the card.

Results

15%

Subscription increase

12% 

Virtual currency increase