Zoosk Subscription Addons

Project Background:

  • Create design experiences for 3 new add ons that give Zoosk users new "super powers" and help the company gain new revenue streams. The addons: Read Receipts, Invisible Mode and Premium Messaging

My Role and Timeline:

  • I was the main designer on this project and I worked closely with our brand designer on visuals and icons. The project timeline was 1 month.

Project Goals:

  • Allow these add ons to be easily understood and marketable
  • Each add-on has different entry points to purchase
  • Users can also purchase add ons from a store

Project Tags and Software:

Sketch
iOS
HTML and CSS
Android
Web
UI Design
Interaction Design

Starting Point

Prior to the project starting there was already one addon for sale: Premium Messaging. And a previous designer had already designed a store experience to sell the addon.

New requirements

  • Create a store experience that can hold 3+ addons and be visible at the same on mobile, tablet and desktop screens.
  • Create a distinguable style for each addon and also have some unity / cohesiveness in the addon branding
  • Create an ad entry point for each addon in the messages experience

Wireframes

A Responsive Store Experience

  • In order to save screen space and make multiple addon visible at the same time on mobile screens, one of the first things I made sure to do was to wireframe a mobile store experience where the addon card is about 90pt tall at 1x.
  • That same mobile store experience also needs to be responsive for tablet and web screens. Having the mobile addon cards turn into side by side cards on larger screens made the most sense to me.

Design Iterations

After creating wireframes of what I wanted the store experience to look and feel like I then moved on to creating some high fidelity design mockups. Some of the thought that went into the designs include making each addon distinguishable and making the store experience feel friendly to the end user.

Prototypes

Prototyping the purchasing interaction was the next thing I did. I wanted to ensure that when a user added an addon to their cart that there was immediate feedback but the other addons remain visible as well.

Design Problems:

  • Make it visually easy to distingue the difference between the bundle tiers
  • Make it frictionless to checkout after selecting a plan
  • Focus the user on a default plan but also display other plan options that might be cheaper than the default.

Finalized Designs

After creating some intial mockups I decided to work with the Zoosk brand designer on defining addon colors and iconography. The initial mockups in my opinion were too colorful and had too much going on at once. The finalized mockups for the store focused on mininal color outside of the addon icon on mobile phone and on tablet had very light colors until the user had added the addon to the cart.