Subscription Models

THE CHALLENGE

How can we monetize advanced features in our enterprise voice platform to grow our business, while maintaining a practical feature set for our users?

In mid-2017, we made the decision to implement a subscription model for the Command Center. Our goal was to get more customers set-up on a subscription, so our business could have recurring and predictable revenue streams - which in turn could provide us with more profits by cross-selling parallel products like the Onyx Smart-Walkie Talkie, bots, and more. 

THE USERS

Anyone with Purchasing Power
that makes decisions on what tools a team twill use. These can be managers, admins, or executive leaders of organizations.

We want to appeal to those who have the final say in what tools the organization uses. Our audience could be those using the the voice platform or those at a high level within the organization.

THE TEAM

Web UX Designer (me)
Mobile UX Designer
UX Researcher
Enterprise Product Owner
Web Developer Team

I worked with the user researcher to gain insights on best practices for upselling certain features. The design and product team would meet for our weekly design review to provide feedback. Throughout the sprint, I would iterate on mocks before passing them off to the development team for the next sprint.

BUSINESS STRATEGY

Work with business development, customer success, and sales to understand which features to strategically redact.

We followed the lead of business development, customer success and the sales team to 'market' certain features within the Command Center. We focused on hypothesized ROI metrics from the sales and business leads and listened to customer feedback to see where we could balance free features with more premium features.

Discover & Define

BUYING STUFF - IT SHOULD BE SIMPLE

If you needed to buy something, you would go to the store and buy it. Now, consumers can buy a variety of different kinds of products, from SaaS platforms to streaming services, to subscription snack boxes. We needed to create a service design to make our platform easy to shop for.

 

In our fast-paced, tech-oriented society, customers are always looking for the next best thing. Being able to effortlessly get their hands on the latest updated product offering is important to businesses using SaaS products, as it is often directly tied to their productivity and daily workflows. 

Moving to a subscription-based model would aid in immediate product delivery since our web platform exists in a digital form - meaning we could rest assured that our customers would all be getting the same updates. Plus, with a service subscription, revenue would be more stable and predictable.

KEY POINTS FOR PROMOTING A SUBSCRIPTION SERVICE

1

Make it Obvious

All promotion messages need to be visible and distinct from the rest of the page. These could be in form of highlighting premium features or banner notifications.

When thinking of how to design a successful subscription user experience, we came up with five main points to strive for. We analyzed how other other free trials of products used visual cues to upsell and promote parts of their service that were not free.

2

Make it Easy

Make all necessary information for decision-making easily accessible and minimize the amount of clicks users would have to go through to pay for a subscription.

3

Make Pricing Clear

Avoid dark user interface patterns and be transparent about final costs and subscription processes, things like how often a billing cycle occurs, any extra fees, any add-ons, etc..

4

Provide Different Plans

Give a few subscription options users can choose from. Ideally, users would also be able to choose their billing cycle and pricing tiers based on their type of business (person? small business? large organization?)

5

Give a Preview

Free trials are a great way to give users a preview of the full feature set they can expect to have access to at higher price points. It also allows users to see if the product meets their needs and can be a great source of feedback.

Wireflow

How were we going to funnel customers to purchase an Orion Subscription plan from the login page and our consumer-facing shopping page? What technologies would we use for online store? I explored a couple of pathways for our shopping flow: one where we built our own custom check-out flow and the other where we implement Shopify to handle check-out for us.

Building out our own check-out flow would be time-consuming and a huge developer resource tax on our already slim development cycle. With the development of our Orion Internal Tool and improvement cycles on the Command Center, the time and effort didn't seem worth it - even if it would be the best user experience solution for our business.

 

With Shopify (or other purchasing platforms), we already knew we would be limited by how much we could customize, for example, if new users were purchasing a plan, we wouldn't be able to fold in the Create New Account flow with the purchasing flow.

I created this wireflow to show the two different paths to obtaining a subscription, and what it would look like for a new user wanting to also create their account. I presented this to stakeholders for feedback. Stakeholders for this project included: Enterprise Product Owner, Head of Sales, Head of Engineering, Customer Success Lead, and Director of Marketing.

 

For sales, marketing, and customer success, it was imperative that we all agreed on pricing the different tiers according to the features and how to voice our solutions to better sell our product. For our engineer and product owner, it was important to decided on a tool to actually help build out this flow.

We were leaning towards to using Shopify because it seemed like the quickest solution to ship and would free up some developer resources to focus on improving our platform. I then took this wireflow and created a more in-depth user flow to help carve out what we would need for our MVP. After further discussion, the Product Owner made the decision to switch to Recurly for familiarity reasons. I personally had not invested any time in researching how Recurly could improve this flow and did not foresee issues this may cause.

Orion Pro_ Shopping Flow.jpg

Mockups: Orion Shop Page

After iterating on the wireframes, we came to a decision to integrate the pricing table into our plans page. I created conceptual mocks to put our ideas together for the next phase in our design review.

 

Our basic shopping flow would need a:

  • Product Page: where users can learn about our service plans and add plans to cart

  • Cart Page: where users can view their cart and purchase add-ons

  • Checkout Page: where users can enter their payment and account information

OrionShop_FlowConcept.jpg

Refining Mockups

I iterated on mocks for a month, pulling in stakeholders from customer success and engineering teams for feedback and hosting design review sessions with the product team on a weekly basis. 

To streamline the checkout flow, we decided to pull out the "Add-Ons" as a step, and instead created a modal that asks if users would like to configure add-ons for their plan.

 

According to our Head of Marketing, about 56% of our website visitors were on mobile devices. This was enough reason to create mobile-responsive designs for our consumer-facing website.

SHOPPING FLOW MOCKS

SHOPPING FLOW MOBILE-RESPONSIVE MOCKS

Promoting Features in the Platform

With different service plans, came different feature access in the Orion Command Center. Working with business, marketing, and product teams, we were able to define the which features would be redacted from Orion Basic. Orion Basic users will not have access to advanced management features, and will be limited to how many users could be added to the organization.

It was my job to design what the redacted features would look like and to provide messaging within the platform to Orion Basic users. Ideally, these messages would point them towards upgrading their plan type to Orion Pro by making the advantages clear through discovery pathways.

In the beginning of the design process, I was stuck between three color variants for or promotional messaging.Traditionally, gold/ yellow is used to denote premium features. However, I wanted to try something different - something that you may not see in other products, so I created a violet version. The violet version won out on votes with stakeholders, as it felt unique without feeling overwhelming as the gold and yellow version, but I still wasn't satisfied with it. I created a green version to bring it closer to our mobile app color palette and to advocate for product visual consistency - and it won out on votes over the violet version!

Design Feedback Cycles

My favorite way to get feedback from the team involves printing out mocks and taping them to a wall. Arming my colleagues with post-its and pens, I'll set them loose to provide me with unbiased feedback, comments, and questions. Usually, I'll give a brief introduction as to what the mocks are for, but I like to withhold my reasons for certain design decisions until after feedback is received. Below, is an example of the results of one of these sessions:

Afterwards, the team and I would sit down together and discuss the notes. I try to ask clarifying questions to understand their thought process, and answer anything if they were missing context for anything specific. 

The right-hand side of the printouts are purposefully left blank, so I can synthesize feedback into action items for myself.

Orion Basic Mocks

After a series of feedback sessions, iterations, and explorations, I shipped these deliverables with the web development team. For the in-platform shopping experience, we mirrored what we had done on the website for consistency. For the promotional CTAs, I took color inspiration from our mobile app to achieve a unified branded aesthetic. Since advanced setting management is one of the defining feature between Basic and Pro plans, I created a semi-transparent static overlay to give users a peak of these features. We had plans to animate parts of this, but our resources and timeline couldn't accommodate dynamic components.

Impact & Key Takeaway

I worked with the web team to ship Orion Basic, which green lit the launch for our Service Plans Shop page.

 

This was a huge milestone for Orion Labs because we now a way for our customers to:

  • Compare service plans to see what fits their needs 

  • Purchase service plans and add-ons from our website

  • Set themselves up with an organization on our platform

  • Various upgrade paths within Orion Basic to get Orion Pro for their organization

Main Takeaway: Be Adaptable

Pivots happen and new constraints can be introduced at any given time. It's important to understand that in a fast-paced environment with limited resources, design work is often not given a respectful amount of time to be validated extensively - which leaves it open to a lot of subjectivity from various stakeholders. I learned to celebrate the small victories and to not let the shortcomings get me down, because at the end of the day, we shipped what we needed to ship.

 

Case Studies

A SHOWCASE OF MY WORK AT ORION LABS
The Command Center

From conception to completion, we delivered our minimal viable product in under 8 months.

Settings

To give organizations a way to manage their users and groups, we created "Setting" views to help provision permissions.

Subscription Models
  • LinkedIn - Black Circle

Connect with me on LinkedIn!

© 2019 Toni Chen. All rights reserved.