Plans and Billing
Designing and implementing a user-friendly interface that enables Codux users to efficiently log in, manage their account, and utilize Wix Billing services. Additionally, the task required developing features that will allow Codux users to invite members and manage team roles. Another crucial aspect of the task was to provide users with a seamless online editing experience without requiring the installation of local technologies.
Project Type
Year
Role
Feature
2021
UX Design
The problems
-
As Codux was intended to be released firstly as free of charge to all users, it was crucial to forecast the level of adoption following the transition to a paid model. One potential challenge lies in the possibility that the product's value proposition may not align with user demands, resulting in limited revenue potential. Moreover, accurately assessing the product's value proposition can pose a challenge.
-
To ensure a smooth transition, it is Crucial to effectively communicate to users that Codux is currently in beta and will be transitioning to a paid service upon its official release.
A failure to do so could lead to user confusion and dissatisfaction, ultimately hindering adoption rates.
Research
I initiated the task by conducting research on various tools, assessing their Sign/Log in functionalities, evaluating their freemium/premium/trial/upgrade plans, and analyzing their options for organizational and role management.
Goals
Drawing upon the findings from the research phase and our organizational vision, we established the following objectives:
Validate the product's value proposition before allocating resources towards the Billing and Monetization components.
Build trust by communicating to users that Codux is currently in its BETA version and will transition to a paid service upon its official release.
Enable team collaboration within Codux, while implementing a role-based permission system to ensure proper access controls.
Plan
Based on the established goals, we prioritized the following tasks:
-
Offer an advance sign-up opportunity to users and provide a discount on the Premium version prior to its official release, in order to test for potential demand.
-
Develop and offer different account types for organizations to select from based on their
specific needs. -
Limit individual users to open source projects on GitHub, thereby enhancing the appeal of the premium version to large-scale companies, while eliminating the option for private projects.
-
Allow companies to manage their users and share multiple projects with them.
-
Provide collaborative work features on organizational projects.
-
Grant admin permissions for team, organizational projects, and billing management within a
centralized location. -
Provide users with a smooth and efficient online editing experience, as well as a clear starting point, without necessitating the installation of local technologies.
User flow
During the user flow stage, my collaborator, the Product Manager, and I mapped out the various entry points and tasks for efficient navigation of the tool. This prioritized the seamless execution of key functions, such as logging in, managing accounts, inviting members, and manipulating team roles, in order to provide a user-friendly and efficient online editing experience.
Our process entailed a thorough analysis of the potential pathways that users could follow, revealing a number of edge cases and entry points that required careful attention. Ultimately, the goal of this stage was to optimize Codux's user experience by providing a clear and intuitive
path for users.
UX / functional design
Drawing upon the insights obtained from my initial analysis and in consultation with the design team, I created low-fidelity wireframes for the features. Using Figma, I refined these wireframes through several iterations to ensure greater flexibility in adjusting the layout.
I collaborated closely with the design team, incorporating their feedback on my wireframes, to produce mockups in Figma. These mockups served as a powerful tool in communicating and visualizing the design vision to optimize the feature's user experience.
Prototype
Online project creation flows
I was responsible for conceiving and implementing online flows that seamlessly guide users through the login stage to project creation via three distinct options: creating a project from a Github repository, commencing from a pre-existing template, or initiating a new project from scratch.
Beta / Trial / Free / Full plan's flows
I created a map of user flows and specified the features accessible to users on each plan. I incorporated relevant banners to clarify each step in the flow and to encourage users to upgrade their plan when appropriate.
