creating a Digital sales channel
Sococo’s online workplace
Project goal
Provide a way for customers to purchase and manage their team’s subscription to Sococo without talking to a Sococo sales representative.
My Role
End-to-end designer and product manager on a fully distributed team
the problem
Too much time was spent on billing processes internally.
Every sale or billing modification needed to go through our sales or customer success team.
Every month, our customer success team had to manually bill every customer.
The time taken by these processes prevented these teams from working on other projects
Customers expected to be able to manage their own billing, but instead had to contact Sococo team members to make changes.
In order to grow rapidly, Sococo needed a more efficient way to scale its sales channel, especially because the target market was small- to medium-sized businesses.
the process
Understand business needs
Prior to this project, the sales team had been offering custom pricing models for every customer. In order to create a digital sales channel, Sococo needed a standard pricing model.
I worked with the business team to understand Sococo’s business strategy, and how that related to its pricing model.
“What do we want to offer in the free trial? Is there a limit to the number of days? Is there a limit to the feature set? How should we encourage conversion at the right time? What should our pricing tiers be?”
The pricing strategy spreadsheet
Research
I read up on best practices for payment flows and converting users from free trials to paid customers.
I examined many other successful applications to see what kind of patterns are commonly used.
I went through many variations of the Slack team creation flow to understand their system as well as I could.
Preliminary design exploration
I broke down the problem into high-level user flows that considered the full scope of possible user journeys.
These user flows later helped me develop the requirements and design.
This particular example was a diagram of 4 different ways a user could potentially onboard into our application.
This is an example of a diagram I put together to spark a conversation with our engineering team.
I would usually gravitate towards using a whiteboard for this kind of discussion, but that is difficult on a distributed team communicating through video calls. I found that actively moving boxes and arrows during meetings to be a helpful way to demonstrate concepts.
Understand our system
I worked with engineering to identify where the gaps are in Sococo’s current system. This allowed me to understand the feasibility of potential solutions.
Get everyone on board
I synthesized all of my learnings into a requirements document.
Then, I discussed with all relevant teams and iterated the requirements based on feedback.
Evaluate third-party payment platforms
Sococo needed to integrate with a payment platform, so I worked with our business team to evaluate how well each option would align with our product requirements and business needs.
We ended up choosing a platform called Chargebee because it would also manage Sococo subscriptions, which would reduce the development time needed to release the digital sales channel.
Create a design system diagram
Before getting too far into the design details, I expanded my high-level user flows to create a wholistic diagram to make sense of the overall system. This was helpful for creating a common understanding of the proposed design solution with the engineering team early in the process.
Dive into the details
Using the overarching design as a roadmap, I dove into the design details of each piece of the product. For each piece, this process included:
Interaction design
Plan selection page interactions
Create account page interactions
Identify edge cases
I created this spreadsheet to go through all possible situations a user could be in during the payment flow.
After creating the spreadsheet on the left, I simplified all of the cases into this simple table with only five resulting UI behaviors.
Visual design
I worked with one of Sococo’s front-end engineers to finalize the visual design. We utilized existing styles to create consistency with the rest of the product.
Continued support
Throughout the development of this feature, I continued to work with developers to solve problems and answer questions as they came up.
Outcome
The digital sales channel was deployed successfully, and it has become Sococo’s primary sales channel.
The product team continues to make improvements to this feature, and is currently working on migrating all of Sococo’s customers from the manual billing process into the digital sales channel.