About the project
Company X is moving towards a subscription based model and part of that is allowing the user to choose a subscription based on their needs as well as upgrading an existing subscription.Acceptance Criteria:
My Role
For this project I worked with product owners and engineers in understanding the users who would be using this functionality, what was technically feasible, and the ensuring that the overall design was consistent with the existing design system. I also created the new flow that the user would follow for both sign up and upgrading.Design Process - Selecting Subscription
Ideation
There was some free reign in terms of what the layout of the page might look like so I played with a few different ideas ranging from a single page selection and sign up, different ways to display all features for each subscription choice, how the information might be laid out for each choice, and how to put into focus the choice the company might want the customer to choose.
First Iteration
During the first iteration I built off one of the designs from ideation that I felt would work best. The changes that were made from the ideation design was making each option consistent in sizing and rather than put the tier the company wanted users to select in the center, I moved that selection to the right in order to display each tier in an order based on pricing. To make the tier that product owners want to emphasize I added a green banner on top of the “Premier” option which I felt would help it stand out against the other options. There was also some slight text size changes as well as making the button sizes bigger.
Final Design for Subscription
After meeting with product owners they felt that the design met all their requirements. I designed the rest of the flow which consisted of the user selecting “Creating a new Account” on the sign in page, selecting a desired tier, inputting the required information, and selecting continue once they are done. Once the user has completed the sign up process they would be brought to the new account set up page. After the setup has been completed the user can see the tier they selected under the user drop down. If the user wanted to view or upgrade their subscription they would select manage.
Design Process - Upgrading Subscription
Upgrading
The upgrade process was fairly straight forward. I used the existing subscription design and updated the design to reflect the upgrade process. For the upgrade process a user cannot downgrade from their existing subscription. only upgrade. To accommodate this acceptance criteria the "Select" buttons were disabled depending on there current tier. Hover text would help indicate the reason for not being able to downgrade. Once the user selects the new subscription they want they will see a confirmation message. After agreeing to the upgrade the user will see the new subscription they are in by selecting the user dropdown.
Brought to Life
