our saas web application has 30 days subscription model. we don't use the auto-renew subscription since the user can complete his mission within those days and if not to manually extend the subscription.
I'm now working on this feature, where the user can renew his subscription. the renew option is available from the last 7 days, before the last week he won't see the option.
I've created a mock which I don't really convinced that it's delivering the feeling of "click on me" to renew the subscription.
the flow for renewing the subscription is a modal, so once the user clicks on Renew, a pop with 2 steps will be open.
this is the screen layout, I am clueless about the other possibilities on where I can put the Renew button. The current location is the must logic location I could think of.
I guess i'm trying to check two things:
- do you think the user will understand the Renew is clickable and will open a new flow
- do you have any other ideas on where/how the button should be?
Thanks a lot
UPDATE Ok, so I re-think it. since it's either complete the mission or renew the subscription (in the use case of last 7 days left to subscription), I thought about this option: some comments:
- I wanted to use a different color for the renew option but I have the style guide as a constraint since we don't have any other colors that represent a button. we use Green or Blue
- we use flat buttons also in other places in the application which are also opening new flows on popup
- I think that these two actions are related so it's better to have them closer to each other.
OK, so this is the final solution. it is a combination of @Alveros' inputs, material design and our app language and design